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

package/docs/en/guides/deprecated.md

@@ -13,3 +13,5 @@ The Monorepo solution previously provided by Modern.js was implemented based on
 ## Enabling the test capability with the new command
 
 The test capability previously provided by Modern.js was a simple wrapper based on Jest, which led to issues such as unintuitive Jest configuration and more complex user configuration. In version [v2.53.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.53.0), the option to enable the test feature in application and module projects has been removed. It is recommended to directly use the testing solutions provided by the community.
+
+Previously, Modern.js provided a comprehensive set of ESLint rules, including @modern-js (for Node.js project linting rules) and @modern-js-app (for frontend project linting rules). In version [v2.60.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.60.0), we officially removed these rule sets. We encourage developers to choose appropriate code standard tools based on their needs, either by directly using ESLint with community-recommended rules or by using Biome to enhance code formatting performance.

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

@@ -12,13 +12,13 @@ The BFF service acts as an intermediary between the frontend application and the
 
 ## Bundler
 
-import Bundler from '@modern-js/builder-doc/docs/en/shared/bundler.md';
+import Bundler from '@site-docs-en/components/bundler.mdx';
 
 <Bundler />
 
 ## Builder
 
-import Builder from '@modern-js/builder-doc/docs/en/shared/builder.md';
+import Builder from '@site-docs-en/components/builder.mdx';
 
 <Builder />
 
@@ -36,25 +36,25 @@ Starting from the architecture level, it combines multiple independently deliver
 
 ## Micro-frontend
 
-import MicroFrontend from '@modern-js/builder-doc/docs/en/shared/micro-frontend.md';
+import MicroFrontend from '@site-docs-en/components/micro-frontend.mdx';
 
 <MicroFrontend />
 
 ## Module Federation
 
-import ModuleFederation from '@modern-js/builder-doc/docs/en/shared/module-federation.md';
+import ModuleFederation from '@site-docs-en/components/module-federation.mdx';
 
 <ModuleFederation />
 
 ## Rsbuild
 
-import Rsbuild from '@modern-js/builder-doc/docs/en/shared/rsbuild.md';
+import Rsbuild from '@site-docs-en/components/rsbuild.mdx';
 
 <Rsbuild />
 
 ## Rspack
 
-import Rspack from '@modern-js/builder-doc/docs/en/shared/rspack.md';
+import Rspack from '@site-docs-en/components/rspack.mdx';
 
 <Rspack />
 
@@ -76,6 +76,6 @@ Compared to traditional SSR, SSG can provide faster loading speeds and less serv
 
 ## SWC
 
-import SWC from '@modern-js/builder-doc/docs/en/shared/swc.md';
+import SWC from '@site-docs-en/components/swc.mdx';
 
 <SWC />

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

@@ -70,7 +70,7 @@ In a newly created project, the `@modern-js/app-tools` npm package is installed
 
 - It offers commonly used CLI commands such as `modern dev`, `modern build`, and more.
 - It integrates Modern.js Core, providing capabilities for configuration parsing, plugin loading, and more.
-- It integrates Modern.js Builder, providing build capabilities.
+- It integrates Rsbuild, providing build capabilities.
 - It integrates Modern.js Server, providing capabilities for development and production servers.
 
 `@modern-js/app-tools` is implemented based on the plugin system of Modern.js. Essentially, it is a plugin. Therefore, you need to register `appTools` in the `plugins` field of the configuration file:

package/docs/en/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/en/guides/topic-detail/micro-frontend/c01-introduction.mdx

@@ -5,7 +5,7 @@ title: Introduction
 
 # Introduction
 
-import MicroFrontend from '@modern-js/builder-doc/docs/en/shared/micro-frontend.md';
+import MicroFrontend from '@site-docs-en/components/micro-frontend.mdx';
 
 <MicroFrontend />
 

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

