[技术验证]: 插件的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 代码复制

//=============================================================================
// 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);
};

//=============================================================================


// 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);


};

q3226257

这样不好配置参数吧

苏小明

~