# 快速上手
在阅读本指南前，请先阅读 [设置环境](/zh/guide/start/setting-up-env.md)。本指南将引导你逐步学习使用 Module Federation。我们将构建两个独立的单页面应用程序 (SPA)，它们会使用 Module Federation 共享组件，下文中遇到不熟的名词请查看[名词解释](/zh/guide/start/glossary.md)。
## 新项目创建
Module Federation 提供了 `create-module-federation` 工具来创建项目，不需要全局安装，直接使用 npx 按需运行即可。
你可以使用 `create-module-federation` 来创建一个 Module Federation 项目，调用以下命令：
```sh [npm]
npm create module-federation@latest
```
```sh [yarn]
yarn create module-federation
```
```sh [pnpm]
pnpm create module-federation@latest
```
按照提示一步步操作即可。在创建过程中，你可以选择项目类型、角色类型等。
### 模板
在创建项目时，你可以选择 `create-module-federation` 提供的下列模板：
| 模板 | 描述 |
| ------------------------ | ------------------------------------------------------------ |
| provider-modern | 使用 [Modern.js](https://modernjs.dev/) 的生产者 |
| provider-rsbuild | 使用 [Rsbuild](https://rsbuild.dev/) 的生产者 |
| provider-rslib | 使用 [Rslib](https://lib.rsbuild.dev/) 的生产者 |
| provider-rslib-storybook | 使用 [Rslib](https://lib.rsbuild.dev/) 的生产者，并且开启了 storybook 功能 |
| consumer-modern | 使用 [Modern.js](https://modernjs.dev/) 的消费者 |
| consumer-rsbuild | 使用 [Rsbuild](https://rsbuild.dev/) 的消费者 |
### 快速创建
[create-module-federation](https://www.npmjs.com/package/create-module-federation) 提供了一些 CLI 选项。通过设置这些 CLI 选项，你可以跳过交互式的选择步骤，一键创建项目。
比如，一键创建名称为 provider 的 Modern.js 生产者项目到 `my-project` 目录：
```bash
npx create-module-federation --dir my-project --template provider-modern --name provider
# 使用缩写
npx create-module-federation -d my-project -t provider-modern -n provider
```
`create-module-federation` 完整的 CLI 选项如下：
```text
Usage: create-module-federation [options]
Options:
-h, --help display help for command
-d, --dir create project in specified directory
-t, --template specify the template to use
-n, --name specify the mf name
-r, --role specify the mf role type: provider or consumer
--override override files in target directory
Templates:
provider-modern, provider-rsbuild, provider-rslib, provider-rslib-storybook, consumer-modern, consumer-rsbuild
```
### 创建一个生产者
执行 `create-module-federation` 命令，按照需求选择需要的框架和类型，并选择角色类型为生产者即可创建项目。
此处以创建一个 rsbuild 生产者项目为例：
```bash
➜ ~ ✗ npm create module-federation@latest
> npx
> create-module-federation
◆ Create Module Federation Project
│
◇ Please input Module Federation name:
│ mf_provider
│
◇ Please select the type of project you want to create:
│ Application
│
◇ Select template
│ Rsbuild
│
◇ Please select the role of project you want to create:
│ Provider
│
◇ Next steps ─────╮
│ │
│ cd mf_provider │
│ npm install │
│ npm run dev │
│ │
├──────────────────╯
│
└ Done.
```
### 创建一个消费者
执行 `create-module-federation` 命令，按照需求选择需要的框架和类型，并选择角色类型为消费者即可创建项目。
此处以创建一个 rsbuild 消费者项目为例：
```bash
➜ ~ ✗ npm create module-federation@latest
> npx
> create-module-federation
◆ Create Module Federation Project
│
◇ Please input Module Federation name:
│ mf_consumer
│
◇ Please select the type of project you want to create:
│ Application
│
◇ Select template
│ Rsbuild
│
◇ Please select the role of project you want to create:
│ Consumer
│
◇ Next steps ─────╮
│ │
│ cd mf_provider │
│ npm install │
│ npm run dev │
│ │
├──────────────────╯
│
└ Done.
```
#### 替换生产者
默认创建的消费者项目会消费一个已发布的生产者，如果你想替换生产者，需要在 `module-federation.config.ts` 中修改 `remotes` 配置。
```diff title="module-federation.config.ts"
import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';
export default createModuleFederationConfig({
name: 'mf_consumer',
remotes: {
- 'provider': 'rslib_provider@https://unpkg.com/module-federation-rslib-provider@latest/dist/mf/mf-manifest.json',
+ 'provider': 'rslib_provider@http://localhost:3000/mf-manifest.json',
},
shared: {
react: { singleton: true },
'react-dom': { singleton: true },
},
});
```
## 已有项目创建
如果你想将 `Module Federation` 集成到现有项目中，可以参考[此文档](/zh/practice/frameworks/overview.md)。
## 总结
通过上面的流程你已经基于 Module Federation 完成了一个「生产者」导出一个组件给到「消费者」使用，并在过程中初步使用和了解了：Module Federation 插件中的 remotes、exposes、shared 的配置。
如果你希望了解如何直接在 Webpack、Rspack 构建工具上导出和消费远程模块可以参考：[Rspack Plugin](/zh/guide/build-plugins/plugins-rspack.md)、[Webpack Plugin](/zh/guide/build-plugins/plugins-webpack.md)
## 下一步
你可能想要：
