@modern-js/main-doc 2.69.4 → 3.0.0-alpha.0

package/docs/en/plugin/runtime-plugins/migration.mdx

@@ -2,11 +2,11 @@
 
 ### Migration Background
 
-The Modern.js plugin system is constantly evolving.  To provide a clearer API and more powerful features, we've optimized the definition and usage of Runtime plugins. While the old plugin syntax is still partially compatible, we strongly recommend migrating according to this guide to take full advantage of the new plugin system.
+The Modern.js plugin system is constantly evolving. To provide a clearer API and more powerful features, we've optimized the definition and usage of Runtime plugins. While the old plugin syntax is still partially compatible, we strongly recommend migrating according to this guide to take full advantage of the new plugin system.
 
 ### Migration Steps Overview
 
-1.  **Update Plugin Type Definition:** Replace the `Plugin` type with `RuntimePluginFuture`.
+1.  **Update Plugin Type Definition:** Replace the `Plugin` type with `RuntimePlugin`.
 2.  **Adjust Hook Invocation:** Migrate from the `return hooks` pattern to direct `api.xxx` calls.
 3.  **Replace Changed APIs:** Refer to the detailed API mapping table and update your code.
 
@@ -23,12 +23,12 @@ import type { Plugin } from '@modern-js/runtime';
 const plugin: Plugin = { ... };
 
 // New Syntax
-import type { RuntimePluginFuture } from '@modern-js/runtime';
+import type { RuntimePlugin } from '@modern-js/runtime';
 
-const plugin: RuntimePluginFuture = { ... };
+const plugin: RuntimePlugin = { ... };
 ```
 
-**Explanation:** The `RuntimePluginFuture` type is the standard definition for new plugins. It provides better type inference and a clearer API structure.
+**Explanation:** The `RuntimePlugin` type is the standard definition for new plugins. It provides better type inference and a clearer API structure.
 
 #### Adjust Hook Invocation
 
@@ -38,15 +38,19 @@ The new plugin system recommends using the `api` object to directly call Hooks.
 // Old Syntax (return hooks)
 {
   setup: () => ({
-    beforeRender({ req, res }) { /*...*/ }
-  })
+    beforeRender({ req, res }) {
+      /*...*/
+    },
+  });
 }
 
 // New Syntax (api.xxx)
 {
   setup: api => {
-    api.onBeforeRender(({ req, res }) => { /*...*/ })
-  }
+    api.onBeforeRender(({ req, res }) => {
+      /*...*/
+    });
+  };
 }
 ```
 
@@ -54,31 +58,36 @@ The new plugin system recommends using the `api` object to directly call Hooks.
 
 #### Replace Changed APIs
 
-To maintain API consistency and clarity, we've adjusted the names of some APIs.  Additionally, the `hoc` and `init` Hooks have been removed. Please use the new Hooks as replacements. The table below lists all changed APIs and their old and new counterparts:
+To maintain API consistency and clarity, we've adjusted the names of some APIs. Additionally, the `hoc` and `init` Hooks have been removed. Please use the new Hooks as replacements. The table below lists all changed APIs and their old and new counterparts:
 
-| Old API       | New API           | Description                                                                                                                                                                                                                                                                                                 |
-| :------------ | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `beforeRender` | `onBeforeRender`  | Executed before application rendering.                                                                                                                                                                                                                                                                        |
-| `hoc`         | `wrapRoot`        | **Important Change:** Used to wrap the root component, achieving the functionality of a Higher-Order Component (HOC).  Make sure to pass props to the original component.                                                                                                                                    |
-| `init`        | `onBeforeRender`  | **Important Change:**  Execute initialization logic before application rendering. This replaces the previous `init` hook. Use `onBeforeRender` to perform any setup or initialization tasks that were previously done in `init`.  This provides a single, consistent point for pre-rendering logic. |
+| Old API        | New API          | Description                                                                                                                                                                                                                                                                                       |
+| :------------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `beforeRender` | `onBeforeRender` | Executed before application rendering.                                                                                                                                                                                                                                                            |
+| `hoc`          | `wrapRoot`       | **Important Change:** Used to wrap the root component, achieving the functionality of a Higher-Order Component (HOC). Make sure to pass props to the original component.                                                                                                                          |
+| `init`         | `onBeforeRender` | **Important Change:** Execute initialization logic before application rendering. This replaces the previous `init` hook. Use `onBeforeRender` to perform any setup or initialization tasks that were previously done in `init`. This provides a single, consistent point for pre-rendering logic. |
 
 **Explanation:**
