@modern-js/main-doc 2.67.6 → 2.67.8

package/docs/zh/configure/app/tools/webpack-chain.mdx

@@ -4,9 +4,12 @@ title: webpackChain
 
 # tools.webpackChain
 
+import { Badge } from '@theme';
+
+<Badge type="danger">仅支持 Webpack</Badge>
+
 - **类型：** `Function | undefined`
 - **默认值：** `undefined`
-- **打包工具：** `仅支持 webpack`
 
 你可以通过 `tools.webpackChain` 来修改默认的 webpack 配置，它的值为 `Function` 类型，接收两个参数：
 
@@ -153,24 +156,24 @@ Modern.js 中预先定义了一些常用的 Chain ID，你可以通过这些 ID
 
 #### CHAIN_ID.RULE
 
-| ID            | 描述                                                                                          |
-| ------------- | --------------------------------------------------------------------------------------------- |
-| `RULE.MJS`    | 处理 `mjs` 的规则                                                                             |
-| `RULE.JS`     | 处理 `js` 的规则                                                                              |
-| `RULE.TS`     | 处理 `ts` 的规则                                                                              |
-| `RULE.CSS`    | 处理 `css` 的规则                                                                             |
-| `RULE.LESS`   | 处理 `less` 的规则                                                                            |
-| `RULE.SASS`   | 处理 `sass` 的规则                                                                            |
-| `RULE.STYLUS` | 处理 `stylus` 的规则（依赖 [Stylus 插件](https://rsbuild.dev/zh/plugins/list/plugin-stylus)） |
-| `RULE.SVG`    | Rule for `svg`                                                                                |
-| `RULE.PUG`    | 处理 `pug` 的规则                                                                             |
-| `RULE.TOML`   | 处理 `toml` 的规则                                                                            |
-| `RULE.YAML`   | 处理 `yaml` 的规则                                                                            |
-| `RULE.WASM`   | 处理 `wasm` 的规则                                                                            |
-| `RULE.NODE`   | 处理 `node` 的规则                                                                            |
-| `RULE.FONT`   | 处理字体的规则                                                                                |
-| `RULE.IMAGE`  | 处理图片的规则                                                                                |
-| `RULE.MEDIA`  | 处理媒体资源的规则                                                                            |
+| ID            | 描述                                                                                         |
+| ------------- | -------------------------------------------------------------------------------------------- |
+| `RULE.MJS`    | 处理 `mjs` 的规则                                                                            |
+| `RULE.JS`     | 处理 `js` 的规则                                                                             |
+| `RULE.TS`     | 处理 `ts` 的规则                                                                             |
+| `RULE.CSS`    | 处理 `css` 的规则                                                                            |
+| `RULE.LESS`   | 处理 `less` 的规则                                                                           |
+| `RULE.SASS`   | 处理 `sass` 的规则                                                                           |
+| `RULE.STYLUS` | 处理 `stylus` 的规则（依赖 [Stylus 插件](https://rsbuild.rs/zh/plugins/list/plugin-stylus)） |
+| `RULE.SVG`    | Rule for `svg`                                                                               |
+| `RULE.PUG`    | 处理 `pug` 的规则                                                                            |
+| `RULE.TOML`   | 处理 `toml` 的规则                                                                           |
+| `RULE.YAML`   | 处理 `yaml` 的规则                                                                           |
+| `RULE.WASM`   | 处理 `wasm` 的规则                                                                           |
+| `RULE.NODE`   | 处理 `node` 的规则                                                                           |
+| `RULE.FONT`   | 处理字体的规则                                                                               |
+| `RULE.IMAGE`  | 处理图片的规则                                                                               |
+| `RULE.MEDIA`  | 处理媒体资源的规则                                                                           |
 
 #### CHAIN_ID.ONE_OF
 
@@ -247,4 +250,4 @@ Modern.js 中预先定义了一些常用的 Chain ID，你可以通过这些 ID
 
 ### 使用示例
 
-使用示例可参考：[Rsbuild - bundlerChain 使用示例](https://rsbuild.dev/zh/guide/basic/configure-rspack#%E7%A4%BA%E4%BE%8B)。
+使用示例可参考：[Rsbuild - bundlerChain 使用示例](https://rsbuild.rs/zh/guide/basic/configure-rspack#%E7%A4%BA%E4%BE%8B)。

package/docs/zh/configure/app/tools/webpack.mdx

@@ -4,9 +4,12 @@ title: webpack
 
 # tools.webpack
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >仅支持 Webpack</Badge>
+
 - **类型：** `Object | Function | undefined`
 - **默认值：** `undefined`
-- **打包工具：** `仅支持 webpack`
 
 `tools.webpack` 选项用于配置原生的 [webpack](https://webpack.js.org/)。
 

package/docs/zh/guides/advanced-features/compatibility.mdx

@@ -19,7 +19,7 @@ ios_saf >= 10
 ```
 
 :::tip
-请查看 [Rsbuild - 设置浏览器范围](https://rsbuild.dev/zh/guide/advanced/browserslist) 来了解更多内容。
+请查看 [Rsbuild - 设置浏览器范围](https://rsbuild.rs/zh/guide/advanced/browserslist) 来了解更多内容。
 :::
 
 ## Polyfill

package/docs/zh/guides/advanced-features/page-performance/optimize-bundle.mdx

@@ -59,7 +59,7 @@ Modern.js 默认的 Browserslist 配置为：
 ```
 
 :::tip
-请阅读 [设置浏览器范围](https://rsbuild.dev/zh/guide/advanced/browserslist) 章节来了解更多关于 Browserslist 的用法。
+请阅读 [设置浏览器范围](https://rsbuild.rs/zh/guide/advanced/browserslist) 章节来了解更多关于 Browserslist 的用法。
 :::
 
 ## 按需引入 polyfill
@@ -98,7 +98,7 @@ export default {
 
 良好的拆包策略对于提升应用的加载性能是十分重要的，可以充分利用浏览器的缓存机制，减少请求数量，加快页面加载速度。
 
-在 Modern.js 中内置了[多种拆包策略](https://rsbuild.dev/zh/guide/optimization/split-chunk)，可以满足大部分应用的需求，你也可以根据自己的业务场景，自定义拆包配置。
+在 Modern.js 中内置了[多种拆包策略](https://rsbuild.rs/zh/guide/optimization/split-chunk)，可以满足大部分应用的需求，你也可以根据自己的业务场景，自定义拆包配置。
 
 比如将 node_modules 下的 `axios` 库拆分到 `axios.js` 中：
 

package/docs/zh/guides/advanced-features/rspack-start.mdx

@@ -72,7 +72,7 @@ export default {
 
 ## 修改转译配置
 
-Modern.js 在 Rspack 模式下使用 Rspack [builtin:swc-loader](https://rspack.dev/zh/guide/features/builtin-swc-loader) 进行代码转译。
+Modern.js 在 Rspack 模式下使用 Rspack [builtin:swc-loader](https://rspack.rs/zh/guide/features/builtin-swc-loader) 进行代码转译。
 
 Modern.js 已对 `builtin:swc-loader` 的常见配置提供了更方便的配置方式，如：通过 [source.transformImport](/configure/app/source/transform-import) 配置组件库按需引入。如果对 `builtin:swc-loader` 有自定义配置的需求，可通过 [tools.swc](/configure/app/tools/swc) 进行配置：
 
@@ -100,7 +100,7 @@ export default defineConfig<'rspack'>({
 
 但 Modern.js 对于 Rspack 的依赖方式为锁版本方式（非自动升级），由于发版周期不同步等原因，可能会出现 Modern.js 内集成的 Rspack 版本落后于 Rspack 最新版本的情况。
 
-当你执行 dev / build 命令时，Modern.js 会在[开启调试模式时](https://rsbuild.dev/zh/guide/debug/debug-mode)自动打印当前使用的 Rspack 版本：
+当你执行 dev / build 命令时，Modern.js 会在[开启调试模式时](https://rsbuild.rs/zh/guide/debug/debug-mode)自动打印当前使用的 Rspack 版本：
 
 ![rspack_version_log](https://lf3-static.bytednsdoc.com/obj/eden-cn/6221eh7uhbfvhn/modern/20240110-155444.png)
 

package/docs/zh/guides/advanced-features/web-server.mdx

@@ -12,10 +12,15 @@ Modern.js 将大部分项目需要的服务端能力都进行了封装，通常
 必须确保 Modern.js 版本是 x.67.5 及以上。
 :::
 
-开启自定义 Web Server 功能，需要执行以下步骤：
-1. devDependencies 增加 `@modern-js/server-runtime` 及 `ts-node`依赖并安装。
-2. `tsconfig` 的 `include` 中添加 `server`。
-3. 项目目录下创建 `server/modern.server.ts` 文件，可以在这个文件中编写自定义逻辑。
+开发者可以在项目根目录执行 `pnpm run new` 命令，开启「自定义 Web Server」功能：
+
+```bash
+? 请选择你想要的操作 创建工程元素
+? 请选择创建元素类型 新建「自定义 Web Server」源码目录
+```
+
+执行命令后，项目目录下会自动创建 `server/modern.server.ts` 文件，可以在这个文件中编写自定义逻辑。
+
 
 ## 自定义 Web Server 能力
 
@@ -227,6 +232,14 @@ export default () => {
 旧版 API 兼容但不再推荐使用，扩展 Server 能力请移步 [自定义 Web Server](/guides/advanced-features/web-server.html)，迁移指南参考 [迁移至新版自定义 Web Server](/guides/advanced-features/web-server.html#迁移至新版自定义-web-server)。
 :::
 
+### 开启
+开启自定义 Web Server 功能，需要执行以下步骤：
+1. devDependencies 增加 `@modern-js/plugin-server`、`tsconfig-paths` 及 `ts-node`依赖并安装。
+2. `tsconfig` 的 `include` 中添加 `server`。
+3. `modern.config.ts` 中注册 `@modern-js/plugin-server` 插件。
+4. 项目目录下创建 `server/index.ts` 文件，可以在这个文件中编写自定义逻辑。
+
+
 ### Unstable Middleware
 
 Modern.js 支持为 Web Server 添加渲染中间件，支持在处理页面路由的前后执行自定义逻辑。

package/docs/zh/guides/basic-features/css/css.mdx

@@ -12,20 +12,20 @@ Modern.js 内置了社区流行的 CSS 预处理器，包括 Less 和 Sass。
 
 默认情况下，你不需要对 Less 和 Sass 进行任何配置。如果你有自定义 loader 配置的需求，可以通过配置 [tools.less](/configure/app/tools/less)、[tools.sass](/configure/app/tools/sass) 来进行设置。
 
-你也可以在 Modern.js 中使用 Stylus，只需要安装 Rsbuild 提供的 Stylus 插件即可，使用方式请参考 [Stylus 插件](https://rsbuild.dev/zh/plugins/list/plugin-stylus)。
+你也可以在 Modern.js 中使用 Stylus，只需要安装 Rsbuild 提供的 Stylus 插件即可，使用方式请参考 [Stylus 插件](https://rsbuild.rs/zh/plugins/list/plugin-stylus)。
 
 ## 使用 PostCSS
 
 Modern.js 内置了 [PostCSS](https://postcss.org/) 来转换 CSS 代码。
 
-请阅读 [Rsbuild - 使用 PostCSS](https://rsbuild.dev/zh/guide/basic/css-usage#%E4%BD%BF%E7%94%A8-postcss) 了解更多用法。
+请阅读 [Rsbuild - 使用 PostCSS](https://rsbuild.rs/zh/guide/basic/css-usage#%E4%BD%BF%E7%94%A8-postcss) 了解更多用法。
 
 ## 使用 Lightning CSS
 
 Modern.js 支持使用 [Lightning CSS](https://lightningcss.dev/) 来转换 CSS 代码，可以通过配置 [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader) 来开启此功能。
 
-请阅读 [Rsbuild - 使用 Lightning CSS](https://rsbuild.dev/zh/guide/basic/css-usage#lightning-css) 了解更多用法。
+请阅读 [Rsbuild - 使用 Lightning CSS](https://rsbuild.rs/zh/guide/basic/css-usage#lightning-css) 了解更多用法。
 
 ## 使用 Uno CSS
 
-请阅读 [Rsbuild - 使用 UnoCSS](https://rsbuild.dev/zh/guide/basic/unocss) 了解更多用法。
+请阅读 [Rsbuild - 使用 UnoCSS](https://rsbuild.rs/zh/guide/basic/unocss) 了解更多用法。

package/docs/zh/guides/basic-features/data/data-cache.mdx

@@ -159,7 +159,7 @@ const getComplexStatistics = cache(
   }
 );
 
-revalidateTag('dashboard-stats'); // 会使 getDashboardStats 函数和 getComplexStatistics 函数的缓存都失效
+revalidateTag('dashboard'); // 会使 getDashboardStats 函数和 getComplexStatistics 函数的缓存都失效
 ```
 
 #### `getKey` 参数

package/docs/zh/guides/basic-features/debug/rsdoctor.mdx

@@ -54,4 +54,4 @@ RSDOCTOR=true npm run build
 
 ## 相关文档
 
-更多内容请查阅 [Rsdoctor 官网文档](https://rsdoctor.dev/)。
+更多内容请查阅 [Rsdoctor 官网文档](https://rsdoctor.rs/)。

package/docs/zh/guides/basic-features/render/ssr.mdx

@@ -222,7 +222,7 @@ document.addEventListener('load', () => {
 export const doSomething = () => {}
 ```
 
-如果直接引用到组件中，会造成 CSR 加载报错，即使你已经使用环境变量进行判断，但仍然无法移除依赖中副作用的执行。
+如果直接引用到组件中，会造成 SSR 加载报错，即使你已经使用环境变量进行判断，但仍然无法移除依赖中副作用的执行。
 
 ```tsx title="routes/page.tsx"
 import { doSomething } from 'packageA';

package/docs/zh/guides/basic-features/render/streaming-ssr.mdx

@@ -72,7 +72,7 @@ export const loader = ({ params }: LoaderFunctionArgs) => {
 另外，`defer` 还可以同时接收异步数据和同步数据。在下述例子中，我们等待部分耗时较短的请求，在响应后通过对象数据返回，而耗时较长时间的请求，则通过 Promise 返回：
 
 ```ts title="user/[id]/page.data.ts"
-export const loader = ({ params }: LoaderFunctionArgs) => {
+export const loader = async ({ params }: LoaderFunctionArgs) => {
   const userId = params.id;
 
   const user = new Promise<User>(resolve => {

package/docs/zh/guides/basic-features/static-assets/wasm-assets.mdx

@@ -12,7 +12,7 @@ WebAssembly（缩写为 wasm）是一种可移植、高性能的字节码格式
 
 ## 引用方式
 
-你可以直接在 JavaScript 文件中引用一个 WebAssembly 模块：
+你可以在 JavaScript 文件中使用 named import 引用一个 WebAssembly 模块：
 
 ```js title="index.js"
 import { add } from './add.wasm';

package/docs/zh/guides/basic-features/static-assets.mdx

@@ -146,7 +146,7 @@ console.log(myFile); // "/static/myFile.6c12aba3.pdf"
 
 关于以上配置的更多介绍，请参考：
 
-- [Rspack 文档 - Asset modules](https://www.rspack.dev/guide/asset-module.html#asset-modules)
+- [Rspack 文档 - Asset modules](https://rspack.rs/guide/asset-module.html#asset-modules)
 - [webpack 文档 - Asset modules](https://webpack.js.org/guides/asset-modules/)
 
 ## 图片格式
@@ -158,4 +158,4 @@ console.log(myFile); // "/static/myFile.6c12aba3.pdf"
 | PNG  | 无损压缩，不会丢失图片细节，不失真，支持半透明                   | 不适合色表复杂的图片                   | 适合颜色数量少，边界层次分明的图片，适合用在 logo、icon、透明图等场景        |
 | JPG  | 颜色丰富                                                         | 有损压缩，会导致图片失真，不支持透明度 | 适合颜色数量多，颜色带有渐变、过度复杂的图片，适合用在人像照片、风景图等场景 |
 | WebP | 同时支持有损压缩与无损压缩，支持透明度，体积比 PNG 和 JPG 小很多 | iOS 兼容性不好                         | 几乎任何场景的像素图片，支持 WebP 的宿主环境，都应该首选 WebP 图片格式       |
-| SVG  | 无损格式，不失真，支持透明度                                      | 不适合复杂图形                         | 适合矢量图，适合用于 icon                                                     |
+| SVG  | 无损格式，不失真，支持透明度                                     | 不适合复杂图形                         | 适合矢量图，适合用于 icon                                                    |

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

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # 构建工具
 
-Modern.js 构建是基于 [Rsbuild](https://rsbuild.dev/) 实现的，并支持在 Webpack 和 Rspack 两种打包工具间无缝切换。
+Modern.js 构建是基于 [Rsbuild](https://rsbuild.rs/) 实现的，并支持在 Webpack 和 Rspack 两种打包工具间无缝切换。
 
 :::tip 什么是 Rsbuild
 Rsbuild 是基于 Rspack 的构建工具，是一个增强版的 Rspack CLI，更易用、开箱即用。
@@ -25,7 +25,7 @@ Rsbuild 是基于 Rspack 的构建工具，是一个增强版的 Rspack CLI，
 
 ## 构建文档
 
-Rsbuild 的文档地址为：https://rsbuild.dev/
+Rsbuild 的文档地址为：https://rsbuild.rs/
 
 在该文档中，你可以了解到 Rsbuild 的详细介绍，同时也可以找到各个构建能力的完整使用指南。
 
@@ -42,4 +42,4 @@ Rsbuild 的文档地址为：https://rsbuild.dev/
 
 Rsbuild 提供了丰富的构建能力，包括 JavaScript 编译、CSS 编译、静态资源处理、代码热更新、代码压缩、TS 类型检查等几十种能力。
 
-我们推荐你阅读 [「Rsbuild - 功能导航」](https://rsbuild.dev/zh/guide/start/features) 来了解 Rsbuild 提供的所有构建能力。
+我们推荐你阅读 [「Rsbuild - 功能导航」](https://rsbuild.rs/zh/guide/start/features) 来了解 Rsbuild 提供的所有构建能力。

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

@@ -280,7 +280,7 @@ export default defineConfig({
 
 4. **单入口应用是否存在输出多个 HTML 文件的例外情况？**
 
-你可以自行配置 [html-rspack-plugin](https://rspack.dev/zh/plugins/rspack/html-rspack-plugin#%E7%94%9F%E6%88%90%E5%A4%9A%E4%B8%AA-html-%E6%96%87%E4%BB%B6) 为每个入口生成多个 HTML 产物，或使多个入口共用一个 HTML 产物。
+你可以自行配置 [html-rspack-plugin](https://rspack.rs/zh/plugins/rspack/html-rspack-plugin#%E7%94%9F%E6%88%90%E5%A4%9A%E4%B8%AA-html-%E6%96%87%E4%BB%B6) 为每个入口生成多个 HTML 产物，或使多个入口共用一个 HTML 产物。
 
 5. **什么叫多页应用（Multi-Page Application）？**
 

package/docs/zh/guides/get-started/tech-stack.mdx

@@ -12,7 +12,7 @@ Modern.js 框架默认集成了一些社区中流行的库和开发工具。
 
 Modern.js 使用 [React 18](https://react.dev/) 来构建用户界面，同时也兼容 React 17。
 
-Modern.js 底层的 Rsbuild 支持构建 Vue 应用，如果你需要使用 Vue，可以参考 [Rsbuild - Vue](https://rsbuild.dev/zh/guide/framework/vue)。
+Modern.js 底层的 Rsbuild 支持构建 Vue 应用，如果你需要使用 Vue，可以参考 [Rsbuild - Vue](https://rsbuild.rs/zh/guide/framework/vue)。
 
 ## 路由
 
@@ -38,7 +38,7 @@ Modern.js 可以与社区中任意的包管理器搭配使用，比如 [npm](htt
 
 ## 打包工具
 
-Modern.js 使用 [Webpack 5](https://webpack.js.org/) 或 [Rspack](https://www.rspack.dev/) 来打包你的 Web 应用。
+Modern.js 使用 [Webpack 5](https://webpack.js.org/) 或 [Rspack](https://rspack.rs/) 来打包你的 Web 应用。
 
 默认使用的打包工具为 Webpack 5，你可以参考 [使用 Rspack](/guides/advanced-features/rspack-start) 来切换到更快的 Rspack。
 
@@ -69,7 +69,7 @@ Modern.js 支持 [启用 Tailwind CSS](/guides/basic-features/css/tailwindcss)
 Modern.js 支持 [Sass](https://sass-lang.com/)、[Less](https://lesscss.org/) 和 [Stylus](https://stylus-lang.com/) 三种 CSS 预处理器：
 
 - 默认支持 Sass 和 Less，开箱即用。
-- 可选支持 Stylus，请参考 [Stylus 插件](https://rsbuild.dev/zh/plugins/list/plugin-stylus) 来使用。
+- 可选支持 Stylus，请参考 [Stylus 插件](https://rsbuild.rs/zh/plugins/list/plugin-stylus) 来使用。
 
 ## CSS Modules
 

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

@@ -1,8 +1,17 @@
 # 部署
 
-通常情况下，部署 Module Federation 应用，需要在消费者上将远程模块地址，调整为其线上地址。
+通常情况下，部署 Module Federation 应用，需要注意两点：
 
-例如已经将生产者部署到 `https://my-remote-module` 这个域名下，可以这样修改消费者的 `module-federation.config.ts` 文件：
+1. 保证消费者配置文件中的远程模块地址无误，消费者能够正确访问到生产者的 `manifest` 文件。
+2. 保证生产者 `manifest` 文件中各个资源能被正确访问到。
+
+我们推荐使用 Modern.js 的 [Node 服务](/guides/basic-features/deploy.html#modernjs-内置-nodejs-服务器)来部署 Module Federation 应用，以获得开箱即用的体验。
+
+## 消费者
+
+对于 Module Federation 的消费者来说，它与生产者的联系就是在配置文件中的远程模块地址。
+
+例如生产者部署在 `https://my-remote-module` 这个域名下，开发者需要修改消费者的配置文件：
 
 ```ts title="module-federation.config.ts"
 import { createModuleFederationConfig } from '@module-federation/modern-js';
@@ -10,7 +19,7 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
 export default createModuleFederationConfig({
   name: 'host',
   remotes: {
-    remote: 'remote@http://my-remote-module/mf-manifest.json',
+    remote: 'remote@https://my-remote-module/static/mf-manifest.json',
   },
   shared: {
     react: { singleton: true },
@@ -19,10 +28,77 @@ export default createModuleFederationConfig({
 });
 ```
 
-此时，消费者将加载生产环境的 `remote` 模块的 `manifest` 配置文件。
+此时，消费者将加载远程模块生产环境的 `manifest` 配置文件。
+
+:::note
+上述代码中，远程模块的地址是 `/static/mf-manifest.json`，这只是以 Modern.js 默认的产物路径举例。在实际项目中，开发者需要根据实际的访问路径进行配置。
+:::
+
+## 生产者
+
+对于 Module Federation 的生产者，开发者需要正确的配置 [`output.assetPrefix`](/configure/app/output/asset-prefix) 配置，它会影响到：
+
+1. `mf-manifest.json` 中定义的 `publicPath`，它决定了远程模块其他资源的访问路径。
+2. 通过 Modern.js 服务直接托管产物时，`mf-manifest.json` 文件的访问路径。
+
+在生产环境，开发者需要将 `output.assetPrefix` 配置为生产环境的访问路径。例如我们将生产者部署在 `https://my-remote-module` 这个域名下，需要将 `output.assetPrefix` 配置为 `https://my-remote-module`。
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  output: {
+    assetPrefix: 'https://my-remote-module',
+  },
+});
+```
+
+此时，生产者构建产物 `mf-manifest.json` 中定义的 `publicPath` 为 `https://my-remote-module`，例如：
+
+```json
+{
+  "id": "remote",
+  "name": "remote",
+  "metaData": {
+    "name": "remote",
+    "publicPath": "https://my-remote-module/"
+  },
+  "shared": [ /* xxx */ ],
+  "remotes": [],
+  "exposes": [ /* xxx */ ]
+}
+```
+
+消费者在访问远程模块时，会自动将 `publicPath` 拼接在远程模块的资源路径前。
+
+该配置也会影响到生产者 `mf-manifest.json` 的访问路径。例如将这个值设置为 `MyDomain/module-a` 时，`mf-manifest.json` 的托管路径变为 `MyDomain/module-a/static/mf-manifest.json`。
+
+此时，消费者在配置远程模块时，需要配置以下地址：
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: 'host',
+  remotes: {
+    remote: 'remote@MyDomain/module-a/static/mf-manifest.json',
+  },
+});
+```
+
+## 本地验证部署
 
-## 通过平台部署
+Modern.js 提供了 `modern deploy` 命令，可以方便生成可运行在 Node.js 环境的产物。
 
-上述部署方式只是最简单的实践，在真实场景还有很多限制，例如版本管理、发布时序等。在字节跳动内部，我们在部署平台上搭建了 Module Federation 应用的部署流程，可以帮助开发者解决这些问题。
+```bash
+modern deploy
+```
+
+执行命令后，可以在控制台看到以下输出：
+
+```bash
+Static directory: .output/static
+You can preview this build by node .output/index
+```
 
-我们会持续关注社区里类似功能的平台，在未来完善 Modern.js + Module Federation 在这些类平台上的部署文档。
+此时，开发者只需要运行 `node .output/index` 即可在本地预览部署后的效果。无论是 CSR 应用或是 SSR 应用，所有的 Module Federation 产物都能够被正确的访问。

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

@@ -189,8 +189,6 @@ export default Index;
 import { appTools, defineConfig } from '@modern-js/app-tools';
 import { moduleFederationPlugin } from '@module-federation/modern-js';
 
-const isLocal = process.env.IS_LOCAL === 'true';
-
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig({
   server: {
@@ -203,7 +201,7 @@ export default defineConfig({
     // Now this configuration is only used in the local when you run modern serve command.
     // If you want to deploy the application to the platform, use your own domain name.
     // Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
-    assetPrefix: isLocal ? 'http://127.0.0.1:3051' : '/',
+    assetPrefix: 'http://127.0.0.1:3051',
   },
   plugins: [
     appTools({
@@ -214,7 +212,7 @@ export default defineConfig({
 });
 ```
 
-现在，在生产者中运行 `IS_LOCAL=true modern build && modern serve`，在消费者中运行 `modern build && modern serve`，即可在本地模拟生产环境，访问到远程模块。
+现在，在生产者中运行 `modern build && modern serve`，在消费者中运行 `modern build && modern serve`，即可在本地模拟生产环境，访问到远程模块。
 
 上述用例可以参考：[Modern.js & Module Federation 基础用法示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base)。
 

package/docs/zh/guides/troubleshooting/builder.mdx

@@ -10,15 +10,14 @@ sidebar_position: 3
 
 ### Rsbuild FAQ
 
-Modern.js 内部基于 [Rsbuild](https://rsbuild.dev/) 封装了自身的构建工具，因此你可以直接参考 Rsbuild 的 FAQ 文档：
+Modern.js 内部基于 [Rsbuild](https://rsbuild.rs/) 封装了自身的构建工具，因此你可以直接参考 Rsbuild 的 FAQ 文档：
 
-- [Rsbuild - 功能类问题](https://rsbuild.dev/zh/guide/faq/features)
-- [Rsbuild - 异常类问题](https://rsbuild.dev/zh/guide/faq/exceptions)
-- [Rsbuild - 热更新问题](https://rsbuild.dev/zh/guide/faq/hmr)
+- [Rsbuild - 功能类问题](https://rsbuild.rs/zh/guide/faq/features)
+- [Rsbuild - 异常类问题](https://rsbuild.rs/zh/guide/faq/exceptions)
+- [Rsbuild - 热更新问题](https://rsbuild.rs/zh/guide/faq/hmr)
 
 ---
 
-
 ### 如何清空 webpack 编译缓存？
 
 默认情况下，Modern.js 的 webpack 编译缓存生成在 `./node_modules/.cache/webpack` 目录下。