@modern-js/main-doc 2.59.0 → 2.60.1-alpha.0

package/docs/zh/guides/advanced-features/bff/sdk.mdx

@@ -1,16 +1,12 @@
----
-sidebar_position: 4
-title: 自定义请求 SDK
----
-# 自定义请求 SDK
+# 扩展一体化调用 SDK
 
-Modern.js 的 BFF 在 CSR 和 SSR 是同构的。在浏览器端依赖了[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)，在服务端依赖了 [node-fetch](https://www.npmjs.com/package/node-fetch)。但在很多业务场景下我们需要对请求或响应做一些额外的处理，例如：
+BFF 函数的一体化调用在 CSR 和 SSR 是同构的。Modern.js 封装的请求 SDK，在浏览器端依赖了 [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)，在服务端依赖了 [node-fetch](https://www.npmjs.com/package/node-fetch)。但在实际业务场景下，有时需要对请求或响应做一些额外的处理，例如：
 
 - 在请求头中写入鉴权信息
 - 对响应的数据或错误进行统一的处理
 - 特定平台无法使用浏览器的原生 fetch 函数，需要使用其他方式发送请求
 
-针对上述的场景，Modern.js 提供了 `configure` 函数，自定义能力从低到高，可以用它配置 ssr 透传请求头，拦截器，请求 SDK。
+针对上述的场景，Modern.js 提供了 `configure` 函数，开放了一系列扩展能力，可以用它配置 ssr 透传请求头，添加拦截器，自定义请求 SDK。
 
 :::caution 注意
 `configure` 函数的调用需要在所有 BFF 请求发送前调用，以确保覆盖默认的请求配置。
@@ -18,42 +14,42 @@ Modern.js 的 BFF 在 CSR 和 SSR 是同构的。在浏览器端依赖了[Fetch
 :::
 
 
-```ts title="App.tsx"
+```tsx title="routes/page.tsx"
 import { configure } from '@modern-js/runtime/bff';
 
-configure({
-  request: customRequest
+configure({ 
+  // ... 
 })
+
+const Index = () => <div>Hello world</div>
+export default Index;
 ```
 
-## 配置 ssr 透传请求头
+## 配置 SSR 透传请求头
 
-在同时使用 Modernjs SSR 和 BFF 的场景下，常常需要将 SSR 页面请求上的一些请求头信息，透传给 BFF 服务。
+在同时使用 Modern.js SSR 和 BFF 的场景下，常常需要将 SSR 页面请求上的一些请求头信息，透传给 BFF 服务。
 
 例如项目有页面地址是 `https://website.com`，该页面是 SSR 的，在组件中会调用 API 接口 `https://website.com/api/info`，该接口需要用户的 cookie 信息做鉴权。页面在请求该 API 接口时，需要将 SSR 页面请求的 `cookie` 传给 BFF。
 
 目前以下请求头在 Modernjs 中是自动透传的：
 
-- cookie
-- x-tt-logid
-- user-agent
-- x-tt-stress
-
-可以通过 `configure` 配置请求头。例如以下例子，Modern.js 会自动将 SSR 页面请求的 cookie 信息透传给 BFF 服务：
+```ts
+['cookie', 'user-agent', 'x-tt-logid', 'x-tt-stress']
+```
 
-```tsx title="App.tsx"
-import { configure } from '@modern-js/runtime/bff';
+可以通过 `configure` 配置请求头。例如以下例子，Modern.js 会自动将 SSR 页面请求的 `x-uid` 信息透传给 BFF 服务：
 
+```tsx
 configure({
   allowedHeaders: ['x-uid']
 })
 ```
 
-## 配置拦截器
+## 添加拦截器
 
-在有些业务场景下需要对请求和响应进行一些统一的处理，这种场景下可以配置拦截器满足需求：
+在有些业务场景下需要对请求和响应进行统一的处理，这种场景下可以通过**配置拦截器**满足需求：
 
-```tsx title="App.tsx"
+```tsx
 configure({
   // 这里的 request 是一体化默认的请求工具，interceptor 函数需返回一个新的 request。
   // 新 request 的出参必须是 parse body 之后的结果
@@ -66,16 +62,11 @@ configure({
 });
 ```
 
-## 配置自定义请求 SDK
-
-如果仅仅通过配置拦截器无法满足需求，需要对请求的 SDK 做进一步的自定义，可以通过 `configure` 函数配置自定义请求 SDK：
-
-:::caution 注意
-在 SSR 和一体化调用的场景下，在 SSR 向 BFF 服务发送请求时，Modern.js 会通过**服务发现**找到 BFF 服务内网 IP，并通过 IP 发送请求，以提高性能。如果使用自定义请求 SDK 会**失去这种优化**。
+## 自定义请求 SDK
 
-:::
+如果仅仅通过配置拦截器无法满足需求，希望自定义请求函数，也可以通过 `configure` 进行配置：
 
-```tsx title="App.tsx"
+```tsx
 import nodeFetch from 'node-fetch';
 
 const customFetch = (input: RequestInfo | URL, init: RequestInit) => {
@@ -92,13 +83,13 @@ configure({
 });
 ```
 
-配置自定义请求 SDK 有以下约定：
+配置自定义请求函数有以下约定：
 
-- 通过 `configure` 函数可以配置一个 `request` 函数，这个函数的入参与浏览器中的 Fetch 或 node-fetch 对齐，所有的一体化 BFF 函数会通过该函数发送请求。
-- `request` 函数出参必须是接口实际返回的数据，不能是 Promise，否则会导致一体化 BFF 函数无法正常返回数据。
-- 如果是 SSR 项目，`request` 必须要同时支持浏览器端和服务器端发送请求。
+- 函数的入参与浏览器中的 Fetch 或 node-fetch 对齐，所有 BFF 函数的一体化调用会通过该函数发送请求。
+- 函数出参必须是接口实际返回的数据，不能是 Promise，否则会导致 BFF 函数无法正常返回数据。
+- 如果是 SSR 项目，函数必须要同时支持浏览器端和服务器端发送请求。
 
-使用 axios 定制自定义请求 SDK 的示例：
+下面是使用 axios 定制自定义请求函数的示例：
 
 ```tsx title="App.tsx"
 import { configure } from '@modern-js/runtime/bff';

package/docs/zh/guides/advanced-features/build-performance.mdx

@@ -9,13 +9,17 @@ Modern.js 默认对构建性能进行了充分优化，但是随着业务场景
 本文档提供了一些可选的提速策略，**开发者可以根据实际场景选取其中的部分策略**，从而进一步提升构建速度。
 
 :::tip 📢 注意
-在[优化产物体积](/guides/advanced-features/optimize-bundle.html)一文中介绍的策略也可以用于提升构建性能，这里不再重复介绍。
+在[优化产物体积](/guides/advanced-features/page-performance/optimize-bundle)一文中介绍的策略也可以用于提升构建性能，这里不再重复介绍。
 :::
 
 ## 通用优化策略
 
 以下是一些通用的优化策略，对开发环境和生产环境均有提速效果，其中部分策略对包体积也有优化。
 
+### 使用 Rspack 构建（推荐）
+
+如果你还未使用 Rspack 构建，可以切换到 Rspack 构建模式来提升 5~10 倍的构建速度，请参考 [使用 Rspack](/guides/advanced-features/rspack-start.html) 来进行切换。
+
 ### 升级 Node.js 版本
 
 通常来说，将 Node.js 更新到最新的 [LTS 版本](https://github.com/nodejs/release#release-schedule)，有助于提升构建性能。
@@ -40,25 +44,6 @@ nvm default 18
 node -v
 ```
 
-### 使用 Rspack 构建
-
-如果你对构建性能有更极致的需求，可以一键切换到 Rspack 构建模式，请参考 [使用 Rspack](/guides/advanced-features/rspack-start.html) 来进行切换。
-
-### 使用 SWC 或 esbuild 编译
-
-[SWC](https://swc.rs/) (Speedy Web Compiler) 是基于 `Rust` 语言编写的高性能 JavaScript 和 TypeScript 转译和压缩工具。在 Polyfill 和语法降级方面可以和 Babel 提供一致的能力，并且性能比 Babel 高出一个数量级。
-
-[esbuild](https://esbuild.github.io/) 是一款基于 Golang 开发的前端构建工具，具有打包、编译和压缩 JavaScript 代码的功能，相比传统的打包编译工具，esbuild 在性能上有显著提升。
-
-Modern.js 提供了 SWC 插件和 esbuild 插件，让你能使用 SWC 或 esbuild 代替 babel-loader、ts-loader 和 terser 等库进行代码编译和压缩。详见：
-
-- [SWC 插件文档](/configure/app/tools/swc.html)
-- [esbuild 插件文档](/configure/app/tools/esbuild.html)
-
-:::tip SWC vs esbuild
-SWC 编译产物的兼容性较好，支持注入 core-js 等 Polyfill，并且功能更加完备，因此推荐优先使用 SWC 插件。
-:::
-
 ### 避免使用 ts-loader
 
 默认情况下，Modern.js 使用 Babel 编译 TS 文件，开启 [tools.tsLoader](/configure/app/tools/ts-loader.html) 选项后，会使用 `ts-loader` 编译 TS 文件。
@@ -118,7 +103,7 @@ export default {
 
 ### 调整 Browserslist 范围
 
-这项优化的原理与[「提升 Browserslist 范围」](/guides/advanced-features/optimize-bundle.html#adjust-browserslist)类似，区别在于，我们可以为开发环境和生产环境设置不同的 browserslist，从而减少开发环境下的编译开销。
+这项优化的原理与[「提升 Browserslist 范围」](/guides/advanced-features/page-performance/optimize-bundle#adjust-browserslist)类似，区别在于，我们可以为开发环境和生产环境设置不同的 browserslist，从而减少开发环境下的编译开销。
 
 比如，你可以在 `package.json` 中添加以下配置，表示在开发环境下只兼容最新的浏览器，在生产环境下兼容实际需要的浏览器：
 

package/docs/zh/guides/advanced-features/page-performance/_meta.json

@@ -0,0 +1 @@
+["code-split", "inline-assets", "optimize-bundle"]

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

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # 使用 Rspack
 
-import Rspack from '@modern-js/builder-doc/docs/zh/shared/rspackTip.mdx';
+import Rspack from '@site-docs/components/rspackTip.mdx';
 
 <Rspack />
 
@@ -39,10 +39,10 @@ export default defineConfig({
 ```
 
 :::tip
-如果你当前版本低于 MAJOR_VERSION.59.0, 可通过执行 `npx modern upgrade` 进行升级。
+如果你当前版本低于 MAJOR_VERSION.59.0，可通过执行 `npx modern upgrade` 进行升级。
 :::
 
-import RspackPrecautions from '@modern-js/builder-doc/docs/zh/shared/rspackPrecautions.md';
+import RspackPrecautions from '@site-docs/components/rspackPrecautions.mdx';
 
 <RspackPrecautions />
 
@@ -104,7 +104,7 @@ export default defineConfig<'rspack'>({
 
 ![rspack_version_log](https://lf3-static.bytednsdoc.com/obj/eden-cn/6221eh7uhbfvhn/modern/20240110-155444.png)
 
-#### 修改内置 Rspack 版本
+### 修改内置 Rspack 版本
 
 可以使用 pnpm / yarn / npm 等包管理工具自带的依赖升级功能来将 Rspack 强制升级到指定版本。
 

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

@@ -15,9 +15,7 @@ sidebar_position: 4
 
 ## 通过 `tsconfig.json` 的 `paths` 配置
 
-你可以通过 `tsconfig.json` 中的 `paths` 来配置别名，这是我们在 TypeScript 项目中推荐使用的方式，因为它可以解决路径别名的 TS 类型问题。
-
-比如：
+你可以通过 `tsconfig.json` 中的 `paths` 来配置别名，这是我们在 TypeScript 项目中推荐使用的方式，因为它可以解决路径别名的 TS 类型问题。比如：
 
 ```json title="tsconfig.json"
 {
@@ -29,7 +27,7 @@ sidebar_position: 4
 }
 ```
 
-以上配置完成后，如果你在代码中引用 `@common/Foo.tsx`, 则会映射到 `<project>/src/common/Foo.tsx` 路径上。
+以上配置完成后，如果你在代码中引用 `@common/Foo.tsx`，则会映射到 `<project>/src/common/Foo.tsx` 路径上。
 
 :::tip
 你可以阅读 [TypeScript - paths](https://www.typescriptlang.org/tsconfig#paths) 文档来了解更多用法。
@@ -47,9 +45,7 @@ Modern.js 提供了 [source.alias](/configure/app/source/alias) 配置项，对
 
 ### 对象用法
 
-你可以通过对象的方式来配置 `source.alias`，其中的相对路径会被自动补全为绝对路径。
-
-比如：
+你可以通过对象的方式来配置 `source.alias`，其中的相对路径会被自动补全为绝对路径。比如：
 
 ```js
 export default {
@@ -61,13 +57,11 @@ export default {
 };
 ```
 
-以上配置完成后，如果你在代码中引用 `@common/Foo.tsx`, 则会映射到 `<project>/src/common/Foo.tsx` 路径上。
+以上配置完成后，如果你在代码中引用 `@common/Foo.tsx`，则会映射到 `<project>/src/common/Foo.tsx` 路径上。
 
 ### 函数用法
 
-你也可以将 `source.alias` 配置为一个函数，拿到内置的 `alias` 对象，对其进行修改。
-
-比如：
+你也可以将 `source.alias` 配置为一个函数，拿到内置的 `alias` 对象，对其进行修改。比如：
 
 ```js
 export default {

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

@@ -167,7 +167,7 @@ declare module '*.styl' {
 
 上述方法虽然可以解决 CSS Modules 在 TypeScript 中的类型问题，但是无法准确地提示出某个 CSS 文件导出了哪些类名。
 
-Builder 支持为 CSS Modules 生成准确的类型声明，你只需要开启 [output.enableCssModuleTSDeclaration](/configure/app/output/enable-css-module-tsdeclaration) 配置项，再执行构建命令，Builder 就会为项目中所有的 CSS Modules 文件生成相应的类型声明文件。
+Modern.js 支持为 CSS Modules 生成准确的类型声明，你只需要开启 [output.enableCssModuleTSDeclaration](/configure/app/output/enable-css-module-tsdeclaration) 配置项，再执行构建命令，Modern.js 就会为项目中所有的 CSS Modules 文件生成相应的类型声明文件。
 
 ```ts
 export default {

package/docs/zh/guides/basic-features/env-vars.mdx

@@ -61,7 +61,7 @@ function App() {
 }
 ```
 
-这种方式可以针对不同客户端提供不同的产物，保证代码体积最小化；也便于处理不同环境下代码中的一些副作用。
+这种方式可以针对不同客户端提供不同的产物，保证代码体积最小化，也便于处理不同环境下代码中的一些副作用。
 
 :::note 死代码移除
 在生产环境，Terser 和 SWC 等代码压缩工具会分析代码，并将 dead code 移除，从而减少产物体积，这个过程被称为死代码移除（DCE）。

package/docs/zh/guides/basic-features/output-files.mdx

@@ -42,7 +42,7 @@ dist
 
 ## 修改产物目录
 
-Builder 提供了多个配置项来修改产物目录和产物名称，你可以：
+Modern.js 提供了多个配置项来修改产物目录和产物名称，你可以：
 
 - 通过 [output.filename](/configure/app/output/filename) 来修改产物的文件名。
 - 通过 [output.distPath](/configure/app/output/dist-path) 来修改产物的输出路径。
@@ -158,7 +158,7 @@ dist
 
 ## 产物不写入磁盘
 
-默认情况下，Builder 会将构建产物写入磁盘，以方便开发者查看产物的内容，或是配置静态资源的代理规则。
+默认情况下，Modern.js 会将构建产物写入磁盘，以方便开发者查看产物的内容，或是配置静态资源的代理规则。
 
 在开发环境，你可以选择将构建产物保存在 Dev Server 的内存中，从而减少文件操作产生的开销。
 

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

@@ -464,8 +464,7 @@ Modern.js 支持通过 `loading.tsx` 文件来解决这个问题，`routes/` 下
 
 :::tip
 
-- 该功能目前仅在 Webpack 项目中支持，Rspack 项目暂不支持。
-- 对数据的预加载目前只会预加载 SSR 项目中 [Data Loader](/guides/basic-features/data/data-fetch) 中返回的数据。
+对数据的预加载目前只会预加载 SSR 项目中 [Data Loader](/guides/basic-features/data/data-fetch) 中返回的数据。
 
 :::
 

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

@@ -72,7 +72,7 @@ console.log(largeImage); // "/static/largeImage.6c12aba3.png"
 console.log(smallImage); // "data:image/png;base64,iVBORw0KGgo..."
 ```
 
-关于资源内联的更详细介绍，请参考 [静态资源内联](/guides/advanced-features/inline-assets) 章节。
+关于资源内联的更详细介绍，请参考 [静态资源内联](/guides/advanced-features/page-performance/inline-assets) 章节。
 
 ## 构建产物
 

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

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # 构建工具
 
-Modern.js 内部基于 [Rsbuild](https://rsbuild.dev/) 封装了自身的构建工具（Modern.js Builder），并支持在 Webpack 和 Rspack 两种打包工具间无缝切换。
+Modern.js 构建是基于 [Rsbuild](https://rsbuild.dev/) 实现的，并支持在 Webpack 和 Rspack 两种打包工具间无缝切换。
 
 :::tip 什么是 Rsbuild
 Rsbuild 是基于 Rspack 的构建工具，是一个增强版的 Rspack CLI，更易用、开箱即用。

package/docs/zh/guides/deprecated.md

@@ -13,3 +13,7 @@ Modern.js 之前提供的 Monorepo 方案是基于 [pnpm Workspace](https://pnpm
 ## new 命令开启 test 能力
 
 Modern.js 之前提供的测试能力是基于 Jest 的简单封装。该封装导致 Jest 配置不直观、用户配置更加复杂等问题。在 [v2.53.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.53.0) 版本中，移除了在应用项目和模块项目中开启 test 功能的选项。推荐直接使用社区提供的测试方案。
+
+## Eslint 规则集
+
+Modern.js 之前提供了 ESLint 的完整规则集，涵盖了 @modern-js（针对 Node.js 项目的 Lint 规则）和 @modern-js-app（针对前端项目的 Lint 规则）。在 [v2.60.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.60.0) 版本中，我们正式移除了这些规则集。我们鼓励开发者根据自身需求选择合适的代码规范工具，直接使用 ESLint 并结合社区推荐的规则，或使用 Biome 以提升代码格式化的性能。

package/docs/zh/guides/get-started/glossary.mdx

@@ -12,13 +12,13 @@ BFF 服务作为前端应用程序和服务端 API 之间的中介，可以为
 
 ## Bundler
 
-import Bundler from '@modern-js/builder-doc/docs/zh/shared/bundler.md';
+import Bundler from '@site-docs/components/bundler.mdx';
 
 <Bundler />
 
 ## Builder
 
-import Builder from '@modern-js/builder-doc/docs/zh/shared/builder.md';
+import Builder from '@site-docs/components/builder.mdx';
 
 <Builder />
 
@@ -36,25 +36,25 @@ CSR 是 "Client-Side Rendering"（客户端渲染）的缩写。它表示页面
 
 ## Micro-frontend
 
-import MicroFrontend from '@modern-js/builder-doc/docs/zh/shared/micro-frontend.md';
+import MicroFrontend from '@site-docs/components/micro-frontend.mdx';
 
 <MicroFrontend />
 
 ## Module Federation
 
-import ModuleFederation from '@modern-js/builder-doc/docs/zh/shared/module-federation.md';
+import ModuleFederation from '@site-docs/components/module-federation.mdx';
 
 <ModuleFederation />
 
 ## Rsbuild
 
-import Rsbuild from '@modern-js/builder-doc/docs/zh/shared/rsbuild.md';
+import Rsbuild from '@site-docs/components/rsbuild.mdx';
 
 <Rsbuild />
 
 ## Rspack
 
-import Rspack from '@modern-js/builder-doc/docs/zh/shared/rspack.md';
+import Rspack from '@site-docs/components/rspack.mdx';
 
 <Rspack />
 
@@ -76,6 +76,6 @@ SSG 是 "Static Site Generation"（静态网站生成）的缩写。它表示网
 
 ## SWC
 
-import SWC from '@modern-js/builder-doc/docs/zh/shared/swc.md';
+import SWC from '@site-docs/components/swc.mdx';
 
 <SWC />

package/docs/zh/guides/get-started/quick-start.mdx

@@ -72,7 +72,7 @@ export default defineConfig({
 
 - 提供 `modern dev`, `modern build` 等常用的 CLI 命令。
 - 集成 Modern.js Core，提供配置解析、插件加载等能力。
-- 集成 Modern.js Builder，提供构建能力。
+- 集成 Rsbuild，提供构建能力。
 - 集成 Modern.js Server，提供开发和生产服务器相关能力。
 
 `@modern-js/app-tools` 是基于 Modern.js 的插件体系实现的，本质上是一个插件，因此你需要在配置文件的 `plugins` 字段中注册 `appTools`：

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

@@ -5,12 +5,6 @@
     "label": "micro-frontend",
     "collapsed": true
   },
-  {
-    "type": "dir",
-    "name": "framework-plugin",
-    "label": "framework-plugin",
-    "collapsed": true
-  },
   {
     "type": "dir",
     "name": "model",

package/docs/zh/guides/topic-detail/micro-frontend/c01-introduction.mdx

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # 微前端介绍
 
-import MicroFrontend from '@modern-js/builder-doc/docs/zh/shared/micro-frontend.md';
+import MicroFrontend from '@site-docs/components/micro-frontend.mdx';
 
 <MicroFrontend />
 

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

@@ -40,8 +40,8 @@ Modern.js 提供 [inspect 命令](/apis/app/commands.html) 用于查看项目最
 
 Inspect config succeed, open following files to view the content:
 
-  - Builder Config: /root/my-project/dist/builder.config.js
-  - Rspack Config (web): /root/my-project/dist/rspack.config.web.js
+  - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
+  - Rspack Config (web): /root/my-project/dist/rspack.config.web.mjs
 ```
 
 ---

package/docs/zh/plugin/_meta.json

@@ -0,0 +1,19 @@
+[
+  "introduction",
+  {
+    "type": "dir",
+    "name": "plugin-system",
+    "label": "plugin-system",
+    "collapsed": true
+  },
+  {
+    "type": "dir",
+    "name": "cli-plugins",
+    "label": "cli-plugins"
+  },
+  {
+    "type": "dir",
+    "name": "rsbuild-plugins",
+    "label": "rsbuild-plugins"
+  }
+]

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

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

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

@@ -0,0 +1,5 @@
+# BFF 插件
+
+在 Modern.js 应用中，通过 BFF 插件，开发者可以在 `api/lambda` 目录下定义接口文件，并导出接口函数。在前端代码中，可以用文件引用的方式，直接调用这些接口函数，发起接口请求。
+
+详细内容可以参考 [BFF - 基础用法](/guides/advanced-features/bff/function)。

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

@@ -0,0 +1,5 @@
+# SSG 插件
+
+SSG（Static Site Generation）是一种基于数据与模板，在构建时渲染完整静态网页的技术解决方案。这意味着在生产环境中，页面默认就是有内容的，并且可以被 CDN 缓存。对于无需数据的页面，SSG 可以提供更好的性能和更高的安全性。
+
+详细内容可以参考 [静态站点生成（SSG）](/guides/basic-features/render/ssg)。

package/docs/zh/{guides/rsbuild-plugins → plugin/cli-plugins}/plugin-swc.mdx

@@ -4,7 +4,14 @@ sidebar_position: 2
 
 # SWC 插件
 
-import SWC from '@modern-js/builder-doc/docs/zh/shared/swc.md';
+:::warning
+**当前文档中的 SWC 功能已停止迭代**，我们更推荐使用 Rspack + SWC 的方案。
+
+请参考[「使用 Rspack」](/guides/advanced-features/rspack-start.html)了解更多。
+
+:::
+
+import SWC from '@site-docs/components/swc.mdx';
 
 <SWC />
 
@@ -44,9 +51,9 @@ import SWC from '@modern-js/builder-doc/docs/zh/shared/swc.md';
 
 ### 在 Modern.js 框架中使用
 
-Modern.js 框架对 Builder 的 SWC 插件进行了封装，你可以通过以下方式来使用：
+Modern.js 框架对 SWC 插件进行了封装，你可以通过以下方式来使用：
 
-import EnableSWC from '@modern-js/builder-doc/docs/zh/shared/enableSwc.md';
+import EnableSWC from '@site-docs/components/enableSwc.mdx';
 
 <EnableSWC />
 
@@ -278,7 +285,7 @@ boolean | {
 #### extensions.pluginImport
 
 :::tip
-Builder 提供了 [source.transformImport](/configure/app/source/transform-import) 配置项，因此你不需要手动配置 `extensions.pluginImport`。
+Modern.js 提供了 [source.transformImport](/configure/app/source/transform-import) 配置项，因此你不需要手动配置 `extensions.pluginImport`。
 :::
 
 移植自 [babel-plugin-import](https://github.com/umijs/babel-plugin-import)，配置选项保持一致。

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

@@ -0,0 +1,5 @@
+# Tailwind CSS 插件
+
+Tailwind CSS 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。
+
+详细内容可以参考 [使用 Tailwind CSS](/guides/basic-features/css/tailwindcss)。

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

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

package/docs/zh/{guides/advanced-features/rsbuild-plugin.mdx → plugin/introduction.mdx}

@@ -1,11 +1,28 @@
----
-sidebar_position: 21
-title: 使用 Rsbuild 插件
----
+# 插件
 
-# 使用 Rsbuild 插件
+在 Modern.js 中目前可以直接使用两种插件，分别是 Modern.js 框架插件和 Rsbuild 构建插件。
 
-## 插件介绍
+## Modern.js 框架插件
+
+Modern.js 拥有自己的框架插件系统，你可以通过在 `modern.config.ts` 中配置 [`plugins`](/configure/app/plugins) 字段来使用 Modern.js 插件。
+
+### 插件类型 
+
+框架插件可以细分成三类，分别是：
+
+1. [CLI 插件](/plugin/cli-plugins)：用于在应用执行 Modern.js 命令时，提供额外的功能。例如，添加命令、修改配置、监听文件等。大多数构建相关的能力都可以通过 CLI 插件来实现。
+2. 服务端插件：用于在应用接受请求时，提供额外的功能。例如，添加中间件、修改请求响应等。
+3. 运行时插件：用于在应用运行 React 代码时，提供额外的功能。例如，执行初始化行为，包裹 React 高阶组件等。
+
+:::note
+服务端插件和运行时插件即将正式对外开放。
+:::
+
+### 开发插件
+
+如果你需要开发 Modern.js 框架插件，可以阅读 [Modern.js 插件系统](/plugin/plugin-system/introduction) 获取更多信息。
+
+## Rsbuild 构建插件
 
 Rsbuild 是 Modern.js 底层的构建工具，可通过添加 Rsbuild 插件修改默认的构建行为并添加各类额外功能，包括但不限于：
 
@@ -17,14 +34,18 @@ Rsbuild 是 Modern.js 底层的构建工具，可通过添加 Rsbuild 插件修
 你可以在 `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 插件体系的内容。
 :::
 
-## 官方插件
+### 官方插件
 
-### 内置插件
+#### 内置插件
 
 以下是已在 Modern.js 中内置的 Rsbuild 官方插件，无需安装，即可启用：
 
@@ -44,10 +65,14 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [R
 | [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-文件)                                                                         |
 
-### 未内置插件
+#### 未内置的插件
 
 以下是未在 Modern.js 中内置的 Rsbuild 官方插件：
 
 - [Image Compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)：将项目中用到的图片资源进行压缩处理。
 - [Stylus 插件](https://rsbuild.dev/zh/plugins/list/plugin-stylus)：使用 Stylus 作为 CSS 预处理器。
 - [UMD 插件](https://github.com/rspack-contrib/rsbuild-plugin-umd)：用于构建 UMD 格式的产物。
+
+import OtherPlugins from '@site-docs/components/other-plugins.mdx';
+
+<OtherPlugins />

package/docs/zh/{guides/topic-detail/framework-plugin → plugin/plugin-system}/extend.mdx

@@ -4,7 +4,7 @@ sidebar_position: 5
 
 # 扩展插件 Hook
 
-本小节介绍如何通过动态注册 [Hook 模型](/guides/topic-detail/framework-plugin/hook) 的方式来扩展插件 Hook。
+本小节介绍如何通过动态注册 [Hook 模型](/plugin/plugin-system/hook) 的方式来扩展插件 Hook。
 
 ## 示例
 

package/docs/zh/{guides/topic-detail/framework-plugin → plugin/plugin-system}/implement.mdx

@@ -31,7 +31,7 @@ const myPlugin = {
 };
 ```
 
-另外，在插件中，允许配置与其他插件的执行顺序。详情可以参考[插件关系](/guides/topic-detail/framework-plugin/relationship)。
+另外，在插件中，允许配置与其他插件的执行顺序。详情可以参考[插件关系](/plugin/plugin-system/relationship)。
 
 ### 插件类型
 
@@ -115,7 +115,7 @@ import type { MyPluginHook } from 'xxx';
 const myPlugin: CliPlugin<AppTools & { hooks: MyPluginHook }> = {};
 ```
 
-详细说明，请参考 [扩展 Hook](/guides/topic-detail/framework-plugin/extend)。
+详细说明，请参考 [扩展 Hook](/plugin/plugin-system/extend)。
 
 ### 插件配置项
 
@@ -158,7 +158,7 @@ export const myPlugin = (): CliPlugin => ({
 });
 ```
 
-插件 API 的详细说明，请参考 [Plugin API](/guides/topic-detail/framework-plugin/plugin-api)。
+插件 API 的详细说明，请参考 [Plugin API](/plugin/plugin-system/plugin-api)。
 
 ### 异步 setup