[技术验证]: 插件的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 见附件

[pre lang="JavaScript"]//=============================================================================
// ModulePlugin
//=============================================================================

/*:
* @target MZ
* @plugindesc Allow Load Module Plugins
* @author Heartcase
*
* @help ModulePlugin.js
*
* Put the Module Folder under js/modules and the entry file should be index.js
* To invoke module, add the module entry plugin in plugins folder and enable it
* then call PluginManager.loadModule inside your entry plugin
*/

PluginManager.loadModule = (filename) => {
  const url = `js/modules/${filename}/index.js`;
  const script = document.createElement('script');
  script.type = 'module';
  script.src = url;
  document.body.appendChild(script);
};
[/pre]

q3226257

这样不好配置参数吧

苏小明

~