在React中,我们准备了两个进阶示例项目作为参考,分别是:
runtime-18-host
:基础项目,用于书写通用业务组件对外暴露,它通常是一些项目的基石。runtime-18-app
:基础项目,用于和其他通用业务组件进行集成,它通常是一些项目的业务逻辑。详情另见项目仓库
在开始之前,请确保您已经配备了如下开发环境:
20.0.0
8
建议您使用nvm
来管理node版本,直接执行nvm use 20
命令即可完成开发环境设置
如果您无法拉取项目至本地,请检查您的网络环境或代理设置是否可以访问github,如果仍不能解决,请联系我们。
安装完依赖后,运行 React 示例项目的前期准备就完成了🎉。
在运行示例项目之前,请确保您已经完成了前期准备,并当前目录处于emp
仓库的根目录下。
首先进入示例项目的根目录:
然后运行代码:
运行成功后,您可以访问http://localhost:1801/
进行查看。
若1801
端口被占用,那么启动的服务可能会使用其他端口,详情请留意控制台的输出日志。
当您的代码运行成功之后,它应该是这样子的🤩:访问链接
示例项目根目录:
emp.config.ts
配置如下:
pluginRspackEmpShare
是新增的EMP插件,主要用来配置Module Federation Runtime的公共依赖 runtimeLib
,以及公共的框架依赖frameworkLib
。插件详情
EMP 3.1.5
及以后版本新增依赖,这里提供配置在页面头部加载兼容行脚本,以便减少入口包体积
以及CDN缓存复用
。配置详情
src/App.tsx
代码如下:
代码中分别引入reactAdapter
与 @empjs/share/runtime
通过使用 @empjs/share/runtime
的 init
与 register
函数,达到 初始化远程模块
与 增量注册远程模块
的目的。其中 reactAdapter
提供了 module federation
共享的share
配置。
注册模块后,使用 @empjs/share/runtime
的 load
函数,加载模块中的组件,达到使用远程模块的目的。
@empjs/share/runtime
提供了远程模块运行时注册的能力,所以在 emp.config.ts
中无需再使用 module federation plugin
。如果当前项目不需要暴露远程模块,那么入口的异步边界import()
也可以移除。
更多详情见 pluginRspackEmpShare 插件配置。