版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。
  1. 插件必须是动态模块

    插件方必须按照动态模块的方式开发,平台方动态异步加载插件模块代码,插件动态渲染在平台方传递进来的插件必须是动态模块插件方必须按照动态模块的方式开发,平台方动态异步加载插件模块代码,插件动态渲染在平台方传递进来的`DOM`容器内,**不能是静态页面的开发方式,我们不部署 html 文档**。
  2. 必须暴露与插件英文名同名的入口类名

    插件必须暴露和插件英文名同名的类名,挂载在

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

    代码块
    languagejs
    themeRDark
    title插件入口类
    linenumberstrue
    window.PLUGIN.PluginClass = PluginClass;


  3. css作用域安全

    关于css作用域安全关于`css`作用域安全问题,推荐使用`css modules``css scoped``css in js`等技术方案,或者使用命名空间这种低成本解决方案。
  4. 不要覆盖或重写全局样式

    不管是页面级还是平台系统的样式,插件方都不要去覆盖和改写,降低莫名其妙 不要覆盖或重写全局样式不管是页面级还是平台系统的样式,插件方都不要去覆盖和改写,降低莫名其妙 bug 的隐患。
  5. 不要覆盖和改写全局对象和方法
  6. 推荐代码包为zip压缩格式

    为了避免上传代码包失败,推荐使用zip压缩格式,不要使用不常见的压缩格式。推荐代码包为zip压缩格式为了避免上传代码包失败,推荐使用zip压缩格式,不要使用不常见的压缩格式。
  7. 开发者需要考虑css布局方式,更好的适配平台页面
    比如css单位使用`rem` `vw/vh`等。
  8. webpack自由变量
    为了保证正确加载插件静态资源文件,推荐将插件平台传入的`assetPrefix`属性设置webpack自由变量,确保webpack加载图片、字体等资源模块的时候,`publicPath`是正确的,因为代码包最终是发布到插件平台的代码库中,由插件平台来加载,所以资源前缀是插件平台控制的,插件本身只需要使用相对路径`require`图片资源即可。
    参考代码如下所示:

    代码块
    languagejs
    themeRDark
    titlewebpack自由变量
    linenumberstrue
    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);
        }
      }
    }