@modern-js/main-doc 2.46.1 → 2.47.1

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

@@ -4,44 +4,42 @@ sidebar_position: 2
 
 # Build Engine
 
-**Modern.js uses [Modern.js Builder](https://modernjs.dev/builder/en) to build your Web App.**
+Modern.js internally encapsulates its own build tool (Modern.js Builder) based on [Rsbuild](https://rsbuild.dev/), and supports seamless switching between Webpack and Rspack bundlers.
 
-Modern.js Builder is one of the core components of the Modern.js system. It is a build tool for web development scenarios that can be used independently of Modern.js. Modern.js Builder supports multiple bundlers such as webpack and Rspack, and by default uses the most mature webpack for bundling.
+::: tip What is Rsbuild?
+Rsbuild is a build tool based on Rspack. It is an enhanced Rspack CLI, easy-to-use, and ready-to-use out of the box.
+:::
 
 ## Build Architecture
 
-From a building perspective, Modern.js is divided into three layers, from top to bottom:
+From the building perspective, Modern.js can be divided into three-layers, from top to bottom:
 
-- Upper-level development framework: Modern.js.
-- Common build tool: Modern.js Builder.
-- Low-level bundler: webpack and Rspack.
+- Upper-level framework: Modern.js (open source) and EdenX (internal).
+- Build tool: Rsbuild.
+- Bundler: Webpack and Rspack.
 
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-0824.png" style={{ width: '100%', maxWidth: '540px' }} />
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/build-layers-02193.png"
+  style={{ width: '100%', maxWidth: '540px' }}
+/>
 
-## Builder Documentation
+## Build Documentation
 
-Since Modern.js Builder is a module that can be used independently, we have provided separate documentation for it, which can be found at [modernjs.dev/builder](https://modernjs.dev/builder/en).
+The documentation address of Rsbuild is: https://rsbuild.dev/
 
-In this documentation, you can learn about the detailed introduction of Modern.js Builder, and you can also find complete usage guides for various building capabilities. If you have any building needs or problems, it is recommended that you read the Modern.js Builder documentation first to solve them.
+In this documentation, you can learn about the detailed introduction of Rsbuild, and you can also find complete usage guides for various building capabilities.
 
-## Builder Configuration
+If you want to understand the use of build configurations, it is recommended that you read the Modern.js documentation first, because the build configurations and defaults in Modern.js are not exactly the same as Rsbuild.
 
-Modern.js's configuration inherits from Modern.js Builder, so you can use all the build configurations provided by Modern.js Builder in Modern.js.
+## Build Plugins
 
-Taking the `html.title` config option of Modern.js Builder as an example, you can directly use this option in the `modern.config.ts` file, and it will be automatically passed to Modern.js Builder.
+In Modern.js, you can register Webpack plugins, Rspack plugins, or Rsbuild plugins:
 
-```ts title="modern.config.js"
-export default defineConfig({
-  html: {
-    title: 'example',
-  },
-});
-```
+- Webpack / Rspack plugins: Configured through [tools.bundlerChain](/configure/app/tools/bundler-chain).
+- Rsbuild plugins: Configured through [builderPlugins](/configure/app/builder-plugins).
 
-For detailed information about build configuration, please refer to [「Modern.js Builder - Builder Config」](https://modernjs.dev/builder/en/guide/basic/builder-config.html).
+## Build Capabilities
 
-## Builder Capabilities
+Rsbuild provides rich build capabilities, including JavaScript compilation, CSS compilation, static assets processing, code hot update, code compression, TS type checking, and dozens of other capabilities.
 
-Modern.js Builder provides rich build capabilities, including JavaScript compilation, CSS compilation, static assets processing, code hot update, code compression, TS type checking, and dozens of other capabilities.
-
-We recommend that you read [「Modern.js Builder - All Features」](https://modernjs.dev/builder/en/guide/features.html) to learn about all the features provided by Modern.js Builder.
+We recommend that you read [「Rsbuild - All Features」](https://rsbuild.dev/guide/start/features) to learn about all the features provided by Rsbuild.

package/docs/en/guides/get-started/tech-stack.mdx

@@ -89,7 +89,7 @@ Modern.js supports enabling ["Tailwind CSS"](/en/guides/basic-features/css.html#
 Modern.js supports three CSS preprocessors: [Sass](https://sass-lang.com/), [Less](https://lesscss.org/), and [Stylus](https://stylus-lang.com/):
 
 - Sass and Less are supported by default and ready to use.
-- Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://modernjs.dev/builder/en/plugins/plugin-stylus.html).
+- Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://rsbuild.dev/plugins/list/plugin-stylus).
 
 ---
 

package/docs/en/guides/topic-detail/framework-plugin/introduction.mdx

@@ -10,7 +10,7 @@ Modern.js offers a comprehensive plugin system with a complete lifecycle. Plugin
 
 ## Usage
 
-Plugins must be explicitly registered in the configuration file to be effective. When you need to add plugins to Modern.js, you can configure them in the `[plugin](/configure/app/plugins.html)` field:
+Plugins must be explicitly registered in the configuration file to be effective. When you need to add plugins to Modern.js, you can configure them in the `[plugins](/configure/app/plugins.html)` field:
 
 ```ts title="edenx.config.ts"
 // an example for bff

package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -12,14 +12,15 @@ Through this chapter you can learn:
 
 ## Create an app
 
-Currently supports two routing modes
+The routing modes of the current project are divided into the following three types:
 
-- Self-controlled routing
-- Conventional routing
+- File-based routing (`router: true` and file-based)
+- Self-Controlled routing (`router: true` and create `BrowserRouter`)
+- Other (`router: false` and independent installation of `react-router-dom` in the project)
 
 First, clarify the routing mode of the main application [create a file-based routing main App](#file-based-routing-main-app) or [create a self-controlled main App](#self-controlled-main-app)
 
-In this experience we will create two sub-applications Table and Dashboard for the main application (Table is reduced routing, Dashboard is self-controlled routing)
+In this tutorial we will create two sub-applications Table and Dashboard for the main application (Table is reduced routing, Dashboard is self-controlled routing)
 
 ### File-based Routing Main App
 
@@ -139,6 +140,36 @@ import CustomRouterMicroFrontend from '@site-docs-en/components/custom-router-mi
 
 <CustomRouterMicroFrontend />
 
+### Other Main App
+
+Install and use `react-router-dom` independently in the project. The only difference from self-controlled routing is that after setting `router: false`, plugin-garfish cannot obtain `useLocation`, `useHref` and other hooks to assist in calculating basename and main and child applications. Route synchronization
+
+import { Tab, Tabs } from 'rspress/theme';
+
+<Tabs>
+<Tab label="react-router-dom@6">
+```tsx
+import { useLocation, useHref } from 'react-router-dom';
+const App = () => {
+  const basename = useHref('/table');
+  const { Table } = useModuleApps();
+  return <Table useLocation={useLocation} basename={basename} />;
+};
+```
+</Tab>
+<Tab label="react-router-dom@5">
+```tsx
+import { useLocation, useHistory } from 'react-router-dom';
+const App = () => {
+  const history = useHistory();
+  const basename = history.createHref({ pathname: '/table' });
+  const { Table } = useModuleApps();
+  return <Table useLocation={useLocation} basename={basename} />;
+};
+```
+</Tab>
+</Tabs>
+
 ### File-based sub-app
 
 Initialize the project with a command line:

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

@@ -195,7 +195,7 @@ Options:
 
 ## modern inspect
 
-`modern inspect` 命令用于查看项目的 [Modern.js Builder 配置](https://modernjs.dev/builder/guide/basic/builder-config.html) 以及 webpack 配置。
+`modern inspect` 命令用于查看项目的 [Rsbuild 配置](https://rsbuild.dev/zh/config/index) 以及 webpack 或 Rspack 配置。
 
 ```bash
 Usage: modern inspect [options]
@@ -210,16 +210,16 @@ Options:
 
 在项目根目录下执行命令 `npx modern inspect` 后，会在项目的 `dist` 目录生成以下文件：
 
-- `builder.config.js`: 表示在构建时使用的 Modern.js Builder 配置。
-- `webpack.config.web.js`: 表示在构建时使用的 webpack 配置。
+- `rsbuild.config.mjs`: 表示在构建时使用的 Rsbuild 配置。
+- `webpack.config.web.mjs`: 表示在构建时使用的 webpack 配置。
 
 ```bash
 ➜ npx modern inspect
 
 Inspect config succeed, open following files to view the content:
 
-  - Builder Config: /root/my-project/dist/builder.config.js
-  - Webpack Config (web): /root/my-project/dist/webpack.config.web.js
+  - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
+  - Webpack Config (web): /root/my-project/dist/webpack.config.web.mjs
 ```
 
 ### 指定环境
@@ -240,16 +240,16 @@ modern inspect --verbose
 
 ### SSR 构建配置
 
-如果项目开启了 SSR 能力，则在 `dist` 目录会另外生成一份 `webpack.config.node.js` 文件，对应 SSR 构建时的 webpack 配置。
+如果项目开启了 SSR 能力，则在 `dist` 目录会另外生成一份 `webpack.config.node.mjs` 文件，对应 SSR 构建时的 webpack 配置。
 
 ```bash
 ➜ npx modern inspect
 
 Inspect config succeed, open following files to view the content:
 
-  - Builder Config: /root/my-project/dist/builder.config.js
-  - Webpack Config (web): /root/my-project/dist/webpack.config.web.js
-  - Webpack Config (node): /root/my-project/dist/webpack.config.node.js
+  - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
+  - Webpack Config (web): /root/my-project/dist/webpack.config.web.mjs
+  - Webpack Config (node): /root/my-project/dist/webpack.config.node.mjs
 ```
 
 ## modern lint

package/docs/zh/configure/app/auto-load-plugin.mdx

@@ -39,14 +39,14 @@ Modern.js 将通过以下几个步骤帮你自动注册插件
 1. Modern.js 在内部维护一份官方插件列表。
 
 ```js
-const InternalPlugins = ['@modern-js/app-tools', '@modern-js/plugin-i18n', ...];
+const InternalPlugins = ['@modern-js/app-tools', '@modern-js/plugin-tailwindcss', ...];
 ```
 
 2. Modern.js 将读取你的 `package.json` 文件，收集依赖信息。
 
 ```json title="package.json"
 "dependencies": {
-  "@modern-js/plugin-i18n": "x.x.x"
+  "@modern-js/plugin-tailwindcss": "x.x.x"
   ...
 },
 "devDependencies": {
@@ -55,7 +55,7 @@ const InternalPlugins = ['@modern-js/app-tools', '@modern-js/plugin-i18n', ...];
 }
 ```
 
-3. Modern.js 观察到你安装了 `@modern-js/plugin-i18n` 和 `@modern-js/app-tools` 等依赖后，将会引入插件自动注册。
+3. Modern.js 观察到你安装了 `@modern-js/plugin-tailwindcss` 和 `@modern-js/app-tools` 等依赖后，将会引入插件自动注册。
 
 可以注意到这种方式相对黑盒，你甚至对加载插件的过程是无感知的。我们希望更多的细节暴露给开发者，能让开发者去控制这一过程。
 

package/docs/zh/configure/app/builder-plugins.mdx

@@ -4,18 +4,18 @@ sidebar_position: 21
 
 # builderPlugins 构建插件
 
-- **类型：** `BuilderPlugin[]`
+- **类型：** `RsbuildPlugin[]`
 - **默认值：** `[]`
 
-用于配置 Modern.js Builder 构建插件。
+用于配置 Rsbuild 构建插件。
 
-Modern.js Builder 是 Modern.js 底层的构建工具，请阅读 [构建能力](/guides/concept/builder) 了解相关背景。
+Rsbuild 是 Modern.js 底层的构建工具，请阅读 [构建能力](/guides/concept/builder) 了解相关背景。
 
-如果你想了解 Builder 插件的编写方式，可以参考 [Modern.js Builder - 插件系统](https://modernjs.dev/builder/plugins/introduction.html)。
+如果你想了解 Rsbuild 插件的编写方式，可以参考 [Rsbuild - 插件系统](https://rsbuild.dev/zh/plugins/dev/index)。
 
 ## 注意事项
 
-该选项**用于配置 Modern.js Builder 构建插件**，如果你需要配置其他类型的插件，请选择对应的配置方式：
+该选项**用于配置 Rsbuild 构建插件**，如果你需要配置其他类型的插件，请选择对应的配置方式：
 
 - 配置 Modern.js 框架插件，请使用 [plugins](/configure/app/plugins) 配置项。
 - 配置 Rspack 或 webpack 插件，请使用 [tools.bundlerChain](/configure/app/tools/bundler-chain) 配置项。
@@ -23,23 +23,23 @@ Modern.js Builder 是 Modern.js 底层的构建工具，请阅读 [构建能力]
 
 ## 何时使用
 
-大部分场景下，我们推荐你使用 Modern.js 框架插件，框架插件可以通过 [plugins](/configure/app/plugins) 字段进行注册。因为框架插件提供的 API 更丰富、能力更强，而 Builder 插件提供的 API 只能用于构建场景。
+大部分场景下，我们推荐你使用 Modern.js 框架插件，框架插件可以通过 [plugins](/configure/app/plugins) 字段进行注册。因为框架插件提供的 API 更丰富、能力更强，而 Rsbuild 插件提供的 API 只能用于构建场景。
 
-当你需要引用一些现有的 Builder 插件（并且在 Modern.js 中没有相关能力），或是在不同的框架之间复用 Builder 插件时，你可以使用 `builderPlugins` 字段进行注册。
+当你需要引用一些现有的 Rsbuild 插件（并且在 Modern.js 中没有相关能力），或是在不同的框架之间复用 Rsbuild 插件时，你可以使用 `builderPlugins` 字段进行注册。
 
 ## 示例
 
-下面是 Builder 插件的使用示例。
+下面是 Rsbuild 插件的使用示例。
 
 ### 使用 npm 上的插件
 
 使用 npm 上的插件，需要通过包管理器安装插件，并通过 import 引入。
 
 ```ts title="modern.config.ts"
-import { myBuilderPlugin } from 'my-builder-plugin';
+import { myRsbuildPlugin } from 'my-rsbuild-plugin';
 
 export default defineConfig({
-  builderPlugins: [myBuilderPlugin()],
+  builderPlugins: [myRsbuildPlugin()],
 });
 ```
 
@@ -48,10 +48,10 @@ export default defineConfig({
 使用本地代码仓库中的插件，直接通过相对路径 import 引入即可。
 
 ```ts title="modern.config.ts"
-import { myBuilderPlugin } from './plugin/myBuilderPlugin';
+import { myRsbuildPlugin } from './plugin/myRsbuildPlugin';
 
 export default defineConfig({
-  builderPlugins: [myBuilderPlugin()],
+  builderPlugins: [myRsbuildPlugin()],
 });
 ```
 
@@ -60,11 +60,11 @@ export default defineConfig({
 如果插件提供了一些自定义的配置项，可以通过插件函数的参数传入配置。
 
 ```ts title="modern.config.ts"
-import { myBuilderPlugin } from 'my-builder-plugin';
+import { myRsbuildPlugin } from 'my-rsbuild-plugin';
 
 export default defineConfig({
   builderPlugins: [
-    myBuilderPlugin({
+    myRsbuildPlugin({
       foo: 1,
       bar: 2,
     }),

package/docs/zh/configure/app/output/disable-node-polyfill.mdx

@@ -19,4 +19,4 @@ export default defineConfig({
 });
 ```
 
-该配置项基于 Modern.js Builder 的 Node Polyfill 插件实现，你可以阅读 [Modern.js Builder - Node Polyfill 插件](https://modernjs.dev/builder/plugins/plugin-node-polyfill.html) 文档来了解详细信息。
+该配置项基于 Rsbuild 的 Node Polyfill 插件实现，你可以阅读 [Rsbuild - Node Polyfill 插件](https://rsbuild.dev/zh/plugins/list/plugin-node-polyfill) 文档来了解详细信息。

package/docs/zh/configure/app/server/ssr.mdx

@@ -27,7 +27,7 @@ export default defineConfig({
 
 - `mode`：`string = 'string'`，默认为使用 `renderToString` 渲染。配置为 `stream` 开启流式渲染。
 - `forceCSR`：`boolean = false`，默认关闭强制 CSR 渲染。配置为 `true` 后，在页面访问时添加 `?csr=true` 或添加请求头 `x-modern-ssr-fallback` 即可强制 CSR。
-- `inlineScript`：`boolean = true`，默认情况下，SSR 的数据会以内联脚本的方式注入到 HTML 中，并且直接赋值给全局变量。配置为 `false` 后，会下发 JSON，而不是赋值给全局变量。
+- `inlineScript`：`boolean = true`，默认情况下，SSR 的数据会以内联脚本的方式注入到 HTML 中，并且直接赋值给全局变量。配置为 `false` 后，会下发 JSON，而不是赋值给全局变量，Streaming SSR 下，该配置不会生效。
 - `disablePrerender`: `boolean = fasle`, 为了兼容旧数据请求方式 - `useLoader`, 默认情况下 Modern.js 会对组件进行一次预渲染即有两次渲染。
   开发者在保证项目中没有使用 useLoader Api 情况下, 可通过配置 `disablePrerender=true`来减少一次渲染。
 - `unsafeHeaders`: `string[] = []`, 为了安全考虑，Modern.js 不会往 SSR_DATA 添加过多的内容。开发者可以通过该配置，对需要注入的 headers 进行配置。

package/docs/zh/configure/app/tools/esbuild.mdx

@@ -7,18 +7,18 @@ sidebar_label: esbuild
 - **类型：** `Object`
 - **默认值：** `undefined`
 
-## 介绍
+:::warning
+**当前文档中的 esbuild 功能已停止迭代**，我们更推荐使用 Rspack + SWC 的方案，因为 Rspack + SWC 具备更好的构建性能、功能丰富度和产物兼容性。
 
-import Esbuild from '@modern-js/builder-doc/docs/zh/shared/esbuild.md';
+请参考[「使用 Rspack」](/guides/advanced-features/rspack-start.html)了解更多。
 
-<Esbuild />
+:::
 
-:::tip 推荐使用 SWC
-相较于 esbuild，我们更推荐使用 SWC 来编译和压缩代码，因为 SWC 支持更多的语法特性、拥有更好的代码压缩率，并且产物具备更好的兼容性。
+## 介绍
 
-因此，我们建议你使用 SWC 而不是 esbuild，用法请参考 [tools.swc](/configure/app/tools/swc)。
+import Esbuild from '@modern-js/builder-doc/docs/zh/shared/esbuild.md';
 
-:::
+<Esbuild />
 
 ## 配置项
 

package/docs/zh/guides/advanced-features/compatibility.mdx

@@ -19,7 +19,7 @@ ios_saf >= 10
 ```
 
 :::tip
-请查看 [Modern.js Builder - 设置浏览器范围](https://modernjs.dev/builder/guide/advanced/browserslist) 来了解更多内容。
+请查看 [Rsbuild - 设置浏览器范围](https://rsbuild.dev/zh/guide/advanced/browserslist) 来了解更多内容。
 :::
 
 ## Polyfill

package/docs/zh/guides/advanced-features/optimize-bundle.mdx

@@ -44,9 +44,9 @@ BUNDLE_ANALYZE=true pnpm build
 
 ## 提升 Browserslist 范围
 
-Builder 会根据项目的 Browserslist 配置范围进行代码编译，并注入相应的 Polyfill。如果项目不需要兼容旧版浏览器，可以根据实际情况来提升 Browserslist 范围，从而减少在语法和 Polyfill 上的编译开销。
+Modern.js 会根据项目的 Browserslist 配置范围进行代码编译，并注入相应的 Polyfill。如果项目不需要兼容旧版浏览器，可以根据实际情况来提升 Browserslist 范围，从而减少在语法和 Polyfill 上的编译开销。
 
-Builder 默认的 Browserslist 配置为：
+Modern.js 默认的 Browserslist 配置为：
 
 ```js
 ['> 0.01%', 'not dead', 'not op_mini all'];
@@ -59,14 +59,14 @@ Builder 默认的 Browserslist 配置为：
 ```
 
 :::tip
-请阅读 [设置浏览器范围](https://modernjs.dev/builder/guide/advanced/browserslist.html) 章节来了解更多关于 Browserslist 的用法。
+请阅读 [设置浏览器范围](https://rsbuild.dev/zh/guide/advanced/browserslist) 章节来了解更多关于 Browserslist 的用法。
 :::
 
 ## 按需引入 polyfill
 
 在明确第三方依赖不需要额外 polyfill 的情况下，你可以将 [output.polyfill](/configure/app/output/polyfill.html) 设置为 `usage`。
 
-在 `usage` 模式下，Builder 会分析源代码中使用的语法，按需注入所需的 polyfill 代码，从而减少 polyfill 的代码量。
+在 `usage` 模式下，Modern.js 会分析源代码中使用的语法，按需注入所需的 polyfill 代码，从而减少 polyfill 的代码量。
 
 ```js
 export default {
@@ -85,20 +85,20 @@ export default {
 在一般的前端项目中，图片资源的体积往往是项目产物体积的大头，因此如果能尽可能精简图片的体积，那么将会对项目的打包产物体积起到明显的优化效果。你可以在 Modern.js 中注册插件来启用图片压缩功能:
 
 ```js title="modern.config.ts"
-import { builderPluginImageCompress } from '@modern-js/builder-plugin-image-compress';
+import { pluginImageCompress } from '@rsbuild/plugin-image-compress';
 
 export default {
-  builderPlugins: [builderPluginImageCompress()],
+  builderPlugins: [pluginImageCompress()],
 };
 ```
 
-详见 [Image Compress 插件](https://modernjs.dev/builder/plugins/plugin-image-compress.html)。
+详见 [Image Compress 插件](https://rsbuild.dev/zh/plugins/list/plugin-image-compress)。
 
 ## 代码拆包
 
 良好的拆包策略对于提升应用的加载性能是十分重要的，可以充分利用浏览器的缓存机制，减少请求数量，加快页面加载速度。
 
-在 Modern.js 中内置了[多种拆包策略](https://modernjs.dev/builder/guide/optimization/split-chunk)，可以满足大部分应用的需求，你也可以根据自己的业务场景，自定义拆包配置。
+在 Modern.js 中内置了[多种拆包策略](https://rsbuild.dev/zh/guide/optimization/split-chunk)，可以满足大部分应用的需求，你也可以根据自己的业务场景，自定义拆包配置。
 
 比如将 node_modules 下的 `axios` 库拆分到 `axios.js` 中：
 

package/docs/zh/guides/advanced-features/rsbuild-plugin.mdx

@@ -0,0 +1,51 @@
+---
+sidebar_position: 21
+title: 使用 Rsbuild 插件
+---
+
+# 使用 Rsbuild 插件
+
+## 插件介绍
+
+Rsbuild 是 Modern.js 底层的构建工具，可通过添加 Rsbuild 插件修改默认的构建行为并添加各类额外功能，包括但不限于：
+
+- 修改 Rsbuild 配置
+- 处理新的文件类型
+- 修改或编译文件
+- 部署产物
+
+你可以在 `modern.config.ts` 中通过 `builderPlugins` 选项来注册 Rsbuild 插件，详见 [builderPlugins 构建插件](/configure/app/builder-plugins.html)。
+
+## 官方插件
+
+:::tip
+Rsbuild 中大部分插件已内置在 Modern.js 中，如：需要注入 Node 模块的 Polyfill 时，可直接使用 [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html) 配置项。
+:::
+
+### 内置插件
+
+以下是已在 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)     |
+| [Styled Components 插件](https://rsbuild.dev/zh/plugins/list/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://rsbuild.dev/zh/plugins/list/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://rsbuild.dev/zh/plugins/list/plugin-node-polyfill)         | 用于注入 Node 核心模块在浏览器端的 polyfills                                             | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html)                                                        |
+| [Source Build 插件](https://rsbuild.dev/zh/plugins/list/plugin-source-build)           | 用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新                       | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
+| [Check Syntax 插件](https://rsbuild.dev/zh/plugins/list/plugin-check-syntax)           | 用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法                           | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
+| [CSS Minimizer 插件](https://rsbuild.dev/zh/plugins/list/plugin-css-minimizer)         | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩。 | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
+| [Pug 插件](https://rsbuild.dev/zh/plugins/list/plugin-pug)                             | 提供对 Pug 模板引擎的支持                                                                | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
+| [Rem 插件](https://rsbuild.dev/zh/plugins/list/plugin-rem)                             | 用于实现移动端页面的 rem 自适应布局                                                      | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
+| [YAML 插件](https://rsbuild.dev/zh/plugins/list/plugin-yaml)                           | 用于引用 YAML 文件，并将其转换为 JavaScript 对象                                         | [TOML 文件](/guides/basic-features/json-files.html#toml-文件)                                                                         |
+| [TOML 插件](https://rsbuild.dev/zh/plugins/list/plugin-toml)                           | 用于引用 TOML 文件，并将其转换为 JavaScript 对象                                         | [YAML 文件](/guides/basic-features/json-files.html#yaml-文件)                                                                         |
+
+### 未内置插件
+
+以下是未在 Modern.js 中内置的 Rsbuild 官方插件：
+
+- [Image Compress 插件](https://rsbuild.dev/zh/plugins/list/plugin-image-compress)：将项目中用到的图片资源进行压缩处理。
+- [Stylus 插件](https://rsbuild.dev/zh/plugins/list/plugin-stylus)：使用 Stylus 作为 CSS 预处理器。
+- [UMD 插件](https://rsbuild.dev/zh/plugins/list/plugin-umd)：用于构建 UMD 格式的产物。

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

@@ -60,7 +60,7 @@ Modern.js 中 [tools.webpack](/configure/app/tools/webpack) 和 [tools.webpackCh
 ```diff
 export default {
   tools: {
--   webppack: (config, { env }) => {
+-   webpack: (config, { env }) => {
 +   rspack: (config, { env }) => {
       if (env === 'development') {
         config.devtool = 'cheap-module-eval-source-map';