@modern-js/main-doc 2.65.4 → 2.66.0

package/docs/zh/plugin/cli-plugins/life-cycle.mdx

@@ -0,0 +1,139 @@
+# 生命周期
+
+import Mermaid from '@site/src/components/Mermaid';
+
+<Mermaid>
+{`
+flowchart TD
+    init{{"CLI 初始化"}}
+    env(初始化环境变量)
+    load_config(加载用户配置文件)
+    cli_plugin(加载 CLI 插件)
+    registry_hooks(注册 Hooks 函数<br><sub>执行插件 setup 函数，注册插件中定义的 Hook, 插件 setup 中逻辑也会在这里执行</sub>)
+
+    app_tools{{"app-tools"}}
+
+    config(config)
+    onPrepare(onPrepare)
+    addCommand(addCommand)
+    addWatchFiles(addWatchFiles)
+    onFileChanged(onFileChanged)
+    onBeforeExit(onBeforeExit<br><sub>SIGINT, SIGTERM, unhandledRejection, uncaughtException 事件触发</sub>)
+
+    onBeforeDev(onBeforeDev)
+    onBeforeRestart(onBeforeRestart<br><sub>修改的文件需要重启服务时触发</sub>)
+    onBeforeBuild(onBeforeBuild<br><sub>在独立 BFF 项目时触发</sub>)
+    onAfterBuild(onAfterBuild<br><sub>在独立 BFF 项目时触发</sub>)
+    modifyServerRoutes(modifyServerRoutes)
+    modifyHtmlPartials(modifyHtmlPartials)
+
+    onPrepare_fork(onPrepare)
+    addCommand_fork(addCommand)
+    onFileChanged_fork(onFileChanged)
+
+    registry_rsbuild_hooks(注册 rsbuild Hooks<br><sub>这里只是注册 rsbuild 的 Hook，具体的执行时机是由 rsbuild 的插件机制决定的</sub>)
+
+    modifyBundlerChain(modifyBundlerChain)
+    modifyRsbuildConfig(modifyRsbuildConfig)
+    modifyRspackConfig(modifyRspackConfig)
+    modifyWebpackChain(modifyWebpackChain)
+    modifyWebpackConfig(modifyWebpackConfig)
+
+    onBeforeBuild_rsbuild(onBeforeBuild)
+    onAfterBuild_rsbuild(onAfterBuild)
+    onDevCompileDone(onDevCompileDone)
+    onBeforeCreateCompiler(onBeforeCreateCompiler)
+    onAfterCreateCompiler(onAfterCreateCompiler)
+    onAfterDev(onAfterDev<br><sub>对应 rsbuild 的  onAfterStartDevServer Hook</sub>)
+
+    dev[/dev/]
+    build[/build/]
+    extra_command[/.../]
+
+    dev_fork[/dev/]
+    build_fork[/build/]
+    serve[/serve/]
+    deploy[/deploy/]
+    inspect[/inspect/]
+    upgrade[/upgrade/]
+
+    onPrepare_fork --> modifyServerRoutes
+    modifyServerRoutes --> modifyHtmlPartials
+    modifyHtmlPartials --> registry_rsbuild_hooks
+    registry_rsbuild_hooks --> modifyBundlerChain
+    modifyBundlerChain --> modifyRsbuildConfig
+    modifyRsbuildConfig --> modifyRspackConfig
+    modifyRspackConfig --> modifyWebpackChain
+    modifyWebpackChain --> modifyWebpackConfig
+    registry_rsbuild_hooks --> onBeforeBuild_rsbuild
+    onBeforeBuild_rsbuild --> onAfterBuild_rsbuild
+    onAfterBuild_rsbuild --> onDevCompileDone
+    onDevCompileDone --> onBeforeCreateCompiler
+    onBeforeCreateCompiler --> onAfterCreateCompiler
+    onAfterCreateCompiler --> onAfterDev
+
+    dev_fork --> onBeforeDev
+    onBeforeDev --> onFileChanged_fork
+    onFileChanged_fork --> onBeforeRestart
+
+    build_fork --> onBeforeBuild
+    onBeforeBuild --> onAfterBuild
+
+    app_tools --- spacer5[ ] --- spacer6[ ] --- spacer7[ ] --- spacer8[ ] --- spacer9[ ] --> onPrepare_fork
+    onPrepare_fork --> addCommand_fork
+    addCommand_fork --> dev_fork
+    addCommand_fork --> build_fork
+    addCommand_fork --> serve
+    addCommand_fork --> deploy
+    addCommand_fork --> inspect
+    addCommand_fork --> upgrade
+
+    init --> env
+    env --> load_config
+    load_config --> cli_plugin
+    cli_plugin --> registry_hooks
+
+    registry_hooks --> config
+    config --> onPrepare
+    onPrepare --> addCommand
+
+    addCommand --> dev
+    addCommand --> build
+    addCommand --> extra_command
+
+    dev --> addWatchFiles
+    addWatchFiles --> onFileChanged
+
+    onFileChanged --> onBeforeExit
+    build --- spacer[ ] --- spacer2[ ] --> onBeforeExit
+    extra_command --- spacer3[ ] --- spacer4[ ] --> onBeforeExit
+
+    style init fill:#FDE68A;
+    style app_tools fill:#FDE68A;
+    style env stroke-dasharray:5 5,fill:#86EFAC;
+    style registry_rsbuild_hooks stroke-dasharray:5 5,fill:#9CA3AF;
+    style load_config stroke-dasharray:5 5,fill:#86EFAC;
+    style cli_plugin stroke-dasharray:5 5,fill:#86EFAC;
+    style registry_hooks stroke-dasharray:5 5,fill:#9CA3AF;
+
+    style dev fill:#7DD3FC;
+    style build fill:#7DD3FC;
+    style extra_command fill:#7DD3FC;
+    style dev_fork fill:#7DD3FC;
+    style build_fork fill:#7DD3FC;
+    style serve fill:#7DD3FC;
+    style upgrade fill:#7DD3FC;
+    style deploy fill:#7DD3FC;
+    style inspect fill:#7DD3FC;
+
+    style spacer fill:none,stroke:none,height:0px;
+    style spacer2 fill:none,stroke:none,height:0px;
+    style spacer3 fill:none,stroke:none,height:0px;
+    style spacer4 fill:none,stroke:none,height:0px;
+    style spacer5 fill:none,stroke:none,height:0px;
+    style spacer6 fill:none,stroke:none,height:0px;
+    style spacer7 fill:none,stroke:none,height:0px;
+    style spacer8 fill:none,stroke:none,height:0px;
+    style spacer9 fill:none,stroke:none,height:0px;
+`}
+</Mermaid>

