@modern-js/main-doc 2.69.7 → 3.0.0-alpha.1

package/docs/zh/community/contributing-guide.mdx

@@ -14,7 +14,7 @@ sidebar_position: 3
 
 ### 安装 Node.js
 
-我们推荐使用 Node.js 18。你可以通过以下命令查看当前使用的 Node.js 版本：
+我们推荐使用 Node.js 22。你可以通过以下命令查看当前使用的 Node.js 版本：
 
 ```bash
 node -v
@@ -22,17 +22,17 @@ node -v
 
 如果你当前环境没有安装 Node.js，可以使用 [nvm](https://github.com/nvm-sh/nvm)或者 [fnm](https://github.com/Schniz/fnm) 来安装它。
 
-以下是如何通过 nvm 安装 Node.js 18 LTS 版本的示例：
+以下是如何通过 nvm 安装 Node.js 22 LTS 版本的示例：
 
 ```bash
-# 安装 Node.js 18 的 LTS 版本
-nvm install 18 --lts
+# 安装 Node.js 22 的 LTS 版本
+nvm install 22 --lts
 
-# 将新安装的 Node.js 18 设为默认版本
-nvm alias default 18
+# 将新安装的 Node.js 22 设为默认版本
+nvm alias default 22
 
-# 切换到新安装的 Node.js 18
-nvm use 18
+# 切换到新安装的 Node.js 22
+nvm use 22
 ```
 
 ### 安装 pnpm
@@ -124,7 +124,7 @@ pnpm run reset
 
 如果你进行了 bugfix，或者添加了需要测试的代码，请添加一些测试代码。
 
-你可以在 `<PACKAGE_DIR>/tests` 文件夹中添加单元测试用例。测试语法基于 [Jest](https://jestjs.io/) 和 [Vitest](https://vitest.dev/)。
+你可以在 `<PACKAGE_DIR>/tests` 文件夹中添加单元测试用例。测试语法基于 [Jest](https://jestjs.io/) 和 [Rstest](https://rstest.rs/)。
 
 ### 运行单元测试
 
@@ -184,9 +184,7 @@ pnpm run lint
 ```sh
 root
 └─ packages
-   └─ document
-       ├─ main-doc       # Modern.js Framework 文档
-       └─ module-doc     # Modern.js Module 文档
+   └─ document # Modern.js Framework 文档
 ```
 
 文档站使用 Rspress 构建，文档内容可以使用 markdown 或 mdx 语法编写。详细使用方法可以参考 [Rspress 文档](https://rspress.rs/)。

package/docs/zh/components/bff-operator-code.mdx

@@ -0,0 +1,5 @@
+import FrameworkCode from '@site/src/components/FrameworkCode';
+
+<FrameworkCode sourcePath="@modern-js/plugin-bff/server">
+  {props.children}
+</FrameworkCode>

package/docs/zh/components/bff-upload.mdx

@@ -1,11 +1,9 @@
-BFF 搭配运行时框架提供了文件上传能力，支持一体化调用及纯函数手动调用。
-
 ### BFF 函数
 
 首先创建 `api/lambda/upload.ts` 文件：
 
 ```ts title="api/lambda/upload.ts"
