1. 插件必须是动态模块
    插件方必须按照动态模块的方式开发，平台方动态异步加载插件模块代码，插件动态渲染在平台方传递进来的`DOM`容器内，**不能是静态页面的开发方式，我们不部署 html 文档**。

  2. 必须暴露与插件英文名同名的入口类名

    插件必须暴露和插件英文名同名的类名，挂载在`window.PLUGIN`的特定全局命名空间下，插件英文名是唯一的，可以保证不与其他供应商的插件发生冲突。
    参考代码如下所示：

    插件入口类
    window.PLUGIN.PluginClass = PluginClass;

  3. css作用域安全
    关于`css`作用域安全问题，推荐使用`css modules`、`css scoped`、`css in js`等技术方案，或者使用命名空间这种低成本解决方案。

  4. 不要覆盖或重写全局样式
    不管是页面级还是平台系统的样式，插件方都不要去覆盖和改写，降低莫名其妙 bug 的隐患。

  5. 不要覆盖和改写全局对象和方法

  6. 推荐代码包为zip压缩格式
    为了避免上传代码包失败，推荐使用zip压缩格式，不要使用不常见的压缩格式。

  7. 开发者需要考虑css布局方式，更好的适配平台页面，比如css单位使用`rem` `vw/vh`等。

  8. webpack自由变量
    为了保证正确加载插件静态资源文件，推荐将插件平台传入的`assetPrefix`属性设置webpack自由变量，确保webpack加载图片、字体等资源模块的时候，`publicPath`是正确的，因为代码包最终是发布到插件平台的代码库中，由插件平台来加载，所以资源前缀是插件平台控制的，插件本身只需要使用相对路径`require`图片资源即可。关于webpack自由变量特性，请参考以下官方文档描述。参考代码如下所示：

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

  9. 按需加载异步模块
    支持通过`import()`动态模块导入方法按需加载模块，例如切割比较大的非首屏必需模块。考虑到插件平台也是使用`webpack`打包模块，在多`runtime`的情况下，可能会出现动态模块加载冲突的问题，则可以通过配置`output.jsonpFunction`来控制输出不同的`webpackJsonp`模块加载器，详见官方文档描述。参考代码如下所示：

  • 无标签