EMP v2.7 全面解决 EMPShare共享的热更问题

1,520 阅读2分钟

在开发 Module Federation 的项目 很多人都遇到的问题就是远程组件实现热更新、遇到的状态无法热更的问题,特别是React的共享组件,这个问题已经持续了将近2~3年(从Module Federation诞生日起),本文重点介绍EMP v2.7后的共享模块热更新的一些案例,有兴趣的可以尝试

01 基于Vue2的共享方式 热更新

  • 准备工作,clone 项目代码 link,执行 pnpm i

  • 启动 基站代码 vue-2-base pnpm dev

  • 启动 应用代码 vue-2-project pnpm dev

  • 打开 http://localhost:9002/可以看到如下界面,(红色框为远程组件代码) image.png

  • 本用例为 三级共享 配置如下 vue-2-basevue-2-project 一致

      shareLib: {
            vue: 'Vue@https://unpkg.com/vue@2.6.14/dist/vue.min.js',
            vuex: `Vuex@https://unpkg.com/vuex@3.6.2/dist/vuex.min.js`,
            'element-ui': [
              'ELEMENT@https://unpkg.com/element-ui/lib/index.js',
              `https://unpkg.com/element-ui/lib/theme-chalk/index.css`,
            ],
          }
    },
    
  • 当我们更改 vue-2-base 共享组件时,vue-2-project界面会直接热更新,效果如下:

image.png

02 React Module federation 共享方式 热更新

  • 准备工作,根目录 执行 pnpm i,(*基站项目已经全面用 swc编译)
  • 启动基站代码 mf-host pnpm dev
  • 启动应用代码 mf-app pnpm dev
  • 访问 http://localhost:8882/ 得到如下界面,其中红色为远程组件 image.png
  • 同理我们修改组件内容得到

image.png

03 React 三级共享 热更新

接上面case

  • 启动基站代码 micro-host pnpm dev
  • 启动应用代码 micro-app pnpm dev
  • 访问地址 http://localhost:8002/ 得到如下界面,其中红色为远程组件

image.png

  • 更新 micro-app 可以得到如下界面效果

image.png

总结

经过以上测试,可以完全覆盖到 vue2 与 react 的共享模块热更新的使用场景,对于强状态管理,大型项目,中后台项目的应用来说,是一个很重要的更新,为这类型项目开发起到更加便捷的开发调试作用,让共享模式更加流畅!