-export const post = async ({ formData }: {formData: Record<string, any>}) => {
+export const post = async ({ formData }: { formData: Record<string, any> }) => {
   console.info('formData:', formData);
   // do somethings
   return {
@@ -15,6 +13,7 @@ export const post = async ({ formData }: {formData: Record<string, any>}) => {
   };
 };
 ```
+
 :::tip
 通过接口处理函数入参中的 `formData` 可以获取客户端上传的文件。值为 `Object`，key 为上传时的字段名。
 :::
@@ -22,9 +21,10 @@ export const post = async ({ formData }: {formData: Record<string, any>}) => {
 ### 一体化调用
 
 接着在 `src/routes/upload/page.tsx` 中直接引入函数并调用：
+
 ```tsx title="routes/upload/page.tsx"
 import { post } from '@api/upload';
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export default (): JSX.Element => {
   const [file, setFile] = React.useState<FileList | null>();
@@ -33,7 +33,7 @@ export default (): JSX.Element => {
     setFile(e.target.files);
   };
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     const formData = new FormData();
     if (file) {
@@ -49,17 +49,19 @@ export default (): JSX.Element => {
   return (
     <div>
       <input multiple type="file" onChange={handleChange} />
-      <button onClick={handleUpload}>upload</button>
+      <button onClick={handleSubmit}>upload</button>
     </div>
   );
 };
 ```
+
 :::tip
 注意：入参类型必须为：`{ formData: FormData }` 才会正确上传。
 
 :::
 
 ### 手动上传
+
 可以基于 `fetch API` 手动上传文件，需要在调用 `fetch` 时，将 `body` 设置为 `FormData` 类型并提交 `post` 请求。
 
 ```tsx title="routes/upload/page.tsx"
@@ -93,5 +95,4 @@ export default (): JSX.Element => {
     </form>
   );
 };
-
 ```

package/docs/zh/components/build-output.mdx

@@ -0,0 +1,45 @@
+在项目中执行 `pnpm run build` 即可构建项目生产环境产物：
+
+```bash
+$ pnpm run build
+
+> modern build
+
+  Modern.js Framework
+
+info    Starting production build...
+info    Type checker is enabled. It may take some time.
+ready   Client compiled in 6.19 s
+info    Production file sizes:
+
+  File                                       Size        Gzipped
+  dist/routes-manifest.json                  0.74 kB     0.28 kB
+  dist/static/css/async/page.d7915515.css    1.4 kB      0.69 kB
+  dist/static/js/main.5ae469e7.js            3.0 kB      1.3 kB
+  dist/html/index/index.html                  6.0 kB      2.6 kB
+  dist/static/js/async/page.ddc8a4c1.js      19.2 kB     6.7 kB
+  dist/static/js/34.171fffdb.js              21.3 kB     7.1 kB
+  dist/static/js/lib-router.8995a55e.js      55.3 kB     18.1 kB
+  dist/static/js/lib-lodash.53ec3384.js      71.4 kB     24.8 kB
+  dist/static/js/lib-react.b5856db9.js       140.0 kB    45.2 kB
+  dist/static/js/lib-polyfill.86c452b3.js    213.3 kB    69.9 kB
+
+  Total size:  531.8 kB
+  Gzipped size:  176.7 kB
+```
+
+构建产物默认生成到 `dist/`，目录结构如下：
+
+```
+dist
+├── html
+│   └── index
+├── modern.config.json
+├── route.json
+├── routes-manifest.json
+└── static
+    ├── css
+    └── js
+```
+
+> 如果你需要自定义构建产物的目录，请参考 [构建产物目录](/guides/basic-features/output-files)。

package/docs/zh/components/bundler.mdx

@@ -1,3 +1,3 @@
-指 [webpack](https://webpack.js.org/)、[Rspack](https://rspack.rs/) 等模块打包工具。
+指 [Rspack](https://rspack.rs/) 等模块打包工具。
 
 打包工具的主要目标是将 JavaScript、CSS 等文件打包在一起，打包后的文件可以在浏览器、Node.js 等环境中使用。当 Bundler 处理 Web 应用时，它会构建一个依赖关系图，其中包含应用需要的各个模块，然后将所有模块打包成一个或多个 bundle。

package/docs/zh/components/debug-app.mdx

@@ -13,4 +13,4 @@ ready   Client compiled in 0.86 s
   > Network:  http://192.168.0.1:8080/
 ```
 
-在浏览器中打开 `http://localhost:8000/`，可以看到页面内容。
+在浏览器中打开 `http://localhost:8080/`，可以看到页面内容。

package/docs/zh/components/enable-bff-caution.mdx

@@ -1,4 +1,4 @@
 :::tip
-请先在当前项目的根目录使用 [new 命令](/apis/app/commands#modern-new) 启用 BFF 功能。
+请先参考[基础用法](/guides/advanced-features/bff/function.html#启用-bff)中的"启用 BFF"部分，完成 BFF 功能的启用。
 
 :::

package/docs/zh/components/enable-bff.mdx

@@ -1,23 +1,56 @@
-import { PackageManagerTabs } from '@theme';
+要在 Modern.js 项目中启用 BFF 功能，请按照以下步骤修改代码：
 
-1. 执行 `new` 命令：
+1. 安装 BFF 插件依赖
 
-<PackageManagerTabs command="run new" />
+如果项目尚未安装 BFF 插件，请先安装：
 
-2. 按照提示，选择**启用 BFF 功能**：
+```bash
+pnpm add @modern-js/plugin-bff
+```
+
+:::tip 版本一致性
+请确保 `@modern-js/plugin-bff` 的版本与项目中 `@modern-js/app-tools` 的版本保持一致。Modern.js 的所有官方包使用统一版本号发布，版本不一致可能导致兼容性问题。
+
+请先查看 `@modern-js/app-tools` 的版本，然后安装相同版本的 `@modern-js/plugin-bff`：
 
 ```bash
-? 请选择你想要的操作 启用可选功能
-? 请选择功能名称 启用「BFF」功能
+# 查看当前 @modern-js/app-tools 的版本
+pnpm list @modern-js/app-tools
+
+# 安装相同版本的 @modern-js/plugin-bff
+pnpm add @modern-js/plugin-bff@<版本号>
 ```
 
-3. 将下面的代码添加到 `modern.config.[tj]s` 中：
+:::
+
+2. 配置 `modern.config.ts`
 
+在 `modern.config.[tj]s` 文件中导入并添加 BFF 插件：
 
 ```ts title="modern.config.ts"
+import { defineConfig, appTools } from '@modern-js/app-tools';
 import { bffPlugin } from '@modern-js/plugin-bff';
 
 export default defineConfig({
-  plugins: [bffPlugin()],
+  plugins: [appTools(), bffPlugin()],
 });
 ```
+
+3. 配置 TypeScript 别名
+
+为了在 TypeScript 中正确识别 `@api` 别名，建议在 `tsconfig.json` 中添加路径映射：
+
+```json title="tsconfig.json"
+{
+  "compilerOptions": {
+    "paths": {
+      ..., // other paths,
+      "@api/*": ["./api/lambda/*"]
+    }
+  },
+  "include": [
+    ..., // 其他 include 目录
+    "api"  // 添加 api 目录
+  ]
+}
+```

package/docs/zh/components/enable-ssg.mdx

@@ -0,0 +1,49 @@
+要在 Modern.js 项目中启用 SSG 功能，请按照以下步骤修改代码：
+
+1. 安装 SSG 插件依赖
+
+如果项目尚未安装 SSG 插件，请先安装：
+
+```bash
+pnpm add @modern-js/plugin-ssg
+```
+
+:::tip 版本一致性
+
+请确保 `@modern-js/plugin-ssg` 的版本与项目中 `@modern-js/app-tools` 的版本保持一致。Modern.js 的所有官方包使用统一版本号发布，版本不一致可能导致兼容性问题。
+
+请先查看 `@modern-js/app-tools` 的版本，然后安装相同版本的 `@modern-js/plugin-ssg`：
+
+```bash
+# 查看当前 @modern-js/app-tools 的版本
+pnpm list @modern-js/app-tools
+
+# 安装相同版本的 @modern-js/plugin-ssg
+pnpm add @modern-js/plugin-ssg@<版本号>
+```
+
+:::
+
+2. 配置 modern.config.ts
+
+在 `modern.config.[tj]s` 文件中导入并添加 SSG 插件，同时配置 `output.ssg`：
+
+```ts title="modern.config.ts"
+import { defineConfig, appTools } from '@modern-js/app-tools';
+import { ssgPlugin } from '@modern-js/plugin-ssg';
+
+export default defineConfig({
+  plugins: [appTools(), ssgPlugin()],
+  output: {
+    ssg: true,
+  },
+});
+```
+
+:::info 适用范围
+
+- 单入口请使用 `output.ssg`。
+- 多入口请使用 `output.ssgByEntries`。
+- 当仅设置 `output.ssg: true` 且未配置 `output.ssgByEntries` 时，所有入口下的所有路由都会作为 SSG 路由处理。
+
+:::

package/docs/zh/components/entry-scan-logic.mdx

@@ -0,0 +1,7 @@
+:::tip 入口扫描逻辑
+- 如果 `src/` 本身满足入口条件 → 单入口应用
+- 如果 `src/` 不满足条件 → 扫描 `src/` 下的子目录 → 多入口应用
+- 单入口应用中，默认入口名为 `index`
+
+:::
+

package/docs/zh/components/esbuild.mdx

@@ -1,3 +1,3 @@
-[esbuild](https://esbuild.github.io/) 是一款基于 Golang 开发的前端构建工具，具有打包、编译和压缩 JavaScript 代码的功能，相比传统的打包编译工具，esbuild 在性能上有显著提升。在代码压缩方面，相比 webpack 内置的 terser 压缩器，esbuild 在性能上有数十倍的提升。
+[esbuild](https://esbuild.github.io/) 是一款基于 Golang 开发的前端构建工具，具有打包、编译和压缩 JavaScript 代码的功能，相比传统的打包编译工具，esbuild 在性能上有显著提升。在代码压缩方面，esbuild 在性能上有数十倍的提升。
 
-Modern.js 提供了 esbuild 插件，让你能使用 esbuild 代替 babel-loader、ts-loader 和 terser 等库进行代码编译和压缩。在大型工程中启用 esbuild 后，**可以大幅度减少代码编译和压缩所需的时间，同时有效避免 OOM (heap out of memory) 问题**。
+Modern.js 提供了 esbuild 插件，让你能使用 esbuild 代替 babel-loader、ts-loader 等库进行代码编译和压缩。在大型工程中启用 esbuild 后，**可以大幅度减少代码编译和压缩所需的时间，同时有效避免 OOM (heap out of memory) 问题**。

package/docs/zh/components/extend-bff-function.mdx

@@ -1,5 +1,3 @@
-普通的 BFF 函数写法有时并不能满足需求，我们正在设计一套更强大的 BFF 函数写法，让开发者更方便地扩展 BFF 函数。
+普通的 BFF 函数写法有时并不能满足需求，例如业务场景下复杂的 TS 类型需要，EdenX 提供了一种更强大的 BFF 函数写法。
 
-:::note
-敬请期待
-:::
+详细内容可参考 - [创建可扩展的 BFF 函数](/guides/advanced-features/bff/operators)。

package/docs/zh/components/hono.mdx

@@ -0,0 +1,119 @@
+### 获取请求上下文
+
+在 BFF 函数中，有时需要获取请求上下文，来处理更多逻辑。此时，你可以通过 `useHonoContext` 来获取：
+
+```ts title="api/lambda/hello.ts"
+import { useHonoContext } from '@modern-js/plugin-bff/server';
+
+export const get = async () => {
+  const c = useHonoContext();
+  console.info(`access url: ${c.req.url}`);
+  return 'Hello Modern.js';
+};
+```
+
+:::info
+详细内容可以参考 [useHonoContext](/apis/app/runtime/bff/use-hono-context)。
+:::
+
+### 获取 Cookie
+
+在 BFF 函数中获取 Cookie 时，需要通过 `useHonoContext` 获取请求上下文，然后使用 `c.req.header('cookie')` 获取 Cookie 字符串并手动解析：
+
+```ts title="api/lambda/cookies.ts"
+import { Api, Get, useHonoContext } from '@modern-js/plugin-bff/server';
+
+// 解析 Cookie 字符串的辅助函数
+function parseCookies(
+  cookieHeader: string | undefined,
+): Record<string, string> {
+  const cookies: Record<string, string> = {};
+  if (!cookieHeader) return cookies;
+
+  cookieHeader.split(';').forEach(cookie => {
+    const [name, ...rest] = cookie.trim().split('=');
+    if (name) {
+      cookies[name] = rest.join('=');
+    }
+  });
+
+  return cookies;
+}
+
+export const getCookies = Api(Get('/cookies'), async () => {
+  const c = useHonoContext();
+  const cookieHeader = c.req.header('cookie');
+  const cookies = parseCookies(cookieHeader);
+  const token = cookies.token;
+  const sessionId = cookies.sessionId;
+  return {
+    hasToken: !!token,
+    token: token || null,
+    sessionId: sessionId || null,
+  };
+});
+```
+
+:::caution 注意
+`c.req.cookie()` 方法在当前版本中不存在，需要使用 `c.req.header('cookie')` 获取 Cookie 字符串，然后手动解析。
+:::
+
+### 定义 BFF 函数
+
+使用 Hono 作为运行时框架时，可以通过 [Api 函数](/guides/advanced-features/bff/operators.html) 定义接口：
+
+```ts title="api/lambda/user.ts"
+import { Api, Get, Query } from '@modern-js/plugin-bff/server';
+import { z } from 'zod';
+
+const QuerySchema = z.object({
+  id: z.string(),
+});
+
+export const getUser = Api(
+  Get('/user'),
+  Query(QuerySchema),
+  async ({ query }) => {
+    return {
+      id: query.id,
+      name: 'Modern.js',
+      email: 'modernjs@bytedance.com',
+    };
+  },
+);
+```
+
+:::info
+更多关于 Api 函数和操作符的详细内容，可以参考 [创建可扩展的 BFF 函数](/guides/advanced-features/bff/operators.html)。
+:::
+
+### 使用中间件
+
+Hono 支持丰富的中间件生态，可以在 BFF 函数中使用中间件：
+
+```ts title="api/lambda/user.ts"
+import { Api, Get, Middleware } from '@modern-js/plugin-bff/server';
+
+export const getUser = Api(
+  Get('/user'),
+  Middleware(async (c, next) => {
+    // 在中间件中可以访问 Hono 的 Context
+    c.res.headers.set('X-Powered-By', 'Modern.js');
+    await next();
+  }),
+  async () => {
+    return {
+      name: 'Modern.js',
+      email: 'modernjs@bytedance.com',
+    };
+  },
+);
+```
+
+:::info
+更多关于中间件的详细内容，可以参考 [创建可扩展的 BFF 函数](/guides/advanced-features/bff/operators.html#中间件-middleware)。
+:::
+
+### 更多 Hono 文档
+
+更多关于 Hono 的详细信息可查看 [Hono 官方文档](https://hono.dev/)。

package/docs/zh/components/init-app.mdx

@@ -1,38 +1,60 @@
-`@modern-js/create` 会提供一个可交互的问答界面，根据结果初始化项目，按照默认的选择进行初始化：
+Modern.js 提供了 `@modern-js/create` 工具来创建项目，不需要全局安装，直接使用 `npx` 按需运行即可。
+
+你可以在已有的空目录来创建项目：
+
+```bash
+mkdir myapp && cd myapp
+npx @modern-js/create@latest
+```
+
+也可以直接用新目录创建项目：
 
 ```bash
-? 请选择开发语言 TS
-? 请选择包管理工具 pnpm
+npx @modern-js/create@latest myapp
 ```
 
-在生成项目后，Modern.js 会自动安装依赖、创建 git 仓库。
+`@modern-js/create` 会直接创建应用，不再提供问答界面：
 
 ```bash
-[INFO] 依赖自动安装成功
-[INFO] git 仓库初始化成功
-[INFO] 创建成功！
-可在新项目的目录下运行以下命令：
-pnpm run dev          # 启动开发服务器
-pnpm run build        # 构建生产环境产物
-pnpm run serve        # 启动生产环境服务
-pnpm run lint         # 运行 ESLint 并自动修复问题
-pnpm run new          # 启用可选功能或创建项目要素
+🚀 欢迎使用 Modern.js
+
+📦 正在创建项目 "myapp"...
+
+✨ 项目创建成功！🎉
+
+📋 接下来你可以执行以下命令：
+
+📁 进入项目目录：
+
+  cd myapp
+
+🔧 初始化 Git 仓库：
+
+  git init
+
+📥 安装项目依赖：
+
+  pnpm install
+
+⚡ 启动开发服务器：
+
+  pnpm start
 ```
 
 现在，项目结构如下：
 
 ```
 .
-├── node_modules
+├── biome.json
+├── modern.config.ts
+├── package.json
+├── README.md
 ├── src
 │   ├── modern-app-env.d.ts
+│   ├── modern.runtime.ts
 │   └── routes
 │       ├── index.css
 │       ├── layout.tsx
 │       └── page.tsx
-├── modern.config.ts
-├── package.json
-├── pnpm-lock.yaml
-├── README.md
 └── tsconfig.json
 ```

package/docs/zh/components/international/custom-instance-code.mdx

@@ -0,0 +1,16 @@
+```ts
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import i18next from 'i18next';
+
+// 创建自定义实例
+const customI18n = i18next.createInstance({
+  // 自定义配置
+});
+
+export default defineRuntimeConfig({
+  i18n: {
+    i18nInstance: customI18n,
+  },
+});
+```
+

package/docs/zh/components/international/init-options-desc.mdx

@@ -0,0 +1 @@
+`initOptions` 会传递给 i18next 的 `init` 方法，支持所有 i18next 配置选项：

package/docs/zh/components/international/install-command.mdx

@@ -0,0 +1,23 @@
+```bash
+pnpm add @modern-js/plugin-i18n i18next react-i18next
+```
+
+:::tip 版本一致性
+请确保 `@modern-js/plugin-i18n` 的版本与项目中 `@modern-js/app-tools` 的版本一致。所有 Modern.js 官方包都使用统一的版本号发布，版本不匹配可能会导致兼容性问题。
+
+请先检查 `@modern-js/app-tools` 的版本，然后安装相同版本的 `@modern-js/plugin-i18n`：
+
+```bash
+# 检查当前 @modern-js/app-tools 的版本
+pnpm list @modern-js/app-tools
+
+# 安装相同版本的 @modern-js/plugin-i18n
+pnpm add @modern-js/plugin-i18n@<version> i18next react-i18next
+```
+
+:::
+
+:::info
+`i18next` 和 `react-i18next` 是 peer dependencies，需要手动安装。
+
+:::

package/docs/zh/components/international/instance-code.mdx

@@ -0,0 +1,26 @@
+创建 `src/modern.runtime.ts` 文件并配置 i18n 运行时选项：
+
+```ts
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import i18next from 'i18next';
+
+// 建议创建一个新的 i18next 实例，避免使用全局默认实例
+const i18nInstance = i18next.createInstance();
+
+export default defineRuntimeConfig({
+  i18n: {
+    i18nInstance: i18nInstance,
+    initOptions: {
+      fallbackLng: 'en',
+      supportedLngs: ['zh', 'en'],
+    },
+  },
+});
+```
+
+:::info
+`modern.runtime.ts` 是运行时配置文件，用于配置 i18next 的初始化选项。即使是最基础的配置，也建议创建此文件以确保插件正常工作。
+
+建议使用 `i18next.createInstance()` 创建一个新的实例，而不是直接使用默认导出的 `i18next`，这样可以避免全局状态污染，并确保每个应用都有独立的 i18n 实例。
+
+:::

package/docs/zh/components/international/introduce.mdx

@@ -0,0 +1,2 @@
+`@modern-js/plugin-i18n` 是 Modern.js 的国际化插件，基于
+[i18next](https://www.i18next.com/) 和 [react-i18next](https://react.i18next.com/) 构建，为 Modern.js 应用提供完整的国际化解决方案。

package/docs/zh/components/module-federation.mdx

@@ -1,7 +1,7 @@
-模块联邦（Module Federation，简称 MF）是 Webpack 的一个特性。它允许 JavaScript 应用从另一个应用动态加载代码，并在此过程中共享依赖关系。如果使用联邦模块的应用缺少联邦代码所需的依赖项，Webpack 将从该联邦的构建源下载缺失的依赖项。
+模块联邦（Module Federation，简称 MF）是一种让多个 JavaScript 应用可以共享代码和资源的技术方案。它类似于服务端的微服务架构，允许你将大型应用拆分成多个独立的小应用，这些小应用可以独立开发、测试和部署，同时还能在运行时动态加载其他应用的模块。
 
-这使得可以创建微前端风格的应用程序，多个系统可以共享代码，并在不需要重新构建整个应用程序的情况下进行动态更新。
+使用模块联邦可以解决多个前端应用之间代码重复的问题。传统方式下，如果多个应用需要使用相同的组件或工具函数，需要在每个应用中重复安装这些代码，导致代码重复、维护成本高、应用体积变大。使用模块联邦后，你可以将公共代码放在一个应用中，其他应用按需动态加载，实现代码共享，减少重复。
 
-Modern.js 提供了一个 Module Federation 的示例项目，请参考 [module-federation-examples - modernjs](https://github.com/module-federation/module-federation-examples/tree/db5bdbeee56f779999a2c591fc553eb94eb20b36/modernjs)。
+Module Federation 2.0 支持 [Rspack](https://rspack.rs/) 构建工具，并提供了动态类型提示、Manifest、Federation Runtime、运行时插件系统和 Chrome Devtools 等增强功能，提供更好的开发体验和调试能力。你可以访问 [Module Federation 官方文档](https://module-federation.io/zh/index.html) 了解更多信息。
 
-你也可以阅读 [webpack Module Federation 文档](https://webpack.docschina.org/concepts/module-federation/) 来了解更多概念。
+Modern.js 提供了一个 Module Federation 的示例项目，请参考 [module-federation-examples - modernjs](https://github.com/module-federation/module-federation-examples/tree/db5bdbeee56f779999a2c591fc553eb94eb20b36/modernjs)。

package/docs/zh/components/nodeVersion.mdx

@@ -1,4 +1,4 @@
-在开始使用前，你需要安装 [Node.js](https://nodejs.org/)，并保证 Node.js 版本不低于 18.20.8，**我们推荐使用 Node.js 22 的 LTS 版本**。
+在开始使用前，你需要安装 [Node.js](https://nodejs.org/)，并保证 Node.js 版本不低于 v20.19.5，**我们推荐使用 Node.js 22 的 LTS 版本**。
 
 你可以通过以下命令检查当前使用的 Node.js 版本：
 
@@ -6,9 +6,9 @@
 node -v
 ```
 
-如果你当前的环境中尚未安装 Node.js，或是安装的版本低于 18，可以通过 [nvm](https://github.com/nvm-sh/nvm) 或 [fnm](https://github.com/Schniz/fnm) 安装需要的版本。
+如果你当前的环境中尚未安装 Node.js，或是安装的版本低于 v20.19.5，可以通过 [nvm](https://github.com/nvm-sh/nvm) 或 [fnm](https://github.com/Schniz/fnm) 安装需要的版本。
 
- 下面是通过 nvm 安装 Node.js 22 LTS 版本的例子：
+下面是通过 nvm 安装 Node.js 22 LTS 版本的例子：
 
 ```bash
 # 安装 Node.js 22 的长期支持版本
@@ -26,7 +26,3 @@ nvm 和 fnm 都是 Node.js 版本管理工具。相对来说，nvm 较为成熟
 :::
 
 此外，在安装 nvm 或 fnm 后，然后只要仓库根目录下有内容为 `lts/jod` 的 `.nvmrc` 文件，进入这个仓库时就会自动安装或切换到正确的 Node.js 版本。
-
-:::warning
-Modern.js 目前仍支持 Node 16，但会在 2025 年 6 月正式终止对 Node.js 16 的支持，为确保您的项目顺利过渡，请在 2025 年 6 月前完成 Node.js 版本升级。
-:::