百度关于微前端架构EMP的探索：落地生产可用的微前端架构

点击关注「百度Geek说」

更多技术干货等着你

一、EMP是什么

二、EMP 出现的背景

三、EMP 的优势

• 巨型项目解耦。把巨型项目分解成多个小型项目，分团队开发维护。
• 快速封装可复用模块。无需单独拆包发布到 NPM，可直接暴露需要共享的模块。引入端仅需要简单配置输出端的地址即可在代码上使用该共享模块。
• 动态更新。把复用的业务模块放在同一个基站应用之中进行管理和维护，并且暴露出去可以给多个应用使用。如果业务模块需要更新逻辑的话，只需要发布部署基站应用，其他应用并不需要任何操作，只需要访问时刷新，即可使用最新业务模块。

四、EMP 架构设计

五、EMP 生态

1.初始化

  
  
  

   
   
   npx @efox/emp-cli init

  
  
  

• 可以选择以下模板项目进行初始化，推荐试用 React Typescript 模板
  
  

  

• 按提示执行  cd my-emp && yarn && yarn dev  之后，项目将会自动打开在浏览器。
• React 基站：
  
  

  

• 如果你想预先安装  @efox/emp-cli ，可以通过全局安装  npm install -g @efox/emp-cli  或  yarn global add @efox/emp-cli  。
• 建议你卸载该包使用  npm uninstall -g @efox/emp-cli  or  yarn global remove @efox/emp-cli  确保 npx 使用的  @efox/emp-cli  是最新版本。

2. EMP 唯一的配置文件 emp-config.js ,

以 React 为例，解释配置核心：

  
  
  

   
   
   /**
 * @type {import('@efox/emp-cli').EMPConfig}
 */
module.exports = {
  webpack() {
    return {
      devServer: {
        /**
         * 设置 devServer
         */
        port: 8002,
      },
    }
  },
  async moduleFederation() {
    return {
      /**
      * name: 对外暴露项目名,
      */
      name: 'demo',
      /**
      * filename: 对外暴露引用文件名,
      */
      filename: 'emp.js',
      /**
      * remotes 远程模块
      * remotes: {
      * '引用别名': '远程模块项目名@远程模块的emp.js文件地址',
      * },
      */
      remotes: {
        '@emp/demo1': 'demo1@http://localhost:8001/emp.js',
      },
      /**
      * exposes 暴露模块
      * exposes: {
      * '对外暴露的相对路径': '当前项目相对路径',
      * },
      */
      exposes: {
        './components/Hello': 'src/components/Hello',
        './helper': 'src/helper',
      },
      /**
      * shared 共享的第三方依赖
      * shared: ['依赖名'],
      */
      shared: ['react', 'react-dom'],
    }
  },
}


  
  
  

以 Vue2 为例，解释配置核心：

  
  
  

   
   
   const withVue2 = require('@efox/emp-vue2')
module.exports = withVue2(({config}) => {
  const projectName = 'vue2Project'
  const port = 8008
  config.output.publicPath(`http://localhost:${port}/`)
  config.devServer.port(port)
  config.plugin('mf').tap(args => {
    args[0] = {
      ...args[0],
      ...{
        /**
         * name: 对外暴露项目名,
         */
        name: projectName,
        /**
        * filename: 对外暴露引用文件名,
        */
        filename: 'emp.js',
        /**
         * remotes 远程模块
         * remotes: {
         * '引用别名': '远程模块项目名@远程模块的emp.js文件地址',
         * },
         */
        remotes: {
          '@v2b': 'vue2Base@http://localhost:8009/emp.js',
        },
        /**
        * exposes 暴露模块
        * exposes: {
        * '对外暴露的相对路径': '当前项目相对路径',
        * },
        */
        exposes: {
          './Content': './src/components/Content',
        },
        /**
        * shared 共享的第三方依赖
        * shared: ['依赖名'],
        */
        shared: ['vue/dist/vue.esm.js'],
      },
    }
    return args
  })

  config.plugin('html').tap(args => {
    args[0] = {
      ...args[0],
      ...{
        title: 'EMP Vue2 Project',
      },
    }
    return args
  })
})

  
  
  

七、已有项目无痛升级到 EMP 微前端架构

• @vue/cli Vue2 模版升级到微前端 EMP
• React CRA 项目升级到微前端 EMP

八、跨框架调用实现

EMP 不推荐大家跨框架调用，因为这样会增加维护成本和风险。但是我们还是支持：

• Vue3 调用 Vue2 组件
• Vue&React 互相调用

九、对比 NPM 拆包

• 但是 npm 拆包有一定工作量：
1. 需要把可复用模块从业务项目抽离到一个新的 package
2. 搭建新的构建配置
3. 单独建 repo
4. 在原有业务项目重新引用
5. 可能会因为封装，需要重新设计 API
• 但是业务模块抽离成 npm 包后,使用 npm 包的更新流程繁琐复杂：
1. 更新 npm 包版本
2. 更新 A 应用的npm包版本
3. 重启 A 应用进行验证
4. 发布部署 A 管理系统应用
5. 对 B 和C 应用循环2和3、4步骤

• 但是 npm 包会拖慢构建速度：通过 npm 引入 n 个的业务模块后，在构建时相当于将n个业务模块的代码“复制”到了项目中，构建时需要同步去构建这些业务子模块，导致 bundle size 变大，构建时长会增加，开发体验变差，发布效率也会随之降低。

十、总结

• 本文用较短的篇幅介绍了 EMP 的诞生背景、使用场景、生态以及如何无痛使用。
• EMP 在不断迭代升级，同时生态日渐完善，欢迎各位来了解、使用 EMP 微前端解决方案。
• 期待大家一起探讨，欢迎来提issue或者新功能：
  https://github.com/efoxTeam/emp

十一、QA

• 如果有问题的话，可以先来看看我们的 issue 哦。世界这么大，说不定你和别人遇到一样的问题：
  https://github.com/efoxTeam/emp/issues?q=is%3Aissue+is%3Aclosed