package/docs/zh/plugin/cli-plugins/migration.mdx

@@ -0,0 +1,98 @@
+# 插件迁移
+
+### 迁移背景
+
+Modern.js 插件系统在不断演进，为了提供更清晰的 API 和更强大的功能，我们对 CLI 插件的定义和使用方式进行了优化。虽然旧版插件写法仍被兼容，但我们强烈建议您按照本指南进行迁移，以充分利用新版插件系统的优势。
+
+### 迁移步骤总览
+
+1. **更新插件类型定义**：将 `CliPlugin` 类型替换为 `CliPluginFuture`。
+2. **调整 Hooks 调用方式**：从 `return hooks` 模式迁移到 `api.xxx` 直接调用。
+3. **替换已变更的 API**：参照详细的 API 映射表，更新您的代码。
+
+### 详细迁移步骤
+
+#### 更新插件类型定义
+
+这是迁移的第一步，也是最关键的一步。它确保您的插件能够与新版插件系统正确交互。
+
+```typescript
+// 旧版写法
+import type { CliPlugin, AppTools } from '@modern-js/app-tools';
+
+const plugin: CliPlugin<AppTools<'shared'>> = { ... };
+
+// 新版写法
+import type { CliPluginFuture, AppTools } from '@modern-js/app-tools';
+
+const plugin: CliPluginFuture<AppTools<'shared'>> = { ... };
+```
+
+**说明：** `CliPluginFuture` 类型是新版插件的标准定义，它带来了更好的类型推断和更清晰的 API 结构。
+
+#### 调整 Hooks 调用方式
+
+新版插件系统推荐使用 `api` 对象直接调用 Hooks，这种方式更直观、更易于维护。
+
+```typescript
+// 旧版写法 (return hooks)
+{
+  setup: () => ({
+    commands({ program }) { /*...*/ }
+  })
+}
+
+// 新版写法 (api.xxx)
+{
+  setup: api => {
+    api.addCommand(({ program }) => { /*...*/ })
+  }
+}
+```
+
+**说明：** `api` 对象提供了所有可用的 Hooks 和工具方法。
+
+#### 替换已变更的 API
+
+为了保持 API 的一致性和清晰性，我们对部分 API 的名称进行了调整。下表列出了所有变更的 API 及其新旧对应关系：
+
+| 旧版 API                 | 新版 API                      | 说明                                                                                                                                                                                                                                                                                                                                                      |
+| :----------------------- | :---------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `useAppContext`          | `getAppContext`               | 获取应用上下文信息。                                                                                                                                                                                                                                                                                                                                       |
+| `useConfigContext`       | `getConfig`                  | 获取用户配置文件中的配置。                                                                                                                                                                                                                                                                                                                                    |
+| `useResolvedConfigContext` | `getNormalizedConfig`        | 获取经过插件处理后的最终配置。                                                                                                                                                                                                                                                                                                                                 |
+| `beforeConfig`           | (直接在 `setup` 中定义)     | 不再需要单独的 `beforeConfig` Hook，直接在 `setup` 函数中编写相关逻辑即可。                                                                                                                                                                                                                                                                                        |
+| `prepare`                | `onPrepare`                   | 运行主流程的前置准备阶段。                                                                                                                                                                                                                                                                                                                                    |
+| `afterPrepare`           | `onAfterPrepare` (不推荐)   | 在 `onPrepare` 之后执行，但可能在未来版本中废弃。建议将逻辑合并到 `onPrepare` 中。                                                                                                                                                                                                                                                                              |
+| `beforePrintInstructions`| `onBeforePrintInstructions`   | 在打印日志信息前执行。                                                                                                                                                                                                                                                                                                                                    |
+| `commands`               | `addCommand`                  | 添加新的 CLI 命令。                                                                                                                                                                                                                                                                                                                                       |
+| `watchFiles`             | `addWatchFiles`               | 添加需要监听的文件。                                                                                                                                                                                                                                                                                                                                       |
+| `fileChange`             | `onFileChanged`               | 监听文件变化事件。                                                                                                                                                                                                                                                                                                                                       |
+| `beforeCreateCompiler`   | `onBeforeCreateCompiler`      | 创建编译器前执行。                                                                                                                                                                                                                                                                                                                                       |
+| `afterCreateCompiler`    | `onAfterCreateCompiler`       | 创建编译器后执行。                                                                                                                                                                                                                                                                                                                                       |
+| `beforeBuild`            | `onBeforeBuild`               | 构建前执行。                                                                                                                                                                                                                                                                                                                                       |
+| `afterBuild`             | `onAfterBuild`                | 构建后执行。                                                                                                                                                                                                                                                                                                                                       |
+| `beforeDev`              | `onBeforeDev`                 | 运行 `dev` 命令前执行。                                                                                                                                                                                                                                                                                                                                   |
+| `afterDev`               | `onDevCompileDone`            | `dev` 命令编译完成后执行。                                                                                                                                                                                                                                                                                                                                 |
+| `beforeExit`             | `onBeforeExit`                | 进程退出前执行。                                                                                                                                                                                                                                                                                                                                       |
+| `htmlPartials`           | `modifyHtmlPartials`          | 修改 HTML 模板片段。                                                                                                                                                                                                                                                                                                                                      |
+
+**说明：** 请务必仔细检查您的代码，确保所有旧版 API 都已替换为新版 API。
+
+### 常见问题解答
+
+**Q: 迁移后，我的插件还能正常工作吗？**
+
+A: 只要您按照本指南正确完成了所有步骤，您的插件应该能够正常工作。如果您遇到任何问题，请查阅 Modern.js 的官方文档或寻求社区支持。
+
+**Q: 我必须立即迁移我的插件吗？**
+
+A: 虽然旧版插件写法仍然兼容，但我们强烈建议您尽快迁移。新版插件系统提供了更好的性能和更丰富的功能，长期来看，迁移是值得的。
+
+**Q: 我可以在哪里找到更多关于新版插件系统的信息？**
+
+A: 请查阅 Modern.js 的官方文档，特别是关于插件系统的部分。您也可以参考其他已迁移的插件示例，了解最佳实践。
+
+### 总结
+
+通过这份详细的迁移指南，我们希望能够帮助您顺利地将您的 CLI 插件迁移到 Modern.js 的新版插件系统。如果您在迁移过程中遇到任何问题，请随时向我们寻求帮助。

