必须暴露与插件英文名同名的入口类名
插件必须暴露和插件英文名同名的类名,挂载在`window.PLUGIN`的特定全局命名空间下,插件英文名是唯一的,可以保证不与其他供应商的插件发生冲突。
参考代码如下所示:
window.PLUGIN.PluginClass = PluginClass; |
css作用域安全
关于`css`作用域安全问题,推荐使用`css modules`、`css scoped`、`css in js`等技术方案,或者使用命名空间这种低成本解决方案。
webpack自由变量
为了保证正确加载插件静态资源文件,推荐将插件平台传入的`assetPrefix`属性设置webpack自由变量,确保webpack加载图片、字体等资源模块的时候,`publicPath`是正确的,因为代码包最终是发布到插件平台的代码库中,由插件平台来加载,所以资源前缀是插件平台控制的,插件本身只需要使用相对路径`require`图片资源即可。关于webpack自由变量特性,请参考以下官方文档描述。参考代码如下所示:
function setWebpackFreeVariable(assetPrefix: string) { let publicPath = assetPrefix; if (!/\/$/.test(publicPath)) publicPath += '/'; __webpack_public_path__ = publicPath; } // 在插件入口类构造器中调用 class PluginClass { constructor(config: PluginConfig) { if (config.assetPrefix) { setWebpackFreeVariable(config.assetPrefix); } } } |
按需加载异步模块
支持通过`import()`动态模块导入方法按需加载模块,例如切割比较大的非首屏必需模块。考虑到插件平台也是使用`webpack`打包模块,在多`runtime`的情况下,可能会出现动态模块加载冲突的问题,则可以通过配置`output.jsonpFunction`来控制输出不同的`webpackJsonp`模块加载器,详见官方文档描述。参考代码如下所示: