Basic CRA with Rsbuild
设置环境
在开始之前,你需要安装 Node.js,并确保你的 Node.js 版本 >= 16。 我们建议使用 Node.js 20 的 LTS 版本。
你可以使用以下命令检查当前使用的 Node.js 版本:
如果你当前环境没有安装 Node.js,或者安装的版本太低,可以使用 nvm 或 fnm 安装所需的版本。
以下是如何通过 nvm 安装 Node.js 20 LTS 版本的示例:
# Install the long-term support version of Node.js 20
nvm install 20 --lts
# Make the newly installed Node.js 20 as the default version
nvm alias default 20
# Switch to the newly installed Node.js 20
nvm use 20
第 1 步:设置 React 应用程序
创建 React 项目
你可以使用 create-rsbuild
来创建一个 Rsbuild + React 的项目,只需执行以下命令:
npm create rsbuild@latest
Create App 1
create rsbuild@latest
"Input target folder":
> mfe1
"Select framework":
> React
"Select language":
> TypeScript
Create App 2
create rsbuild@latest
"Input target folder":
> mfe2
"Select framework":
> React
"Select language":
> TypeScript
Install
在现有项目中使用 React
要编译 React,你需要注册 Rsbuild React Plugin。该插件将自动添加 React 构建所需的配置。
例如,在 rsbuild.config.ts
中注册:
rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
export default defineConfig({
plugins: [pluginReact()],
});
TIP
对于使用 Create React App 的项目,可以参考 CRA 迁移指南。
通过检查 Yarn 提供的安装报告,确保 Webpack 版本 5 或更高版本已安装。
步骤 2:更新入口文件
在这两个应用程序中,将 index.js
文件重命名为 bootstrap.js
。此更改允许异步加载 bootstrap.js
,这对于模块联邦在两个应用程序之间正确运行至关重要。
mv src/index.tsx src/bootstrap.tsx
将 bootstrap.tsx 的内容更新为以下内容:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
现在,在两个应用程序中创建一个新的 index.tsx
文件,其中包含以下内容以导入 bootstrap.tsx
:
步骤 3:创建并导出
现在,创建一个从 MFE2
导出的组件
3.1 创建按钮组件
在MFE2
中,在 src 目录中创建一个名为 Button.tsx
的新文件,其中包含以下内容:
const Button = () => (
<button>MFE2 Button</button>
);
export default Button;
3.2 更新 App.tsx
更新 MFE2
中的 App.tsx
以导入并渲染 Button 组件:
import './App.css';
import Button from './Button';
const App = () => {
return (
<div className="content">
<h1>MFE2</h1>
<Button />
</div>
);
};
export default App;
3.3:在 MFE2 中配置 Rsbuild
在 MFE2
根目录下创建 rsbuild.config.ts
文件,配置如下:
rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { dependencies } from './package.json';
export default defineConfig({
server: {
port: 3002
},
moduleFederation: {
options: {
name: 'remote',
exposes: {
'./Button': './src/Button',
},
filename: 'remoteEntry.js',
shared: {
...dependencies,
react: {
singleton: true,
requiredVersion: dependencies['react'],
},
'react-dom': {
singleton: true,
requiredVersion: dependencies['react-dom'],
},
},
}
},
plugins: [pluginReact()]
});
步骤 4:使用远程模块
在 MFE1
中使用 MFE2
公开的模块
4.1 更新 App.tsx
更新 MFE1
中的 App.tsx
以导入并渲染 MFE2
按钮组件:
import React from 'react';
import Button from 'remote/Button'; // federated import
function App() {
return (
<div>
<h1>MFE1</h1>
<Button />
</div>
);
}
export default App;
4.2:在 MFE1 中配置 Rsbuild
在 MFE1
根目录中创建 rsbuild.config.ts
文件,配置如下:
rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { dependencies } from './package.json';
export default defineConfig({
server: {
port: 3001
},
moduleFederation: {
options: {
name: 'host',
remotes: {
remote: 'remote@http://localhost:3002/remoteEntry.js',
},
shared: {
...dependencies,
react: {
singleton: true,
requiredVersion: dependencies['react'],
},
'react-dom': {
singleton: true,
requiredVersion: dependencies['react-dom'],
},
},
}
},
plugins: [pluginReact()]
});
此设置会在 MFE1
内启动模块联邦,并且在启动开发服务器后,可以通过 http://localhost:3001
进行访问。
类似地,配置激活 MFE2
的模块联邦,从而可通过 http://localhost:3002/remoteEntry.js
加载 Button
组件。随着开发服务器的运行,可以通过 http://localhost:3002
进行访问。