package/docs/zh/plugin/introduction.mdx

@@ -1,65 +1,137 @@
-# 插件
+# 插件介绍
 
-在 Modern.js 中目前可以直接使用两种插件，分别是 Modern.js 框架插件和 Rsbuild 构建插件。
+Modern.js 提供了一套强大的插件体系，允许开发者通过编写插件来扩展框架功能、定制构建流程，以及满足各种个性化的开发需求。无论你是想添加一个自定义命令、优化构建产物，还是实现一套独特的部署方案，Modern.js 的插件系统都能为你提供强大的支持。
 
-## Modern.js 框架插件
+## 为什么需要插件？
+
+在 Web 应用开发中，我们经常会遇到一些框架本身无法直接满足的需求，例如：
+
+- **我想添加一个自定义的命令行工具，来帮助我自动化一些任务。**
+- **我希望能够处理一种新的文件格式，比如 `.xyz`。**
+- **我需要在应用启动前执行一些初始化的操作。**
+- **我想对构建生成的 CSS 文件进行特殊的处理。**
+- **我需要定制应用的路由逻辑，或者添加一些服务端中间件。**
+
+在没有插件系统的情况下，这些需求可能需要修改框架源码，或者采用一些繁琐的 hack 手段。而 Modern.js 的插件系统提供了一种优雅、灵活且可维护的解决方案。
+
+## 何时使用哪种插件？
+
+Modern.js 提供了两种主要的插件类型：Modern.js 框架插件和 Rsbuild 构建插件。选择哪种插件取决于你的具体需求：
+
+- **Rsbuild 构建插件：** 如果你的需求与构建过程密切相关，特别是涉及到 Webpack 或 Rspack 配置的修改，那么你应该选择 Rsbuild 插件。例如：
+    - 修改 Webpack/Rspack 的 `loader` 或 `plugin` 配置。
+    - 处理新的文件类型。
+    - 修改或编译文件内容。
+    - 对构建产物进行优化或处理。
 
