快速上手
在阅读本指南前，请先阅读 设置环境。本指南将引导你逐步学习使用 Module Federation。我们将构建两个独立的单页面应用程序 (SPA)，它们会使用 Module Federation 共享组件，下文中遇到不熟的名词请查看名词解释。
创建一个生产者
1. 初始化项目
使用 Rsbuild 来创建一个生产者，调用以下命令：
npm create rsbuild@latest
根据提示完成项目创建
? Input target folder -> federation_provider
? Select framework -> React
? Select language -> TypeScript
2. 安装 Module Federation 构建插件
根据上面初始化项目的步骤，我们创建了名为 federation_provider 的 React 项目，依次执行以下命令
cd federation_provider
npm add @module-federation/enhanced
3. 生产者导出模块
将入口改为异步
// 移动 src/index.tsx 到新建的 src/bootstrap.tsx 文件中
// src/index.tsx
import('./bootstrap');
// src/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>,
);
增加 Button 组件
// src/button.tsx
export default function Button() {
return <div>Provider button</div>;
}
通过 Module Federation 导出 Button 组件
//rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
export default defineConfig({
server: {
port: 3000,
},
dev: {
// 必须要配置 assetPrefix，在生产环境需要配置 output.assetPrefix
assetPrefix: 'http://localhost:3000',
},
tools: {
rspack: (config, { appendPlugins }) => {
// 需要设置一个唯一值不能和其他应用相等
config.output!.uniqueName = 'federation_provider';
appendPlugins([
new ModuleFederationPlugin({
name: 'federation_provider',
exposes: {
'./button': './src/button.tsx',
},
shared: ['react', 'react-dom'],
}),
]);
},
},
plugins: [pluginReact()],
});
4. 启动生产者
➜ federation_provider npm run dev
> federation_provider@1.0.0 dev
> rsbuild dev --open
Rsbuild v0.5.1
> Local: http://localhost:3000/
> Network: http://10.94.55.204:3000/
> Network: http://10.4.255.21:3000/
start Compiling...
[ Module Federation Manifest Plugin ] Manifest Link: http://localhost:3000/mf-manifest.json
项目启动后出现 Manifest Link: http://localhost:3000/mf-manifest.json 信息，这是 Module federation 的 manifest 信息链接
创建一个消费者
1. 初始化项目
使用 Rsbuild 来创建一个消费者，调用以下命令：
npm create rsbuild@latest
根据提示完成项目创建
? Input target folder -> federation_consumer
? Select framework -> React
? Select language -> TypeScript
2. 安装 Module Federation 构建插件
根据上面初始化项目的步骤，我们创建了名为 federation_consumer 的 React 项目，依次执行以下命令
cd federation_consumer
npm add @module-federation/enhanced
3. 消费生产者
增加 Module Federation 插件消费远程模块
// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
export default defineConfig({
server: {
port: 2000,
},
tools: {
rspack: (config, { appendPlugins }) => {
appendPlugins([
new ModuleFederationPlugin({
name: 'federation_consumer',
remotes: {
federation_provider:
'federation_provider@http://localhost:3000/mf-manifest.json',
},
shared: ['react', 'react-dom'],
}),
]);
},
},
plugins: [pluginReact()],
});
将入口改为异步
// 移动 src/index.tsx 到新建的 src/bootstrap.tsx 文件中
// src/index.tsx
import('./bootstrap');
// src/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>,
);
在 tsconfig.json 中声明 Module Federation 类型路径
{
"compilerOptions": {
"paths": {
"*": ["./@mf-types/*"]
}
}
}
引用远程模块
import './App.css';
// federation_provider 提供的远程组件
import ProviderButton from 'federation_provider/button';
const App = () => {
return (
<div className="content">
<h1>Rsbuild with React</h1>
<p>Start building amazing things with Rsbuild.</p>
<div>
<ProviderButton />
</div>
</div>
);
};
export default App;
总结
通过上面的流程你已经基于 Module Federation 完成了一个「生产者」导出一个组件给到「消费者」使用，并在过程中初步使用和了解了：Module Fderation 插件中的 remotes、exposes、shared 的配置。
如果你希望了解如何直接在 Webpack、Rspack 构建工具上导出和消费远程模块可以参考：Rspack Plugin、Webpack Plugin
下一步
你可能想要：
