React MF

在React中,我们准备了两个进阶示例项目作为参考,分别是:

  • runtime-18-host:基础项目,用于书写通用业务组件对外暴露,它通常是一些项目的基石。
  • runtime-18-app:基础项目,用于和其他通用业务组件进行集成,它通常是一些项目的业务逻辑。

详情另见项目仓库

前期准备

在开始之前,请确保您已经配备了如下开发环境:

  • Node.js >= 20.0.0
  • npm >= 8
💡 TIP

建议您使用nvm来管理node版本,直接执行nvm use 20命令即可完成开发环境设置

拉取项目仓库

git clone https://github.com/empjs/emp
🚨 可能遇到的错误

如果您无法拉取项目至本地,请检查您的网络环境或代理设置是否可以访问github,如果仍不能解决,请联系我们。

安装依赖

npm
yarn
pnpm
bun
npm install

安装完依赖后,运行 React 示例项目的前期准备就完成了🎉。

运行示例项目

⚠️ 注意

在运行示例项目之前,请确保您已经完成了前期准备,并当前目录处于emp仓库的根目录下。

React18 demo

首先进入示例项目的根目录:

cd demos/react18

然后运行代码:

npm
yarn
pnpm
bun
npm dev

运行成功后,您可以访问http://localhost:1801/进行查看。

⚠️ 注意

1801端口被占用,那么启动的服务可能会使用其他端口,详情请留意控制台的输出日志。

演示效果

当您的代码运行成功之后,它应该是这样子的🤩:访问链接

配置讲解

runtime-18-app

示例项目根目录:

cd demos/react18/react-app

EMP项目配置

emp.config.ts配置如下:

pluginRspackEmpShare plugins

pluginRspackEmpShare 是新增的EMP插件,主要用来配置Module Federation Runtime的公共依赖 runtimeLib ,以及公共的框架依赖frameworkLib插件详情

build.polyfill.entryCdn

EMP 3.1.5及以后版本新增依赖,这里提供配置在页面头部加载兼容行脚本,以便减少入口包体积以及CDN缓存复用配置详情

远程模块注册与加载

src/App.tsx代码如下:

代码中分别引入reactAdapter@empjs/share/runtime

import {reactAdapter} from '@empjs/share/adapter'
import rt from '@empjs/share/runtime'

通过使用 @empjs/share/runtimeinitregister 函数,达到 初始化远程模块增量注册远程模块 的目的。其中 reactAdapter 提供了 module federation 共享的share配置。

注册模块后,使用 @empjs/share/runtimeload 函数,加载模块中的组件,达到使用远程模块的目的。

TIP

@empjs/share/runtime 提供了远程模块运行时注册的能力,所以在 emp.config.ts 中无需再使用 module federation plugin 。如果当前项目不需要暴露远程模块,那么入口的异步边界import()也可以移除。

TIP

更多详情见 pluginRspackEmpShare 插件配置。