-Modern.js 拥有自己的框架插件系统，你可以通过在 `modern.config.ts` 中配置 [`plugins`](/configure/app/plugins) 字段来使用 Modern.js 插件。
+- **Modern.js 框架插件：** 如果你的需求与 Modern.js 框架本身的功能扩展、运行时行为或服务端逻辑相关，那么你应该选择 Modern.js 插件。例如：
+    - 添加自定义的命令行命令。
+    - 修改应用的路由配置。
+    - 定制化应用的渲染过程（如 SSR）。
+    - 添加服务端中间件或处理函数。
+
+简单来说，需要修改 Webpack/Rspack 配置时，使用 Rsbuild 插件；其他与框架相关的功能扩展，使用 Modern.js 插件。
+
+## Modern.js 框架插件
 
 ### 插件类型
 
-框架插件可以细分成三类，分别是：
+Modern.js 框架插件可以细分为三类，分别是：
+
+#### CLI 插件
+
+CLI 插件用于在应用执行 `modern` 命令时提供额外功能，例如添加命令、修改配置、监听文件等。大部分构建相关能力均可通过 CLI 插件实现。
+
+CLI 插件可通过 `modern.config.ts` 中的 `plugins` 字段进行配置。
 
-1. [CLI 插件](/plugin/cli-plugins)：用于在应用执行 Modern.js 命令时，提供额外的功能。例如，添加命令、修改配置、监听文件等。大多数构建相关的能力都可以通过 CLI 插件来实现。
-2. 服务端插件：用于在应用接受请求时，提供额外的功能。例如，添加中间件、修改请求响应等。
-3. 运行时插件：用于在应用运行 React 代码时，提供额外的功能。例如，执行初始化行为，包裹 React 高阶组件等。
+```ts title="modern.config.ts"
+// an example for bff
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { bffPlugin } from '@modern-js/plugin-bff';
+
+export default defineConfig({
+  plugins: [appTools(), bffPlugin()],
+});
+```
+
+#### Runtime 插件
+
+Runtime 插件用于在应用运行 React 代码时提供额外功能，例如执行初始化行为、实现 React 高阶组件（HOC）封装。
+
+Runtime 插件通过 `src/modern.runtime.ts` 中的 `plugins` 字段配置。
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { routerPlugin } from '@modern-js/runtime/router';
+
+export default defineRuntimeConfig({
+  plugins: [routerPlugin()],
+});
+```
+
+{/* #### Server 插件
+
+Server 插件用于在应用接受请求时提供额外功能，例如添加中间件、修改请求响应等。
+
+Server 插件通过 `server/modern.server.ts` 中的 `plugins` 字段进行配置。
+
+```ts title="src/modern.server.ts"
+import { defineConfig } from '@modern-js/app-tools/server';
+import bffPlugin from '@modern-js/plugin-bff/server';
+
+export default defineConfig({
+  plugins: [bffPlugin()],
+});
+``` */}
+
+:::tip
+Modern.js 从 `MAJOR_VERSION.66.0` 起正式对外使用新的插件机制。
 
-:::note
-服务端插件和运行时插件即将正式对外开放。
+如果你的当前版本低于 MAJOR_VERSION.66.0，可通过执行 `npx modern upgrade` 进行升级。
 :::
 
 ### 开发插件
 
-如果你需要开发 Modern.js 框架插件，可以阅读 [Modern.js 插件系统](/plugin/plugin-system/introduction) 获取更多信息。
+如果你需要开发 Modern.js 框架插件，请阅读 [Modern.js 插件系统](/plugin/plugin-system) 获取更多信息。
 
 ## Rsbuild 构建插件
 
-Rsbuild 是 Modern.js 底层的构建工具，可通过添加 Rsbuild 插件修改默认的构建行为并添加各类额外功能，包括但不限于：
+Rsbuild 是 Modern.js 底层的构建工具，通过添加 Rsbuild 插件可修改默认的构建行为，添加各类额外功能，包括但不限于：
 
 - 修改 Rsbuild 配置
 - 处理新的文件类型
 - 修改或编译文件
 - 部署产物
 
-你可以在 `modern.config.ts` 中通过 `builderPlugins` 选项来注册 Rsbuild 插件，详见 [builderPlugins 构建插件](/configure/app/builder-plugins.html)。
+你可以在 `modern.config.ts` 中通过 `builderPlugins` 选项注册 Rsbuild 插件，详见 [builderPlugins 构建插件](/configure/app/builder-plugins.html)。
 
 :::tip
-Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [Rsbuild](https://rsbuild.dev/).
+Modern.js 从 `MAJOR_VERSION.46.0` 起，底层构建工具升级为 [Rsbuild](https://rsbuild.dev/)。
 
-如果你当前版本低于 MAJOR_VERSION.46.0，可通过执行 `npx modern upgrade` 进行升级。
+如果你的当前版本低于 MAJOR_VERSION.46.0，可通过执行 `npx modern upgrade` 进行升级。
 :::
 
 :::info
-可以阅读 [Rsbuild 官网 - 插件](https://rsbuild.dev/plugins/list/index) 来了解更多 Rsbuild 插件体系的内容。
+可以阅读 [Rsbuild 官网 - 插件](https://rsbuild.dev/plugins/list/index) 了解更多 Rsbuild 插件体系内容。
 :::
 
 ### 官方插件
 
 #### 内置插件
 
-以下是已在 Modern.js 中内置的 Rsbuild 官方插件，无需安装，即可启用：
+以下为已在 Modern.js 中内置的 Rsbuild 官方插件，无需安装，即可启用：
 
 | 插件                                                                                         | 介绍                                                                                     | Modern.js 链接                                                                                                                        |
 | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
 | [React 插件](https://rsbuild.dev/zh/plugins/list/plugin-react)                               | 提供对 React 的支持                                                                      | -                                                                                                                                     |
-| [SVGR 插件](https://rsbuild.dev/zh/plugins/list/plugin-svgr)                                 | 支持将 SVG 图片转换为一个 React 组件使用                                                 | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
+| [SVGR 插件](https://rsbuild.dev/zh/plugins/list/plugin-svgr)                                 | 支持将 SVG 图片转换为一个 React 组件                                                     | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
 | [Styled Components 插件](https://github.com/rspack-contrib/rsbuild-plugin-styled-components) | 提供对 styled-components 的编译时支持                                                    | [tools.styledComponents](/configure/app/tools/styled-components.html)                                                                 |
 | [Assets Retry 插件](https://rsbuild.dev/zh/plugins/list/plugin-assets-retry)                 | 用于在静态资源加载失败时自动发起重试请求                                                 | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
-| [Type Check 插件](https://github.com/rspack-contrib/rsbuild-plugin-type-check)                     | 用于在单独的进程中运行 TypeScript 类型检查                                               | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
+| [Type Check 插件](https://github.com/rspack-contrib/rsbuild-plugin-type-check)               | 用于在单独的进程中运行 TypeScript 类型检查                                               | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
 | [Node Polyfill 插件](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill)         | 用于注入 Node 核心模块在浏览器端的 polyfills                                             | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html)                                                        |
 | [Source Build 插件](https://github.com/rspack-contrib/rsbuild-plugin-source-build)           | 用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新                       | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
 | [Check Syntax 插件](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)           | 用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法                           | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
-| [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)                                                                               |
+| [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 对象                                         | [YAML 文件](/guides/basic-features/static-assets/json-files.html#yaml-文件)                                                                         |

package/docs/zh/plugin/official/_meta.json

@@ -0,0 +1,12 @@
+[
+  {
+    "type": "dir",
+    "name": "cli-plugins",
+    "label": "cli-plugins"
+  },
+  {
+    "type": "dir",
+    "name": "rsbuild-plugins",
+    "label": "rsbuild-plugins"
+  }
+]

package/docs/zh/plugin/official/cli-plugins/_meta.json

@@ -0,0 +1 @@
+["plugin-tailwind", "plugin-bff", "plugin-ssg", "plugin-swc"]

package/docs/zh/plugin/official/cli-plugins.mdx

@@ -0,0 +1,6 @@
+# 概览
+
+- [@modern-js/plugin-tailwindcss](/plugin/official/cli-plugins/plugin-tailwind)：提供使用 Tailwind CSS 样式的能力。
+- [@modern-js/plugin-bff](/plugin/official/cli-plugins/plugin-bff)：提供 BFF 服务，一体化调用的能力。
+- [@modern-js/plugin-ssg](/plugin/official/cli-plugins/plugin-bff)：提供静态站点生成的能力。
+- [@modern-js/plugin-swc](/plugin/official/cli-plugins/plugin-swc)：提供 SWC 编译支持。

package/docs/zh/plugin/official/rsbuild-plugins.mdx

@@ -0,0 +1,3 @@
+# 概览
+
+- [@modern-js/plugin-esbuild](/plugin/official/rsbuild-plugins/plugin-esbuild)：提供 esbuild 编译支持。