Project1

标题: [技术验证]: 插件的ES模块化加载 (附代码) [打印本页]

作者: 沉滞的剑    时间: 2020-12-12 16:40
标题: [技术验证]: 插件的ES模块化加载 (附代码)
使用ES模块来写脚本

原理:

给PluginManager添加loadModule方法用来加载模块
在scripts文件夹中放入插件的入口插件(本例中: TestModule.js)
在入口插件中加载入口模块
入口插件可以和其他插件一样使用插件参数和插件命令
在js文件夹中新建modules文件夹, 将模块(本例中TestModule)文件夹
我们约定模块文件夹下用index.js作为统一的入口

使用 import {} from './def.js' 来导入相对路径模块
使用 import {} from '/js/modules/abc/def.js 来导入绝对路径模块(以工程目录为根)

vscode中增加支持路径跳转的设置, 在根目录添加jsconfig.json
在其中增加:
{"compilerOptions": {"paths": {"/*": ["*"]}}}

Example 见附件

JAVASCRIPT 代码复制
  1. //=============================================================================
  2. // ModulePlugin
  3. //=============================================================================
  4.  
  5. /*:
  6.  * @target MZ
  7.  * @plugindesc Allow Load Module Plugins
  8.  * @author Heartcase
  9.  *
  10.  * @help ModulePlugin.js
  11.  *
  12.  * Put the Module Folder under js/modules and the entry file should be index.js
  13.  * To invoke module, add the module entry plugin in plugins folder and enable it
  14.  * then call PluginManager.loadModule inside your entry plugin
  15.  */
  16.  
  17. PluginManager.loadModule = (filename) => {
  18.   const url = `js/modules/${filename}/index.js`;
  19.   const script = document.createElement('script');
  20.   script.type = 'module';
  21.   script.src = url;
  22.   document.body.appendChild(script);
  23. };

js.zip

2.32 KB, 下载次数: 48


作者: q3226257    时间: 2020-12-14 09:58
这样不好配置参数吧
作者: 苏小明    时间: 2022-2-27 21:33
~




欢迎光临 Project1 (https://rpg.blue/) Powered by Discuz! X3.1