在开发 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/
可以看到如下界面,(红色框为远程组件代码) -
本用例为 三级共享 配置如下
vue-2-base
与vue-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
界面会直接热更新,效果如下:
02 React Module federation 共享方式 热更新
- 准备工作,根目录 执行
pnpm i
,(*基站项目已经全面用 swc编译) - 启动基站代码 mf-host
pnpm dev
- 启动应用代码 mf-app
pnpm dev
- 访问
http://localhost:8882/
得到如下界面,其中红色为远程组件 - 同理我们修改组件内容得到
03 React 三级共享 热更新
接上面case
- 启动基站代码 micro-host
pnpm dev
- 启动应用代码 micro-app
pnpm dev
- 访问地址
http://localhost:8002/
得到如下界面,其中红色为远程组件
- 更新
micro-app
可以得到如下界面效果
总结
经过以上测试,可以完全覆盖到 vue2 与 react 的共享模块热更新的使用场景,对于强状态管理,大型项目,中后台项目的应用来说,是一个很重要的更新,为这类型项目开发起到更加便捷的开发调试作用,让共享模式更加流畅!