# 快速上手 在阅读本指南前，请先阅读 [设置环境](./setting-up-env)。本指南将引导你逐步学习使用 Module Federation。我们将构建两个独立的单页面应用程序 (SPA)，它们会使用 Module Federation 共享组件，下文中遇到不熟的名词请查看[名词解释](./glossary)。 ## 创建一个生产者 ### 1. 初始化项目 使用 [Rsbuild](https://rsbuild.dev/) 来创建一个生产者，调用以下命令： import { PackageManagerTabs } from '@theme'; > 根据提示完成项目创建 ```bash ? Input target folder -> federation_provider ? Select framework -> React ? Select language -> TypeScript ``` ### 2. 安装 Module Federation 构建插件 根据上面初始化项目的步骤，我们创建了名为 `federation_provider` 的 `React` 项目，依次执行以下命令 ### 3. 生产者导出模块 > 将入口改为异步 ```tsx // 移动 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( , ); ``` > 增加 Button 组件 ```tsx // src/button.tsx export default function Button() { return
Provider button
; } ``` > 通过 Module Federation 导出 Button 组件 ```typescript title="rsbuild.config.ts" import { defineConfig } from '@rsbuild/core'; import { pluginReact } from '@rsbuild/plugin-react'; import { pluginModuleFederation } from '@module-federation/rsbuild-plugin'; export default defineConfig({ plugins: [ pluginReact(), pluginModuleFederation({ name: 'federation_provider', exposes: { './button': './src/button.tsx', }, shared: ['react', 'react-dom'], }), ], server: { port: 3000, }, }); ``` ### 4. 启动生产者 ```zsh ➜ 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](https://rsbuild.dev/) 来创建一个消费者，调用以下命令： > 根据提示完成项目创建 ```bash ? Input target folder -> federation_consumer ? Select framework -> React ? Select language -> TypeScript ``` ### 2. 安装 Module Federation 构建插件 根据上面初始化项目的步骤，我们创建了名为 `federation_consumer` 的 `React` 项目，依次执行以下命令 ### 3. 消费生产者 > 增加 Module Federation 插件消费远程模块 ```typescript title="rsbuild.config.ts" import { defineConfig } from '@rsbuild/core'; import { pluginReact } from '@rsbuild/plugin-react'; import { pluginModuleFederation } from '@module-federation/rsbuild-plugin'; export default defineConfig({ plugins: [ pluginReact(), pluginModuleFederation({ name: 'federation_consumer', remotes: { federation_provider: 'federation_provider@http://localhost:3000/mf-manifest.json', }, shared: ['react', 'react-dom'], }), ], server: { port: 2000, }, }); ``` > 将入口改为异步 ```tsx // 移动 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( , ); ``` > 在 `tsconfig.json` 中声明 `Module Federation` 类型路径 ```json { "compilerOptions": { "paths": { "*": ["./@mf-types/*"] } } } ``` > 引用远程模块 ```tsx import './App.css'; // federation_provider 提供的远程组件 import ProviderButton from 'federation_provider/button'; const App = () => { return (

Rsbuild with React

Start building amazing things with Rsbuild.

); }; export default App; ``` ## 总结 通过上面的流程你已经基于 Module Federation 完成了一个「生产者」导出一个组件给到「消费者」使用，并在过程中初步使用和了解了：Module Fderation 插件中的 remotes、exposes、shared 的配置。 如果你希望了解如何直接在 Webpack、Rspack 构建工具上导出和消费远程模块可以参考：[Rspack Plugin](../basic/rspack)、[Webpack Plugin](../basic/webpack) ## 下一步 你可能想要： import NextSteps from '@components/NextSteps'; import Step from '@components/Step';