# 定义
JModule.define(moduleKey, {
/** 基础字段,可选,由Jmodule使用 **/
init: async () => 'ok', // optional
imports: [], // optional, 声明依赖的子应用列表,比如需要在代码中引用其它子应用导出的组件、函数等时用。
exports: {}, // optional, 根据需要导出用于共享的组件、函数、变量等
/** 扩展字段,按需,由宿主应用使用,也由宿主应用约定 **/
// eg: 通过动态路由方式加载子应用
type: 'module',
routes: [],
// eg: 通过挂载方式加载子应用
type: 'app',
bootstrap: (module) => {},
mount: (module, el, stats) => {},
// eg: 仅共享组件、函数、变量,比如插件定义
type: 'plugin',
exports: {
$noticePanel: () => {},
$headerPanel: () => {},
},
});
# 分享自己的组件
JModule.define('myKey', {
exports: { // 共享组件、函数、变量等
$noticePanel: () => {},
$headerPanel: HeaderPanel,
},
});
# 使用分享的组件(异步)
// require 参数为: ${子应用key}.${子应用exports的字段名}
const $noticePanel = await JModule.require('myKey.$noticePanel'); // 异步的
# 使用宿主应用导出的组件(同步)
const Vue = JModule.import('$node_modules.vue');
const Vue = JModule.import('$node_modules.vue', { scope: 'someScope' });
// 或
import Vue from 'vue';
// 并通过WebpackJmodulePlugin完成解析
new WebpackJmodulePlugin({ externalAlias: { vue: 'someScope:$node_modules.vue' } });
如何定义导出的组件,参考:组件共享