+
 - `onBeforeRender` replaces both the original `beforeRender` and `init`, used for pre-rendering logic and initialization, respectively.
-- `wrapRoot` replaces `hoc` and is used to implement higher-order component functionality.  It's crucial to pass props correctly when using `wrapRoot`.
+- `wrapRoot` replaces `hoc` and is used to implement higher-order component functionality. It's crucial to pass props correctly when using `wrapRoot`.
 
 **`wrapRoot` Usage Example:**
 
 ```typescript
 {
   setup: api => {
-    api.wrapRoot((App) => {
-      const AppWrapper = (props) => {
+    api.wrapRoot(App => {
+      const AppWrapper = props => {
         // Ensure props are passed to the original component
-        return <Provider value={xx}><App {...props}/></Provider>;
+        return (
+          <Provider value={xx}>
+            <App {...props} />
+          </Provider>
+        );
       };
       return AppWrapper;
     });
-  }
+  };
 }
 ```
 

package/docs/en/tutorials/_meta.json

@@ -1,14 +1,4 @@
 [
-  {
-    "type": "dir",
-    "name": "foundations",
-    "label": "foundations"
-  },
-  {
-    "type": "dir",
-    "name": "first-app",
-    "label": "first-app"
-  },
   {
     "type": "dir",
     "name": "examples",

package/docs/en/tutorials/examples/csr-auth.mdx

@@ -4,7 +4,7 @@ title: Route Authorization
 
 # Route Authorization
 
-Modern.js defaults to the convention-based routing based on React Router 6. For more details, please refer to [Routing](/guides/basic-features/routes.html#routing-scheme).
+Modern.js defaults to the convention-based routing based on React Router v7. For more details, please refer to [Routing](/guides/basic-features/routes/routes#routing).
 
 In a web application, if there are multiple routes, we may need to authorize access to some of them before accessing them. For example, in the following scenario:
 

package/docs/en/tutorials/foundations/introduction.mdx

@@ -3,36 +3,20 @@ title: Introduction
 sidebar_position: 1
 ---
 
-# Introduction
+# Modern.js Example Library
 
-Welcome to Modern.js tutorials!
+Welcome to Modern.js Example Library! Here you'll find practical code examples to help you get started with Modern.js quickly.
 
-After reading this section, you will have an initial understanding of Modern.js and use Modern.js to create your first application.
+If you're new to Modern.js, we recommend reading the [Modern.js Introduction](/guides/get-started/introduction) first.
 
-## What is Modern.js?
-
-If you don't know Modern.js yet, please can read [Modern.js Introduction](/guides/get-started/introduction) first.
-
-## Tutorial
-
-We have prepared a tutorial on creating a "contact list app" that you can follow step by step to create an app and learn about the following practices in Modern.js:
-
-- Creating a project
-- Using the antd component library
-- Integrating Tailwind CSS
-- Client-side routing
-- Data fetching
-- State Management
-- Container components
-- New entry
-- ...
-
-## Case Studies
-
-We offer some commonly used case studies for your reference during the development process. Here you can find some usage patterns of the feature combinations provided by Modern.js. We will continue to improve the case studies here.
+## 📚 Example List
 
 import ExampleList from '@site-docs-en/components/turtorials-example-list';
 
 <ExampleList />
 
-Let's start from [creating a project](tutorials/first-app/c01-start) now!
+---
+
+## 💡 Contribute Examples
+
+If you have good examples to share, feel free to submit a PR on [GitHub](https://github.com/web-infra-dev/modern.js)!

package/docs/zh/{_meta.json → _nav.json}

@@ -1,32 +1,36 @@
 [
   {
-    "text": "guide",
+    "text": "指南",
     "link": "/guides/get-started/introduction",
     "activeMatch": "/guides/"
   },
   {
-    "text": "configure",
+    "text": "配置",
     "link": "/configure/app/usage",
     "activeMatch": "/configure/"
   },
   {
-    "text": "plugin-menu",
+    "text": "插件",
     "link": "/plugin/introduction",
     "activeMatch": "/plugin/"
   },
   {
-    "text": "apis",
+    "text": "API",
     "link": "/apis/app/commands",
     "activeMatch": "/apis/"
   },
   {
-    "text": "tutorials",
+    "text": "示例",
     "link": "/tutorials/foundations/introduction",
     "activeMatch": "/tutorials/"
   },
   {
-    "text": "community",
+    "text": "社区",
     "link": "/community/showcase",
     "activeMatch": "/community/"
+  },
+  {
+    "text": "Modern.js 2.x 文档",
+    "link": "https://modernjs.dev/zh/guides/get-started/introduction.html"
   }
 ]

package/docs/zh/apis/app/commands.mdx

@@ -108,7 +108,7 @@ info    Production file sizes:
 
 `modern new` 命令用于在已有项目中添加项目元素。
 
-比如添加应用入口、启用一些可选功能如 Tailwind CSS、微前端开发模式等。
+比如添加应用入口、启用一些可选功能如 BFF、微前端开发模式等。
 
 ```bash
 Usage: modern new [options]
@@ -142,8 +142,7 @@ $ npx modern new
 $ npx modern new
 ? 请选择你想要的操作 启用可选功能
 ? 请选择功能名称 (Use arrow keys)
-❯ 启用 「Tailwind CSS」 支持
-  启用「BFF」功能
+❯ 启用「BFF」功能
   启用「微前端」模式
 ```
 

package/docs/zh/apis/app/hooks/src/entry.mdx

@@ -5,10 +5,6 @@ sidebar_position: 4
 
 # entry.[tj]sx
 
-:::info
-使用该文件需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry)。
-:::
-
 通常情况下[`routes/`](/apis/app/hooks/src/routes.html) 和 [`App.[tj]sx`](/apis/app/hooks/src/app) 钩子文件已经能满足我们的需求，当我们需要在组件渲染之前添加自定义行为或者完全接管 webpack 打包入口时，可以在 `src` 或者入口目录下放置 `entry.[tj]s`。下面分两种情况进行讨论。
 
 ## 在组件渲染前添加自定义行为
@@ -22,7 +18,7 @@ import { render } from '@modern-js/runtime/browser';
 const ModernRoot = createRoot();
 
 async function beforeRender() {
-   // todo
+  // todo
 }
 
 beforeRender().then(() => {

package/docs/zh/apis/app/hooks/src/entry.server.mdx

@@ -5,10 +5,6 @@ sidebar_position: 5
 
 # entry.server.[tj]sx
 
-:::info
-使用该文件需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry)。
-:::
-
 当项目开启 `server.ssr` 时，Modern.js 生成一个默认的 Server-Side 入口。示例代码如下：
 
 ```tsx title="entry.server.tsx"
@@ -35,7 +31,10 @@ export default createRequestHandler(handleRequest);
 如果用户需自定义 Server-Side Rendering 入口，可以在 `src/entry.server.ts`、`src/{entryName}/entry.server.ts` 中自定义 server 入口。
 
 ```tsx title="src/entry.server.tsx"
-import { renderString, createRequestHandler } from '@modern-js/runtime/ssr/server';
+import {
+  renderString,
+  createRequestHandler,
+} from '@modern-js/runtime/ssr/server';
 import type { HandleRequest } from '@modern-js/runtime/ssr/server';
 
 const handleRequest: HandleRequest = async (request, ServerRoot, options) => {

package/docs/zh/apis/app/hooks/src/routes.mdx

@@ -4,7 +4,7 @@ sidebar_position: 2
 ---
 # routes/
 
-应用使用[约定式路由](guides/basic-features/routes.html#约定式路由)时的入口标识。
+应用使用[约定式路由](/guides/basic-features/routes/routes#约定式路由)时的入口标识。
 
 约定式路由以 `routes/` 为约定的入口， 会分析 `src/routes` 目录下的文件得到客户端路由配置。
 
@@ -85,6 +85,6 @@ export default () => {
 ```
 
 :::note
-`<Outlet>` 是 React Router 6 中新的 API，详情可以查看 [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
+`<Outlet>` 是 React Router v7 中新的 API，详情可以查看 [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
 
 :::

package/docs/zh/apis/app/runtime/_meta.json

@@ -5,24 +5,12 @@
     "label": "Core",
     "collapsed": true
   },
-  {
-    "type": "dir",
-    "name": "app",
-    "label": "App",
-    "collapsed": true
-  },
   {
     "type": "dir",
     "name": "router",
     "label": "Router",
     "collapsed": true
   },
-  {
-    "type": "dir",
-    "name": "model",
-    "label": "Model",
-    "collapsed": true
-  },
   {
     "type": "dir",
     "name": "ssr",
@@ -35,12 +23,6 @@
     "label": "BFF",
     "collapsed": true
   },
-  {
-    "type": "dir",
-    "name": "web-server",
-    "label": "Web Server",
-    "collapsed": true
-  },
   {
     "type": "dir",
     "name": "utility",

package/docs/zh/apis/app/runtime/bff/use-hono-context.mdx

@@ -9,7 +9,7 @@ title: useHonoContext
 ## 使用姿势
 
 ```ts
-import { useHonoContext } from '@modern-js/plugin-bff/hono';
+import { useHonoContext } from '@modern-js/plugin-bff/server';
 ```
 
 ## 函数签名
@@ -21,7 +21,7 @@ import { useHonoContext } from '@modern-js/plugin-bff/hono';
 开发者可以通过 `context` 获取更多的请求信息，例如设置响应头：
 
 ```ts
-import { useHonoContext } from '@modern-js/plugin-bff/hono';
+import { useHonoContext } from '@modern-js/plugin-bff/server';
 
 export async function get() {
   const c = useHonoContext();

package/docs/zh/apis/app/runtime/utility/css-in-js.mdx

@@ -1,6 +1,7 @@
 ---
 title: CSS-In-JS API
 ---
+
 # CSS-In-JS API
 
 使用 Style Component 来编写组件 CSS。
@@ -8,7 +9,7 @@ title: CSS-In-JS API
 ## 使用姿势
 
 ```ts
-import styled from '@modern-js/runtime/styled';
+import styled from '@modern-js/plugin-styled-components/styled';
 ```
 
 ## 函数签名
@@ -18,7 +19,7 @@ import styled from '@modern-js/runtime/styled';
 ## 示例
 
 ```tsx
-import styled from '@modern-js/runtime/styled';
+import styled from '@modern-js/plugin-styled-components/styled';
 
 const Button = styled.button`
   background: palevioletred;

package/docs/zh/community/blog/v2-release-note.mdx

@@ -232,8 +232,6 @@ Modern.js 中的部分代码实现参考了社区中的开源项目，我们对
 
 - `@modern-js/bundle-require`: 修改自 [bundle-require](https://github.com/egoist/bundle-require)。
 - `@modern-js/plugin`: hook API 的实现参考了 [farrow-pipeline](https://github.com/farrow-js/farrow/tree/master/packages/farrow-pipeline)。
-- `@modern-js/builder`: moduleScope 和 fileSize 插件参考了 [create-react-app](https://github.com/facebook/create-react-app)，TsConfigPathsPlugin 参考了 [tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin)，generateMetaTags 函数参考了 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)。
-- `@modern-js/plugin-testing`: jest runner 参考了 [jest-cli](https://github.com/facebook/jest/blob/fdc74af37235354e077edeeee8aa2d1a4a863032/packages/jest-cli/src/cli/index.ts#L21)。
 - `@modern-js/plugin-data-loader`: 部分实现参考了 [remix](https://github.com/remix-run/remix)。
 
 ## 最后

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-upload.mdx

@@ -5,7 +5,7 @@ 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 +15,7 @@ export const post = async ({ formData }: {formData: Record<string, any>}) => {
   };
 };
 ```
+
 :::tip
 通过接口处理函数入参中的 `formData` 可以获取客户端上传的文件。值为 `Object`，key 为上传时的字段名。
 :::
@@ -22,9 +23,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 +35,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 +51,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 +97,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/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,52 @@
-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/*"]
+    }
+  }
+}
+```