@modern-js/main-doc 2.60.1 → 2.60.3

package/docs/zh/components/deploy-command.mdx

@@ -0,0 +1,14 @@
+## modern deploy
+
+`modern deploy` 命令，用于生成部署平台需要的产物。
+
+```bash
+Usage: modern deploy [options]
+
+Options:
+  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
+  -s --skip-build       跳过构建阶段
+  -h, --help            显示命令帮助
+```
+
+详细内容可以参考 [部署应用](/guides/basic-features/deploy)。

package/docs/zh/components/serve-command.mdx

@@ -0,0 +1,22 @@
+## modern serve
+
+`modern serve` 命令用于在生产环境下启动 Modern.js 工程, 也可以用于在本地预览生产环境构建的产物。注意你需要提前执行 [`build`](/apis/app/commands#modern-build) 命令构建出对应产物。
+
+```bash
+Usage: modern serve [options]
+
+Options:
+  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
+  -h, --help            显示命令帮助
+  --api-only            仅启动 API 接口服务
+```
+
+默认情况下，应用将会在 `localhost:8080` 启动，可以通过 `server.port` 修改 Server 端口号：
+
+```js
+export default defineConfig({
+  server: {
+    port: 8081,
+  },
+});
+```

package/docs/zh/configure/app/dev/watch-files.mdx

@@ -8,12 +8,19 @@ configName: dev.watchFiles
 - **类型：**
 
 ```ts
-type WatchFiles = {
-  paths: string | string[];
-  type?: 'reload-page' | 'reload-server';
-  //  chokidar 选项
-  options?: WatchOptions;
-};
+type WatchFiles =
+  | {
+      paths: string | string[];
+      type?: 'reload-page';
+      //  chokidar 选项
+      options?: WatchOptions;
+    }
+  | {
+      paths: string | string[];
+      type?: 'reload-server';
+    };
+
+type WatchFilesConfig = WatchFiles | WatchFiles[];
 ```
 
 - **默认值：** `undefined`

package/docs/zh/configure/app/output/copy.mdx

@@ -1,5 +1,6 @@
 ---
 title: copy
+configName: output.copy
 ---
 
 # output.copy
@@ -7,7 +8,8 @@ title: copy
 - **类型：** `Rspack.CopyRspackPluginOptions | Rspack.CopyRspackPluginOptions['patterns']`
 - **默认值：** `undefined`
 
-
 将指定的文件或目录拷贝到构建输出目录中，基于 [rspack.CopyRspackPlugin](https://rspack.dev/zh/plugins/rspack/copy-rspack-plugin) 实现。
 
-更详细的配置项请参考：[rspack.CopyRspackPlugin](https://rspack.dev/zh/plugins/rspack/copy-rspack-plugin)文档。
+import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/zh/configure/app/output/inline-scripts.mdx

@@ -26,7 +26,7 @@ type InlineScripts =
 用来控制是否用 `<script>` 标签将产物中的 script 文件（.js 文件）inline 到 HTML 中。
 
 :::tip
-当使用约定式路由时，如果开启了这个选项，需要将 [output.splitRouteChunks](https://modernjs.dev/configure/app/output/splitRouteChunks.html) 设置为 false。
+当使用约定式路由时，如果开启了这个选项，需要将 [output.splitRouteChunks](/configure/app/output/split-route-chunks) 设置为 false。
 :::
 
 import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';

package/docs/zh/configure/app/output/inline-styles.mdx

@@ -26,7 +26,7 @@ type InlineStyles =
 用来控制是否用 `<style>` 标签将产物中的 style 文件（.css 文件）inline 到 HTML 中。
 
 :::tip
-当使用约定式路由时，如果开启了这个选项，需要将 [output.splitRouteChunks](https://modernjs.dev/configure/app/output/splitRouteChunks.html) 设置为 false。
+当使用约定式路由时，如果开启了这个选项，需要将 [output.splitRouteChunks](/configure/app/output/split-route-chunks) 设置为 false。
 :::
 
 import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';

package/docs/zh/configure/app/runtime/router.mdx

@@ -8,14 +8,16 @@ import RouterLegacyTip from "@site-docs/components/router-legacy-tip"
 
 <RouterLegacyTip />
 
-# runtime.router
-
 - **类型：** `boolean | Object`
 - **默认值：** `false`
 
-开启 `router` 之后，支持使用 Modern.js 默认提供的约定式路由进行路由管理。Modern.js 的路由模块基于 [React Router 6](https://reactrouter.com/) 实现。
+该值在项目创建时被设置为 `true`，支持使用 Modern.js 默认提供的[约定式路由](/guides/concept/entries.html#约定式路由)进行路由管理。
+
+如果希望使用[自控式路由](/guides/concept/entries.html#自控式路由)，请移除该值，或将该值设置为 `false`。
 
-具体配置如下：
+:::note
+`router` 的所有子配置都只会在使用约定式路由时生效。
+:::
 
 ## basename
 
@@ -24,6 +26,10 @@ import RouterLegacyTip from "@site-docs/components/router-legacy-tip"
 
 设置客户端路由的 `basename`，通常用于应用需要部署在域名非根路径下的场景。
 
+:::tip
+推荐使用 [`server.baseUrl`](/configure/app/server/base-url) 进行配置。
+:::
+
 ## supportHtml5History
 
 - **类型：** `boolean`

package/docs/zh/configure/app/runtime/state.mdx

@@ -9,8 +9,6 @@ title: state
 
 开启 `state` 后就可以使用 [Model](/guides/topic-detail/model/quick-start) 来做状态管理。
 
-具体配置项如下：
-
 ## models
 
 - **类型：** `Array<Model>`

package/docs/zh/guides/concept/_meta.json

@@ -1 +1 @@
-["entries", "builder"]
+["entries", "builder", "server"]

package/docs/zh/guides/concept/server.mdx

@@ -0,0 +1,35 @@
+# Web 服务器
+
+Modern.js 为应用提供了内置的 Web 服务器，可以被运行在任何拥有 Node.js 的容器环境中。无论是在本地开发环境中执行 `dev` 命令，或是执行 `build && serve` 命令运行生成环境产物，或是官方的部署方案，都是通过这个 Web 服务器来托管应用。
+
+## 底层依赖
+
+Modern.js 基于 [Hono 框架](https://hono.dev/) 搭建了自己的 Web 服务器。Hono 是一个小型、简单且超快速的基于 Web 标准的框架，它能在任何 JavaScript 运行时上运行。
+
+## 开发 & 生产
+
+Modern.js 开发环境和生产环境的 Web 服务器流程是完全同构的，你无需担心开发环境和生产环境的差异。
+
+在 [构建工具](/guides/concept/builder) 一节我们提到，Modern.js 底层构建能力由 Rsbuild 提供，而部分开发环境的服务端能力是与构建工具耦合的，例如 HMR。Modern.js 需要复用 Rsbuild Dev Server 的能力。
+
+在开发环境，Modern.js 直接使用了 Rsbuild 提供的中间件，包含 HMR、Proxy 等开发阶段需要的能力。同时，Modern.js 在这之上提供了 Mock、路由、渲染等能力：
+
+![Server](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/web-server-modern.jpeg)
+
+因此，在 Modern.js 中开发环境只是在生产环境上增加了中间件。生产环境的所有能力，在开发环境中也同样适用，两者不会产生割裂。
+
+:::tip
+静态资源文件能够直接被 Modern.js 的服务器托管，但在生产环境中，强烈推荐将这些内容上传到 CDN。
+:::
+
+## 在 CI 环境中运行
+
+Modern.js 支持在任何 Node.js 环境运行构建产物。在 CI 环境中，通常情况下已经安装了应用全部的依赖。
+
+你可以执行 [`modern build`](/apis/app/commands#modern-build) 来构建应用，执行 [`modern serve`](/apis/app/commands#modern-serve) 命令来运行 Web 服务器，启动 Modern.js 应用。
+
+## 在生产环境中运行
+
+在部署到生产环境时，产物体积应该尽可能小，而上述在 CI 中运行的方案，会保留原项目的所有产物。因此在生产环境，不推荐通过上述命令运行应用。
+
+Modern.js 提供了独立的部署方案，当运行 [`modern deploy`](/apis/app/commands#modern-deploy) 命令时，产物中会包含可运行 Web 服务器的入口文件。

package/docs/zh/guides/topic-detail/_meta.json

@@ -1,4 +1,10 @@
 [
+  {
+    "type": "dir",
+    "name": "module-federation",
+    "label": "module-federation",
+    "collapsed": true
+  },
   {
     "type": "dir",
     "name": "micro-frontend",

package/docs/zh/guides/topic-detail/module-federation/_meta.json

@@ -0,0 +1 @@
+["introduce", "usage", "application", "ssr", "deploy"]

package/docs/zh/guides/topic-detail/module-federation/application.mdx

@@ -0,0 +1,112 @@
+# 应用级别模块
+
+Modern.js 提供了运行时 API，支持快速从应用中导出应用级别的 Module Federation 模块。
+
+我们以 [使用模块联邦](/guides/topic-detail/module-federation/usage) 创建的应用为例，进一步说明如何导入应用级别模块。
+
+## 安装依赖
+
+在原本应用的基础上，我们需要安装 `@module-federation/bridge-react` 依赖，用于使用 Bridge 加载应用级别模块。
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add @module-federation/bridge-react" />
+
+## 生产者导出模块
+
+和直接导出组件级别的模块不同，我们需要为应用级别模块创建一个独立的入口来作为 `Module Federation` 的导出。
+
+我们创建 `src/export-App.tsx` 文件：
+
+:::note
+这里可以是任意的文件名，Modern.js 没有做强制约定。
+:::
+
+```ts title="src/export-App.tsx"
+import '@modern-js/runtime/registry/main'; // 这一行必须引入，它会默认导入微前端运行时依赖
+import { render } from '@modern-js/runtime/browser';
+import { createRoot } from '@modern-js/runtime/react';
+import { createBridgeComponent } from '@module-federation/bridge-react';
+
+const ModernRoot = createRoot();
+export const provider = createBridgeComponent({
+  rootComponent: ModernRoot,
+  render: (Component, dom) => render(Component, dom),
+});
+
+export default provider;
+```
+
+该文件会将 `main` 入口的应用根组件传递给 Bridge API，并通过 Bridge 将调用渲染函数将其渲染到指定的节点上。
+
+接下来，我们配置 `module-federation.config.ts`，将导出修改为 `src/export-App.tsx`：
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: 'remote',
+  filename: 'remoteEntry.js',
+  exposes: {
+    './app': './src/export-App.tsx',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});
+```
+
+:::info
+[`createBridgeComponent`](https://module-federation.io/zh/practice/bridge/react-bridge.html#createbridgecomponent) 用于导出应用级别模块，Modern.js 相关 API 可以查看 [createRoot](/apis/app/runtime/core/create-root)、[render](/apis/app/runtime/core/render)。
+:::
+
+## 消费者使用模块
+
+然后我们修改消费者配置，移除之前创建的的路由文件 `src/routes/remote/page.tsx`。
+
+我们希望所有访问到 `/remote` 的路由都能被进入上述应用级别模块中，因此我们重新添加 `src/routes/remote/$.tsx`。
+
+:::note
+如果你还不了解 `$.tsx` 的能力，可以阅读 [通配路由](/guides/basic-features/routes.html#通配路由)。
+:::
+
+```tsx title="src/routes/remote/$.tsx"
+import { createRemoteComponent } from '@module-federation/bridge-react';
+import { loadRemote } from '@module-federation/modern-js/runtime';
+
+const ErrorBoundary = (info?: { error: { message: string } }) => {
+  return (
+    <div>
+      <h2>This is ErrorBoundary Component, Something went wrong:</h2>
+      <pre style={{ color: 'red' }}>{info?.error.message}</pre>
+    </div>
+  );
+};
+const Loading = <div>loading...</div>;
+const RemoteApp = createRemoteComponent({
+  loader: () => loadRemote('remote/app'),
+  fallback: ErrorBoundary,
+  loading: Loading,
+});
+
+export default RemoteApp;
+```
+
+:::info
+[`createRemoteComponent`](https://module-federation.io/zh/practice/bridge/react-bridge.html#createremotecomponent) 用于加载应用级别模块。
+:::
+
+## 启动应用
+
+现在，生产者应用和消费者应用都已经搭建完毕，我们可以在本地运行 `modern dev` 启动两个应用。
+
+启动后，消费者应用访问 `/remote` 路由时，会进入生产者应用中。访问 `http://localhost:8080/remote`，可以看到页面中已经包含了生产者的远程模块的完整页面。
+
+你可以在生产者应用中，创建新的路由文件，并在代码中添加路由导航，可以发现这些功能也能够正常运行。
+
+上述用例可以参考：[Modern.js & Module Federation 应用级别模块](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/app-export)。
+
+## 相关文档
+
+- [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)

package/docs/zh/guides/topic-detail/module-federation/deploy.mdx

@@ -0,0 +1,28 @@
+# 部署
+
+通常情况下，部署 Module Federation 应用，需要在消费者上将远程模块地址，调整为其线上地址。
+
+例如已经将生产者部署到 `https://my-remote-module` 这个域名下，可以这样修改消费者的 `module-federation.config.ts` 文件：
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: 'host',
+  remotes: {
+    remote: 'remote@http://my-remote-module/mf-manifest.json',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});
+```
+
+此时，消费者将加载生产环境的 `remote` 模块的 `manifest` 配置文件。
+
+## 通过平台部署
+
+上述部署方式只是最简单的实践，在真实场景还有很多限制，例如版本管理、发布时序等。在字节跳动内部，我们在部署平台上搭建了 Module Federation 应用的部署流程，可以帮助开发者解决这些问题。
+
+我们会持续关注社区里类似功能的平台，在未来完善 Modern.js + Module Federation 在这些类平台上的部署文档。

package/docs/zh/guides/topic-detail/module-federation/introduce.mdx

@@ -0,0 +1,35 @@
+# 简介
+
+模块联邦（Module Federation）是一种 JavaScript 应用分治的架构模式，它允许你在多个 JavaScript 应用之间共享代码和资源。
+
+在这种分治的模式下，可以帮助你提升应用程序的性能，增强代码可维护性等。
+
+## Module Federation 2.0
+
+Module Federation 作为 Webpack 5 推出的重磅功能，自发布以来已经三年有余。在今年，字节跳动与 Module Federation 的作者 [@Zack Jackson](https://github.com/ScriptedAlchemy) 以及社区成员共同推出了 **Module Federation 2.0**。
+
+Module Federation 2.0 基于字节跳动内部实践以及 Module Federation 原有社区生态，解决了原先版本中的诸多问题。
+
+在字节跳动内部，基于 Modern.js 的框架已经与 Module Federation 2.0 进行了深度集成。我们正在逐步将这些功能集成到 Modern.js 中，希望与社区开发者共同探索未来。
+
+:::info
+参考 [Module Federation 2.0 发布](https://module-federation.io/zh/blog/announcement.html) 获取更多相关内容。
+:::
+
+## Modern.js MF 插件
+
+基于字节跳动内部实践，Module Federation 团队官方提供了 [Modern.js 插件](https://www.npmjs.com/package/@module-federation/modern-js)，帮助开发者更方便的使用 Module Federation。
+
+插件会识别当前构建引擎（Webpack 或 Rspack），在 Modern.js 应用中注入 Module Federation 对应插件，并自动处理构建配置、添加运行时代码等。
+
+同时，插件还支持在 Modern.js SSR 应用中使用 Module Federation，提供更好的性能体验。
+
+详细内容可以参考 [使用 Module Federation](/guides/topic-detail/module-federation/usage)、[Module Federation 服务端渲染](/guides/topic-detail/module-federation/ssr)。
+
+## 应用维度模块
+
+**应用级别模块**是具备应用的框架渲染能力及路由能力，能像应用一样运行的模块。应用级别模块是在**微前端框架**中非常重要的能力，提供跨应用框架（React、Vue）加载和渲染的能力，支持加载带路由的模块。
+
+Module Federation 2.0 提供了 [Bridge](https://module-federation.io/zh/practice/bridge/index.html) 的能力，用于加载应用级别模块。
+
+Modern.js 基于 Brdige 和自身内部实现提供了 API，可以非常简单的导出应用级别模块。详细内容可以参考 [应用级别模块](/guides/topic-detail/module-federation/application)。

package/docs/zh/guides/topic-detail/module-federation/ssr.mdx

@@ -0,0 +1,31 @@
+# 服务端渲染
+
+`@module-federation/modern-js` 提供了非常强大的能力，开发者可以非常方便的在 Modern.js 应用中，组合使用 Module Federation 和服务端渲染（SSR）的能力。
+
+## 开启 SSR
+
+我们以 [使用模块联邦](/guides/topic-detail/module-federation/usage) 创建的应用为例，只需要在生产者和消费者上，都添加 `server.ssr` 配置即可：
+
+```ts title="modern.config.ts"
+import { appTools, defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  server: {
+    ssr: {
+      mode: 'stream',
+    },
+  },
+}
+```
+
+为更好的性能体验，我们仅支持 Streaming SSR 情况使用这种能力组合。
+
+:::warning
+目前 `@module-federation/bridge-react` 未兼容 Node 环境，你必须从依赖中移除它，才能正常使用 Module Federation 和服务端渲染。这意味着 Bridge 无法和服务端渲染配合使用。
+:::
+
+## 数据获取
+
+:::note
+敬请期待
+:::

package/docs/zh/guides/topic-detail/module-federation/usage.mdx

@@ -0,0 +1,181 @@
+# 开始使用
+
+在 Modern.js 中使用 Module Federation 我们推荐使用官方插件 `@module-federation/modern-js`。
+
+本章节将会介绍如何通过官方插件搭含生产者应用与消费者应用，我们首先根据 [Modern.js 快速上手](/guides/get-started/quick-start) 创建两个应用。
+
+## 安装插件
+
+完成应用创建后，我们分别为两个项目安装插件：
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add @module-federation/modern-js" />
+
+## 注册插件
+
+安装插件后，你需要在 `modern.config.js` 中注册插件：
+
+```ts
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
+export default defineConfig({
+  runtime: {
+    router: true,
+  },
+  plugins: [
+    appTools({
+      bundler: 'rspack',
+    }),
+    moduleFederationPlugin(),
+  ],
+});
+
+```
+
+## 生产者导出模块
+
+接下来，我们先修改生产者的代码，导出 Module Federation 模块。
+
+我们创建 `src/components/Button.tsx` 文件，导出一个 Button 组件：
+
+```tsx title="src/components/Button.tsx"
+import React from 'react';
+
+export const Button = () => {
+  return <button type="button">Remote Button</button>;
+};
+```
+
+随后，在项目根目录添加 `module-federation.config.ts`，配置 Module Federation 模块的名称、共享依赖和导出内容：
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: 'remote',
+  filename: 'remoteEntry.js',
+  exposes: {
+    './Button': './src/components/Button.tsx',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});
+```
+
+另外，我们还需要修改 `modern.config.ts`，为生产者提供一个开发环境的端口，让消费者可以通过此端口访问生产者的资源：
+
+```ts title="modern.config.ts"
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
+export default defineConfig({
+  dev: {
+    port: 3051,
+  },
+  runtime: {
+    router: true,
+  },
+  plugins: [
+    appTools({
+      bundler: 'rspack',
+    }),
+    moduleFederationPlugin(),
+  ],
+});
+```
+
+## 消费者使用模块
+
+现在，我们修改消费者的代码，使用生产者导出的模块。
+
+在项目根目录添加 `module-federation.config.ts`，配置 Module Federation 模块的名称、共享依赖和使用的远程模块：
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: 'host',
+  remotes: {
+    remote: 'remote@http://localhost:3051/mf-manifest.json',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});
+```
+
+`mf-manifest.json` 是生产者在打包后产出的文件，包含了生产者导出的所有模块信息。
+
+我们创建新的路由文件 `src/routes/remote/page.tsx`，引入生产者模块：
+
+```tsx title="src/routes/remote/page.tsx"
+import React, { useState, Suspense } from 'react';
+import { Button } from 'remote/Button';
+
+const Index = (): JSX.Element => {
+  return (
+    <div>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Button />
+      </Suspense>
+    </div>
+  );
+};
+
+export default Index;
+```
+
+此时 `remote/Button` 引入会出现类型错误，这是因为本地没有远程模块的类型。Module Federation 2.0 提供了 [类型提示](https://module-federation.io/zh/guide/basic/type-prompt.html) 的能力，会在生产者构建时自动生成远程模块的类型定义，在消费者构建时自动下载。
+
+为此我们需要在 `tsconfig.json` 中添加新的 `path`，保证类型生效：
+
+```json title="tsconfig.json"
+{
+  "compilerOptions": {
+    "paths": {
+      "*": ["./@mf-types/*"]
+    }
+  }
+}
+``` 
+
+:::tip
+在消费者中，我们通过 `remote/Button` 来引用远程模块。这里简单介绍下这个路径具体代表了什么，可以先将它抽象成 `[remoteAlias]/[remoteExpose]`。
+
+第一段 `remoteAlias` 是生产者在消费者中的别名，它是消费者 `module-federation.config.ts` 中配置的 `remotes` 字段的 `key`：
+
+```ts
+{
+  remotes: {
+    [remoteAlias]: '[remoteModuleName]@[URL_ADDRESS]',
+  }
+}
+```
+
+这里我们也将远程地址抽象为 `[remoteModuleName]@[URL_ADDRESS]`，`@` 前的部分必须对应生产者的模块名。
+
+第二段 `remoteExpose` 是生产者在 `module-federation.config.ts` 中配置的 `exposes` 字段的 `key`。
+:::
+
+## 启动应用
+
+现在，生产者应用和消费者应用都已经搭建完毕，我们可以在本地运行 `modern dev` 启动两个应用。
+
+启动后，消费者中对生产者模块的引入，不会再出现抛错，类型已经下载到消费者应用中。
+
+:::note
+修改生产者代码后，消费者会自动拉取生产者的类型。
+:::
+
+访问 `http://localhost:8080/remote`，可以看到页面中已经包含了生产者的远程模块 `Button` 组件。
+
+上述用例可以参考：[Modern.js & Module Federation 基础用法示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base)。
+
+## 相关文档
+
+- [Module Federation 官方文档](https://module-federation.io/zh/guide/framework/modernjs.html)

package/docs/zh/plugin/introduction.mdx

@@ -6,7 +6,7 @@
 
 Modern.js 拥有自己的框架插件系统，你可以通过在 `modern.config.ts` 中配置 [`plugins`](/configure/app/plugins) 字段来使用 Modern.js 插件。
 
-### 插件类型 
+### 插件类型
 
 框架插件可以细分成三类，分别是：
 
@@ -62,8 +62,8 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [R
 | [CSS Minimizer 插件](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer)         | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩。 | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
 | [Pug 插件](https://github.com/rspack-contrib/rsbuild-plugin-pug)                             | 提供对 Pug 模板引擎的支持                                                                | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
 | [Rem 插件](https://github.com/rspack-contrib/rsbuild-plugin-rem)                             | 用于实现移动端页面的 rem 自适应布局                                                      | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
-| [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | 用于引用 YAML 文件，并将其转换为 JavaScript 对象                                         | [TOML 文件](/guides/basic-features/static-assets/json-files.html#toml-文件)                                                                         |
-| [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | 用于引用 TOML 文件，并将其转换为 JavaScript 对象                                         | [YAML 文件](/guides/basic-features/static-assets/json-files.html#yaml-文件)                                                                         |
+| [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | 用于引用 YAML 文件，并将其转换为 JavaScript 对象                                         | [YAML 文件](/guides/basic-features/static-assets/json-files.html#yaml-文件)                                                                         |
+| [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | 用于引用 TOML 文件，并将其转换为 JavaScript 对象                                         | [TOML 文件](/guides/basic-features/static-assets/json-files.html#toml-文件)                                                                       |
 
 #### 未内置的插件
 
@@ -75,4 +75,4 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [R
 
 import OtherPlugins from '@site-docs/components/other-plugins.mdx';
 
-<OtherPlugins />
+<OtherPlugins />

package/i18n.json

@@ -107,6 +107,10 @@
     "zh": "Reduck 状态管理",
     "en": "Reduck State Manager"
   },
+  "module-federation": {
+    "zh": "模块联邦",
+    "en": "Module Federation"
+  },
   "generator": {
     "zh": "项目生成器",
     "en": "Project Generator"

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.60.1",
+  "version": "2.60.3",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.60.1"
+    "@modern-js/sandpack-react": "2.60.3"
   },
   "devDependencies": {
-    "@rspress/shared": "1.31.0",
+    "@rspress/shared": "1.31.1",
     "@types/fs-extra": "9.0.13",
     "@types/node": "^16",
     "classnames": "^2",
@@ -33,7 +33,7 @@
     "fs-extra": "^10",
     "react": "^18",
     "react-dom": "^18",
-    "rspress": "1.31.0",
+    "rspress": "1.31.1",
     "ts-node": "^10.9.1",
     "typescript": "^5"
   },