#Basic CRA with Rsbuild

#设置环境

在开始之前，你需要安装 Node.js，并确保你的 Node.js 版本 >= 16。 我们建议使用 Node.js 20 的 LTS 版本。

你可以使用以下命令检查当前使用的 Node.js 版本：

node -v

如果你当前环境没有安装 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 rsbuild@latest

"Input target folder":
> mfe1

"Select framework":
> React

"Select language":
> TypeScript

create rsbuild@latest

"Input target folder":
> mfe2

"Select framework":
> React

"Select language":
> TypeScript

cd mfe1
pnpm i

cd mfe2
pnpm i

#在现有项目中使用 React

要编译 React，你需要注册 Rsbuild React Plugin。该插件将自动添加 React 构建所需的配置。

例如，在 rsbuild.config.ts 中注册：

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
});

通过检查 Yarn 提供的安装报告，确保 Webpack 版本 5 或更高版本已安装。

#步骤 2：安装 Module Federation 插件

pnpm add @module-federation/enhanced
pnpm add @module-federation/rsbuild-plugin --save-dev

#步骤 3：更新入口文件

在这两个应用程序中，将 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：

import('./bootstrap');

#步骤 4：创建并导出

现在，创建一个从 MFE2 导出的组件

const Button = () => (
  <button>MFE2 Button</button>
);

export default Button;

import './App.css';
import Button from './Button';

const App = () => {
  return (
    <div className="content">
      <h1>MFE2</h1>
      <Button />
    </div>
  );
};

export default App;

#步骤 5：在 MFE2 中配置 Rsbuild

首先在 MFE2 根目录下创建 module-federation.config.ts文件，配置如下：

import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';

export default createModuleFederationConfig({
  name: 'remote',
  exposes: {
    './Button': './src/Button',
  },
  filename: 'remoteEntry.js',
  shared: {
    ...dependencies,
    react: {
      singleton: true,
    },
    'react-dom': {
      singleton: true,
    },
  },
});

然后修改在 MFE2 根目录下的 rsbuild.config.ts 文件，配置如下：

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
+ import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
+ import mfConfig from './module-federation.config';

export default defineConfig({
  server: {
    port: 3002
  },
  plugins: [
    pluginReact()
+   pluginModuleFederation(mfConfig)
  ]
});

#步骤 6：使用远程模块

在 MFE1 中使用 MFE2 公开的模块

import React from 'react';
import Button from 'remote/Button'; // federated import

function App() {
  return (
    <div>
      <h1>MFE1</h1>
      <Button />
    </div>
  );
}

export default App;

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 进行访问。