@@ -40,8 +40,8 @@ Modern.js provides [inspect command](https://modernjs.dev/en/apis/app/commands.h
 
 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
+  - Builder Config: /root/my-project/dist/rsbuild.config.mjs
+  - Rspack Config (web): /root/my-project/dist/rspack.config.web.mjs
 ```
 
 ---

package/docs/en/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/en/plugin/cli-plugins/_meta.json

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

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

@@ -0,0 +1,5 @@
+# BFF Plugin
+
+In a Modern.js application, developers can define API files under the `api/lambda` directory and export API functions using the BFF plugin. In the frontend code, these API functions can be directly invoked by importing the file, which initiates the API requests.
+
+For more details, refer to [BFF - Basic Usage](/guides/advanced-features/bff/function).

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

@@ -0,0 +1,5 @@
+# SSG Plugin
+
+SSG (Static Site Generation) is a technical solution that renders complete static web pages at build time based on data and templates. This means that in a production environment, pages are populated with content by default and can be cached by a CDN. For pages that do not require dynamic data, SSG can provide better performance and higher security.
+
+For more details, refer to [Static Site Generation (SSG)](/guides/basic-features/render/ssg).

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

@@ -4,7 +4,14 @@ sidebar_position: 2
 
 # SWC Plugin
 
-import SWC from '@modern-js/builder-doc/docs/en/shared/swc.md';
+:::warning
+**The SWC feature in the current document is no longer maintained**, we recommend using the Rspack + SWC solution.
+
+Please refer to [「Use Rspack」](guides/advanced-features/rspack-start) for more information.
+
+:::
+
+import SWC from '@site-docs-en/components/swc.mdx';
 
 <SWC />
 
@@ -44,9 +51,9 @@ For a detailed comparison between minifiers, see [minification-benchmarks](https
 
 ### Used in Modern.js framework
 
-The Modern.js framework integrates the Builder's SWC plugin, and you can use it in the following ways:
+The Modern.js framework integrates the SWC plugin, and you can use it in the following ways:
 
-import EnableSWC from '@modern-js/builder-doc/docs/en/shared/enableSwc.md';
+import EnableSWC from '@site-docs-en/components/enableSwc.mdx';
 
 <EnableSWC />
 
@@ -290,7 +297,7 @@ This is ported by Next.js team from [@emotion/babel-plugin](https://www.npmjs.co
 #### extensions.pluginImport
 
 :::tip
-Builder provides the [source.transformImport](/configure/app/source/transform-import) config, so you don't need to configure `extensions.pluginImport` manually.
+Modern.js provides the [source.transformImport](/configure/app/source/transform-import) config, so you don't need to configure `extensions.pluginImport` manually.
 :::
 
 Ported from [babel-plugin-import](https://github.com/umijs/babel-plugin-import), configurations are the same.

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

@@ -0,0 +1,5 @@
+# Tailwind CSS Plugin
+
+Tailwind CSS is a utility-first CSS framework and design system that allows you to quickly add commonly used styles to components while supporting flexible theme style extensions.
+
+For more details, refer to [Using Tailwind CSS](/guides/basic-features/css/tailwindcss).

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

@@ -0,0 +1,6 @@
+# Overview
+
+- [@modern-js/plugin-tailwindcss](/plugin/cli-plugins/plugin-tailwind): Enables the use of Tailwind CSS styles.
+- [@modern-js/plugin-bff](/plugin/cli-plugins/plugin-bff): Provides BFF services and unified invocation capabilities.
+- [@modern-js/plugin-ssg](/plugin/cli-plugins/plugin-ssg): Provides static site generation capabilities.
+- [@modern-js/plugin-swc](/plugin/cli-plugins/plugin-swc): Provides SWC compilation support.

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

@@ -1,11 +1,26 @@
----
-sidebar_position: 21
-title: Using Rsbuild Plugin
----
+# Plugin
 
-# Using Rsbuild Plugin
+In Modern.js, you can directly use two types of plugins: Modern.js framework plugins and Rsbuild plugins.
 
-## Introduce Rsbuild Plugin
+## Modern.js Framework Plugin
+
+Modern.js has its own framework plugin system. You can use Modern.js plugins by configuring the [`plugins`](/configure/app/plugins) field in `modern.config.ts`.
+
+### Plugin Types
+
+Framework plugins can be categorized into three types:
+
+1. [CLI Plugins](/plugin/cli-plugins): These are used to provide additional functionality when the Modern.js commands are executed in the application. Examples include adding commands, modifying configuration, and monitoring files. Most build-related capabilities can be achieved through CLI plugins.
+2. Server Plugins: These add extra functionality when the application receives requests. Examples include adding middleware and modifying request responses.
+3. Runtime Plugins: These provide additional functionality when the application runs React code. Examples include performing initialization actions and wrapping React higher-order components.
+
+:::note
+Server plugins and Runtime plugins are coming soon.
+:::
+
+### Developing Plugins
+
+If you need to develop Modern.js framework plugins, you can read [Modern.js Plugin System](/plugin/plugin-system/introduction) for more information.
 
 Rsbuild is the build tool of Modern.js. You can modify the default build behavior and add various additional features by adding the Rsbuild plugin, including but not limited to:
 
@@ -22,9 +37,15 @@ Modern.js has upgraded the build tool to [Rsbuild](https://rsbuild.dev/) startin
 If your current version is lower than MAJOR_VERSION.46.0, you can upgrade by executing `npx modern upgrade`.
 :::
 
-## Official Plugins
+:::info
+For more information about the Rsbuild plugin system, you can read [Rsbuild Official Site - Plugins](https://rsbuild.dev/plugins/list/index).
+:::
+
+## Rsbuild Plugin
 
-### Builtin Plugins
+### Official Plugins
+
+#### Builtin Plugins
 
 Here are the official Rsbuild plugins built into Modern.js:
 
@@ -44,10 +65,14 @@ Here are the official Rsbuild plugins built into Modern.js:
 | [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | Used to import YAML files and convert them into JavaScript objects                                           | [TOML File](/guides/basic-features/static-assets/json-files.html#toml-file)                                                                         |
 | [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | Used to import TOML files and convert them into JavaScript objects                                           | [YAML File](/guides/basic-features/static-assets/json-files.html#yaml-file)                                                                         |
 
-### Un-builtin Plugins
+#### Un-builtin Plugins
 
 Here are the official Rsbuild plugins that are not built into Modern.js:
 
 - [Image Compress Plugin](https://github.com/rspack-contrib/rsbuild-plugin-image-compress): Compress the image resources used in the project.
 - [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus): Use Stylus as the CSS preprocessor.
 - [UMD Plugin](https://github.com/rspack-contrib/rsbuild-plugin-umd): Used to build outputs in UMD format.
+
+import OtherPlugins from '@site-docs-en/components/other-plugins.mdx';
+
+<OtherPlugins />

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

@@ -4,7 +4,7 @@ sidebar_position: 5
 
 # Extending Plugin Hooks
 
-This section describes how to extend plugin Hooks by dynamically registering [Hook models](/guides/topic-detail/framework-plugin/hook).
+This section describes how to extend plugin Hooks by dynamically registering [Hook models](/plugin/plugin-system/hook).
 
 ## Example
 

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

@@ -28,7 +28,7 @@ const myPlugin = {
 };
 ```
 
-In addition, plugins allow configuration of the execution order with other plugins. For more information, please refer to [Plugin Relationship](/guides/topic-detail/framework-plugin/relationship).
+In addition, plugins allow configuration of the execution order with other plugins. For more information, please refer to [Plugin Relationship](/plugin/plugin-system/relationship).
 
 ### Plugin Types
 
@@ -108,7 +108,7 @@ import type { MyPluginHook } from 'xxx';
 const myPlugin: CliPlugin<AppTools & { hooks: MyPluginHook }> = {};
 ```
 
-Please refer to [Extending Hooks](/guides/topic-detail/framework-plugin/extend) for detailed explanations.
+Please refer to [Extending Hooks](/plugin/plugin-system/extend) for detailed explanations.
 
 ### Plugin Configuration
 
@@ -151,7 +151,7 @@ export const myPlugin = (): CliPlugin => ({
 });
 ```
 
-For more detail [Plugin API](/guides/topic-detail/framework-plugin/plugin-api).
+For more detail [Plugin API](/plugin/plugin-system/plugin-api).
 
 ### Async setup
 

package/docs/en/{guides/topic-detail/framework-plugin → plugin/plugin-system}/plugin-api.mdx

@@ -44,7 +44,7 @@ interface UserConfig {
 Please refer to [Configuration](/configure/app/usage) for the specific meanings of configuration fields.
 
 :::tip
-This method returns a read-only configuration and cannot be modified. If you need to modify the configuration, please use [config hook](/guides/topic-detail/framework-plugin/hook-list.html#config).
+This method returns a read-only configuration and cannot be modified. If you need to modify the configuration, please use [config hook](/plugin/plugin-system/hook-list.html#config).
 :::
 
 ### useResolvedConfigContext
@@ -67,7 +67,7 @@ interface NormalizedConfig {
 Please refer to [Configuration](/configure/app/usage) for the specific meanings of configuration fields.
 
 :::tip
-This method returns a read-only configuration and cannot be modified. If you need to modify the configuration, please use [config hook](/guides/topic-detail/framework-plugin/hook-list.html#config).
+This method returns a read-only configuration and cannot be modified. If you need to modify the configuration, please use [config hook](/plugin/plugin-system/hook-list.html#config).
 :::
 
 ### useAppContext

package/docs/en/plugin/rsbuild-plugins/_meta.json

@@ -0,0 +1 @@
+["plugin-esbuild"]

package/docs/en/{guides → plugin}/rsbuild-plugins/plugin-esbuild.mdx

@@ -11,7 +11,7 @@ Please refer to [「Use Rspack」](guides/advanced-features/rspack-start) for mo
 
 :::
 
-import Esbuild from '@modern-js/builder-doc/docs/en/shared/esbuild.md';
+import Esbuild from '@site-docs-en/components/esbuild.mdx';
 
 <Esbuild />
 
@@ -19,7 +19,7 @@ import Esbuild from '@modern-js/builder-doc/docs/en/shared/esbuild.md';
 
 ### Used in Modern.js framework
 
-The Modern.js framework integrates the Builder's esbuild plugin by default, so you don't need to manually install and register the plugin, just use the [tools.esbuild](https://modernjs.dev/en/configure/app/tools/esbuild.html) configuration:
+The Modern.js framework integrates the esbuild plugin by default, so you don't need to manually install and register the plugin, just use the [tools.esbuild](https://modernjs.dev/en/configure/app/tools/esbuild.html) configuration:
 
 ```js
 export default defineConfig({
@@ -102,7 +102,7 @@ builderPluginEsbuild({
 
 #### Disable transformation
 
-Set `loader` to `false` to disable esbuild transformation, and Builder will continue to use Babel to transform the code.
+Set `loader` to `false` to disable esbuild transformation, and Modern.js will continue to use Babel to transform the code.
 
 ```ts
 builderPluginEsbuild({
@@ -146,7 +146,7 @@ builderPluginEsbuild({
 
 #### Disable minification
 
-Set `minimize` to `false` to disable esbuild minification, and Builder will continue to use Terser to minify the code.
+Set `minimize` to `false` to disable esbuild minification, and Modern.js will continue to use Terser to minify the code.
 
 ```ts
 builderPluginEsbuild({

package/docs/en/plugin/rsbuild-plugins.mdx

@@ -0,0 +1,3 @@
+# Overview
+
+- [@modern-js/plugin-esbuild](/plugin/rsbuild-plugins/plugin-esbuild): Provides esbuild compilation support.

package/docs/zh/_meta.json

@@ -4,21 +4,26 @@
     "link": "/guides/get-started/introduction",
     "activeMatch": "/guides/"
   },
-  {
-    "text": "tutorials",
-    "link": "/tutorials/foundations/introduction",
-    "activeMatch": "/tutorials/"
-  },
   {
     "text": "configure",
     "link": "/configure/app/usage",
     "activeMatch": "/configure/"
   },
+  {
+    "text": "plugin-menu",
+    "link": "/plugin/introduction",
+    "activeMatch": "/plugin/"
+  },
   {
     "text": "apis",
     "link": "/apis/app/commands",
     "activeMatch": "/apis/"
   },
+  {
+    "text": "tutorials",
+    "link": "/tutorials/foundations/introduction",
+    "activeMatch": "/tutorials/"
+  },
   {
     "text": "community",
     "link": "/community/showcase",

package/docs/zh/apis/app/hooks/api/lambda.mdx

@@ -2,56 +2,13 @@
 title: lambda/*.[tj]s
 sidebar_position: 3
 ---
-# lambda/*.[tj]s
-
-在 [BFF 框架写法](/guides/advanced-features/bff/type.html#框架写法)下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/lambda#白名单)外，`lambda/` 目录下的文件会被注册为接口的路由。
-
-:::info
-使用 `api` 目录需要开启 BFF 功能，需要在项目下执行 new 命令启用「BFF」功能。
 
-:::
+# lambda/*.[tj]s
 
-:::tip
-该文件支持使用 `js` 或 `ts` 语言，但必须使用 `esm` 语法导出函数。
+开启 BFF 后，`lambda/` 目录下的文件会按照约定被注册为 BFF 的路由。
 
+:::note
+文件支持使用 `js` 或 `ts` 语言，但必须使用 `esm` 语法导出函数。
 :::
 
-## 路由规则
-
-### 默认路由
-
-路由系统会将以 `index` 命名的文件会被映射到上一层目录。
-
-- `api/lambda/index.ts` -> `$BASENAME/`
-- `api/lambda/user/index.ts` -> `$BASENAME/user`
-
-### 多级路由
-
-路由系统也支持解析多级的文件，如果创建文件夹结构，文件仍会以相同方式自动解析路由。
-
-- `api/lambda/hello.ts` -> `$BASENAME/hello`
-- `api/lambda/user/list.ts` -> `$BASENAME/user/list`
-
-### 动态路由
-
-路由系统支持通过 `[]` 命名的文件目录生成动态路由。
-
-- `api/lambda/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
-- `api/lambda/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
-- `api/lambda/article/[id]/info.ts` -> `$BASENAME/article/:id/info`
-
-其中的 `$BASENAME` 可以在 `modern.config.js` 中进行配置，默认值为 `/api`。
-
-### 白名单
-
-默认 `lambda` 目录下所有文件都会当作 BFF 函数文件去解析，但同样我们也设置了白名单，这些文件不被被解析：
-
-- 命名以 `_` 开头的文件。例如：`_utils.ts`。
-- 命名以 `_` 开头的文件夹下所有文件。例如：`_utils/index.ts`、`_utils/cp.ts`。
-- 测试文件。例如：`foo.test.ts`。
-- TypeScript 类型文件。例如：`hello.d.ts`。
-- `node_module` 下的文件。
-
-## 函数定义
-
-和函数写法下[函数定义](/apis/app/hooks/api/api#函数定义)完全一致。
+详细内容可以参考 [BFF 函数路由](/guides/advanced-features/bff/function.html#函数路由)。

package/docs/zh/apis/app/hooks/api/middleware.mdx

@@ -0,0 +1,11 @@
+---
+title: _app.[tj]s
+sidebar_position: 2
+---
+# _app.[tj]s
+
+该文件可以为 BFF 函数添加前置中间件，详细内容参考 [扩展 BFF Server](/guides/advanced-features/bff/extend-server)。
+
+:::note
+具体示例请参考 [hook](/apis/app/runtime/bff/hook)。
+:::

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

@@ -132,7 +132,7 @@ Modern.js 可以划分为三个核心部分：**CLI 工具、服务端和运行
 
 在字节跳动内部，我们借助这些插件 API，结合公司内的基建和平台，封装出内部的企业级框架。如果你需要对 Modern.js 框架进行深度定制，也可以借助这些插件 API 来完成。
 
-> 如果你对 Modern.js 的插件系统感兴趣，请阅读 [「Modern.js - 自定义插件」](https://modernjs.dev/guides/topic-detail/framework-plugin/introduction.html)文档。
+> 如果你对 Modern.js 的插件系统感兴趣，请阅读 [「Modern.js - 自定义插件」](https://modernjs.dev/plugin/plugin-system/introduction.html)文档。
 
 ### 嵌套路由
 

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

@@ -185,7 +185,6 @@ pnpm run lint
 root
 └─ packages
    └─ document
-       ├─ builder-doc    # Modern.js Builder 文档
        ├─ main-doc       # Modern.js Framework 文档
        └─ module-doc     # Modern.js Module 文档
 ```

package/docs/zh/components/builder.mdx

@@ -0,0 +1,3 @@
+Builder 指的是 Modern.js 的构建层，它的目标是为 Modern.js 用户提供开箱即用的构建能力，并支持在 webpack 和 Rspack 间无缝切换。
+
+Modern.js `MAJOR_VERSION.46.0` 之前版本使用的是 `@modern-js/builder`, 从 `MAJOR_VERSION.46.0` 开始升级为 [Rsbuild](https://rsbuild.dev/)。

package/docs/zh/components/bundler.mdx

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

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

@@ -1,5 +1,22 @@
-1. 执行 `pnpm new`，选择启用 BFF
-2. 根据选择的运行时框架，将下面的代码添加到 `modern.config.[tj]s` 中：
+import { PackageManagerTabs } from '@theme';
+
+1. 执行 `new` 命令：
+
+<PackageManagerTabs command="run new" />
+
+2. 按照提示，选择**启用 BFF 功能**：
+
+```bash
+? 请选择你想要的操作 启用可选功能
+? 请选择功能名称 启用「BFF」功能
+? 请选择 BFF 类型 框架模式
+```
+
+:::note
+目前推荐使用框架模式创建 BFF，后续我们将会移除 BFF 类型的概念。
+:::
+
+3. 根据选择的运行时框架，将下面的代码添加到 `modern.config.[tj]s` 中：
 
 import { Tabs, Tab as TabItem } from "@theme";
 

package/docs/zh/components/enableSwc.mdx

@@ -0,0 +1,17 @@
+首先，你需要执行 `pnpm run new` 启用 SWC 编译：
+
+```bash
+? 请选择你想要的操作 启用可选功能
+? 请选择功能名称 启用「SWC 编译」
+```
+
+执行完成后，你只需在 `modern.config.ts` 文件中注册 Modern.js 的 SWC 插件，即可启用 SWC 编译和压缩能力。
+
+```ts title="modern.config.ts"
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { swcPlugin } from '@modern-js/plugin-swc';
+
+export default defineConfig({
+  plugins: [appTools(), swcPlugin()],
+});
+```

package/docs/zh/components/esbuild.mdx

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

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

@@ -0,0 +1,5 @@
+普通的 BFF 函数写法有时并不能满足需求，我们正在设计一套更强大的 BFF 函数写法，让开发者更方便地扩展 BFF 函数。
+
+:::note
+敬请期待
+:::

package/docs/zh/components/micro-frontend.mdx

@@ -0,0 +1,6 @@
+微前端（Micro-frontend，简称 MFE）是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，它将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。
+
+它主要解决了两个问题：
+
+- 随着项目迭代应用越来越庞大，难以维护。
+- 跨团队或跨部门协作开发项目导致效率低下的问题。

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

@@ -0,0 +1,7 @@
+模块联邦（Module Federation，简称 MF）是 Webpack 的一个特性。它允许 JavaScript 应用从另一个应用动态加载代码，并在此过程中共享依赖关系。如果使用联邦模块的应用缺少联邦代码所需的依赖项，Webpack 将从该联邦的构建源下载缺失的依赖项。
+
+这使得可以创建微前端风格的应用程序，多个系统可以共享代码，并在不需要重新构建整个应用程序的情况下进行动态更新。
+
+Modern.js 提供了一个 Module Federation 的示例项目，请参考 [module-federation-examples - modernjs](https://github.com/module-federation/module-federation-examples/tree/db5bdbeee56f779999a2c591fc553eb94eb20b36/modernjs)。
+
+你也可以阅读 [webpack Module Federation 文档](https://webpack.docschina.org/concepts/module-federation/) 来了解更多概念。

package/docs/zh/components/nodeVersion.mdx

@@ -0,0 +1,28 @@
+在开始使用前，你需要安装 [Node.js](https://nodejs.org/)，并保证 Node.js 版本不低于 16.2.0，**我们推荐使用 Node.js 18 的 LTS 版本**。
+
+你可以通过以下命令检查当前使用的 Node.js 版本：
+
+```bash
+node -v
+```
+
+如果你当前的环境中尚未安装 Node.js，或是安装的版本低于 16，可以通过 [nvm](https://github.com/nvm-sh/nvm) 或 [fnm](https://github.com/Schniz/fnm) 安装需要的版本。
+
+下面是通过 nvm 安装 Node.js 18 LTS 版本的例子：
+
+```bash
+# 安装 Node.js 18 的长期支持版本
+nvm install 18 --lts
+
+# 将刚安装的 Node.js 18 设置为默认版本
+nvm alias default 18
+
+# 切换到刚安装的 Node.js 18
+nvm use 18
+```
+
+:::tip nvm 和 fnm
+nvm 和 fnm 都是 Node.js 版本管理工具。相对来说，nvm 较为成熟和稳定，而 fnm 是使用 Rust 实现的，比 nvm 提供了更好的性能。
+:::
+
+此外，在安装 nvm 或 fnm 后，然后只要仓库根目录下有内容为 `lts/hydrogen` 的 `.nvmrc` 文件，进入这个仓库时就会自动安装或切换到正确的 Node.js 版本。

package/docs/zh/components/prerequisites.mdx

@@ -1,6 +1,6 @@
 ### Node.js
 
-import NodeVersion from '@modern-js/builder-doc/docs/zh/shared/nodeVersion.md';
+import NodeVersion from '@site-docs/components/nodeVersion.mdx';
 
 <NodeVersion />
 

package/docs/zh/components/rsbuild-config-tooltip.mdx

@@ -0,0 +1,5 @@
+import RsbuildLInk from '@site/src/components/RsbuildLink';
+
+:::info
+该配置项的使用方式与 Rsbuild 完全一致。详细信息请参考 <RsbuildLInk configName={frontmatter.configName}/>。
+:::

package/docs/zh/components/rsbuild.mdx

@@ -0,0 +1,3 @@
+[Rsbuild](https://rsbuild.dev/) 是一个基于 Rspack 的 web 构建工具，它的目标是为 Rspack 用户提供开箱即用的构建能力，使开发者能够在零配置的情况下启动一个 web 项目。
+
+Rsbuild 集成了社区中基于 Rust 的高性能工具，包括 Rspack 和 SWC，以提供一流的构建速度和开发体验。