@modern-js/main-doc 2.67.4 → 2.67.6

package/docs/zh/configure/app/output/legal-comments.mdx

@@ -1,6 +1,5 @@
 ---
 title: legalComments
-configName: output.legalComments
 ---
 
 # output.legalComments
@@ -18,6 +17,6 @@ legal comment 是 JS 或 CSS 文件中的一些特殊注释，这些注释包含
 - `inline`：保留所有 legal comments。
 - `none`：移除所有 legal comments。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.legalComments" />

package/docs/zh/configure/app/output/minify.mdx

@@ -1,6 +1,5 @@
 ---
 title: minify
-configName: output.minify
 ---
 
 # output.minify
@@ -22,6 +21,6 @@ type Minify =
 
 用于设置是否在生产模式下开启代码压缩，或是配置压缩工具的选项。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.minify" />

package/docs/zh/configure/app/output/override-browserslist.mdx

@@ -1,6 +1,5 @@
 ---
 title: overrideBrowserslist
-configName: output.overrideBrowserslist
 ---
 
 # output.overrideBrowserslist
@@ -22,6 +21,6 @@ const defaultBrowserListMap: Record<RsbuildTarget, string[]> = {
 
 Modern.js 会优先使用项目根目录的 `.browserslistrc` 文件中的配置。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.overrideBrowserslist" />

package/docs/zh/configure/app/output/polyfill.mdx

@@ -1,6 +1,5 @@
 ---
 title: polyfill
-configName: output.polyfill
 ---
 
 # output.polyfill
@@ -14,6 +13,6 @@ import OutputPolyfillExtend from '@site-docs/components/output-polyfill-extend';
 
 <OutputPolyfillExtend />
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.polyfill" />

package/docs/zh/configure/app/output/source-map.mdx

@@ -1,6 +1,5 @@
 ---
 title: sourceMap
-configName: output.sourceMap
 ---
 
 # output.sourceMap
@@ -27,6 +26,6 @@ const defaultSourceMap = {
 
 用于设置是否生成 source map 文件，以及生成哪一种格式的 source map。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.sourceMap" />

package/docs/zh/configure/app/performance/build-cache.mdx

@@ -1,6 +1,5 @@
 ---
 title: buildCache
-configName: performance.buildCache
 ---
 
 # performance.buildCache
@@ -41,6 +40,6 @@ export default {
 
 需要注意的是，Rspack 的持久化缓存处于[实验性阶段](https://rspack.dev/zh/config/experiments#experimentscache)，可能会在未来的版本中发生变化，该功能需要手动开启。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.buildCache" />

package/docs/zh/configure/app/performance/bundle-analyze.mdx

@@ -1,6 +1,5 @@
 ---
 title: bundleAnalyze
-configName: performance.bundleAnalyze
 ---
 
 # performance.bundleAnalyze
@@ -20,6 +19,6 @@ const defaultConfig = {
 };
 ```
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.bundleAnalyze" />

package/docs/zh/configure/app/performance/chunk-split.mdx

@@ -1,6 +1,5 @@
 ---
 title: chunkSplit
-configName: performance.chunkSplit
 ---
 
 # performance.chunkSplit
@@ -40,6 +39,6 @@ interface SplitCustom {
 export type ChunkSplit = BaseChunkSplit | SplitBySize | SplitCustom;
 ```
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.chunkSplit" />

package/docs/zh/configure/app/performance/dns-prefetch.mdx

@@ -1,6 +1,5 @@
 ---
 title: dnsPrefetch
-configName: performance.dnsPrefetch
 ---
 
 # performance.dnsPrefetch
@@ -15,6 +14,6 @@ configName: performance.dnsPrefetch
 
 更多信息可参考：[Using dns-prefetch](https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch)
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.dnsPrefetch" />

package/docs/zh/configure/app/performance/preconnect.mdx

@@ -1,6 +1,5 @@
 ---
 title: preconnect
-configName: performance.preconnect
 ---
 
 # performance.preconnect
@@ -16,6 +15,6 @@ interface PreconnectOption {
 
 - **默认值：** `undefined`
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.preconnect" />

package/docs/zh/configure/app/performance/prefetch.mdx

@@ -1,6 +1,5 @@
 ---
 title: prefetch
-configName: performance.prefetch
 ---
 
 # performance.prefetch
@@ -21,6 +20,6 @@ interface PrefetchOption {
 
 - **默认值：** `undefined`
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.prefetch" />

package/docs/zh/configure/app/performance/preload.mdx

@@ -1,6 +1,5 @@
 ---
 title: preload
-configName: performance.preload
 ---
 
 # performance.preload
@@ -23,6 +22,6 @@ interface PreloadOption {
 
 为 Rsbuild 构建生成的静态资源注入 [`<link rel="preload">`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/rel/preload) 标签。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.preload" />

package/docs/zh/configure/app/performance/print-file-size.mdx

@@ -1,6 +1,5 @@
 ---
 title: printFileSize
-configName: performance.printFileSize
 ---
 
 # performance.printFileSize
@@ -40,6 +39,6 @@ info    Production file sizes:
   dist/static/css/main.03221f72.css         1.4 kB       741 B
 ```
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.printFileSize" />

package/docs/zh/configure/app/performance/profile.mdx

@@ -1,6 +1,5 @@
 ---
 title: profile
-configName: performance.profile
 ---
 
 # performance.profile
@@ -10,6 +9,6 @@ configName: performance.profile
 
 是否捕获每个模块的耗时信息，对应 Rspack 的 [profile](https://webpack.js.org/configuration/other-options/#profile) 配置。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.profile" />

package/docs/zh/configure/app/performance/remove-console.mdx

@@ -1,6 +1,5 @@
 ---
 title: removeConsole
-configName: performance.removeConsole
 ---
 
 # performance.removeConsole
@@ -10,6 +9,6 @@ configName: performance.removeConsole
 
 在生产环境构建时，是否自动移除代码中的 `console.[methodName]`。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.removeConsole" />

package/docs/zh/configure/app/performance/remove-moment-locale.mdx

@@ -1,6 +1,5 @@
 ---
 title: removeMomentLocale
-configName: performance.removeMomentLocale
 ---
 
 # performance.removeMomentLocale
@@ -10,6 +9,6 @@ configName: performance.removeMomentLocale
 
 是否移除 [moment.js](https://momentjs.com/) 的语言包文件。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.removeMomentLocale" />

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

@@ -1,39 +1,18 @@
----
-sidebar_position: 9
----
-
 # plugins
 
 - **类型：** `CliPlugin[]`
 - **默认值：** `[]`
 
-用于配置自定义的 Modern.js 框架插件。
-
-自定义插件的编写方式请参考 [如何编写插件](/plugin/plugin-system)。
+用于配置自定义的 Modern.js 框架 CLI 插件。自定义 CLI 插件的编写方式请参考 [如何编写 CLI 插件](/plugin/introduction.html#cli-插件)。
 
 ## 注意事项
 
-该选项**用于配置框架插件**，如果你需要配置其他类型的插件，请选择对应的配置方式：
+该选项**用于配置框架 CLI 插件**，如果你需要配置其他类型的插件，请选择对应的配置方式：
 
 - 配置 Rsbuild 插件，请使用 [builderPlugins](/configure/app/builder-plugins) 配置项。
 - 配置 Rspack 或 webpack 插件，请使用 [tools.bundlerChain](/configure/app/tools/bundler-chain) 配置项。
 - 配置 Babel 插件，请使用 [tools.babel](/configure/app/tools/babel) 配置项。
-
-## 插件类型
-
-Modern.js 中内置了三种不同的框架插件：
-
-- `CLI 插件`，适用于本地开发、编译构建阶段，可以在命令行和编译阶段扩展各种能力。
-- `Server 插件`，适用于服务端。
-- `Runtime 插件`，适用于前端运行时。
-
-目前 Modern.js 开放了自定义 CLI 插件的能力，Server 插件和 Runtime 插件会在后续开放。
-
-## 插件执行顺序
-
-默认情况下，自定义插件会按照 `plugins` 数组的顺序依次执行，Modern.js 内置插件的执行时机早于自定义插件。
-
-当插件内部使用了控制顺序的相关字段，比如 `pre`、`post` 时，会基于声明的字段对执行顺序进行调整，详见 [插件结构](/plugin/plugin-system)。
+- 配置框架 Runtime 插件，请使用 [runtime 配置文件 plugins](/configure/app/runtime/plugins) 配置项。
 
 ## 示例
 

package/docs/zh/configure/app/runtime/master-app.mdx

@@ -1,8 +1,4 @@
----
-title: masterApp
----
-
-# runtime.masterApp
+# masterApp
 
 - **类型：** `Object`
 

package/docs/zh/configure/app/runtime/plugins.mdx

@@ -0,0 +1,58 @@
+# plugins
+
+- **类型：** `RuntimePlugin[]`
+- **默认值：** `[]`
+
+用于配置自定义的 Modern.js Runtime 插件。自定义 Runtime 插件的编写方式请参考 [如何编写 Runtime 插件](/plugin/introduction.html#runtime-插件)。
+
+:::info
+
+Runtime 插件需要在 `src/modern.runtime.ts` 文件中的 plugins 中进行配置。
+
+:::
+
+## 示例
+
+下面是 Runtime 插件的使用示例。
+
+### 使用 npm 上的插件
+
+使用 npm 上的插件，需要通过包管理器安装插件，并通过 import 引入。
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { myPlugin } from 'my-plugin';
+
+export default defineRuntimeConfig({
+  plugins: [myPlugin()],
+});
+```
+
+### 使用本地插件
+
+使用本地代码仓库中的插件，直接通过相对路径 import 引入即可。
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { myPlugin } from './config/plugin/myPlugin';
+
+export default defineRuntimeConfig({
+  plugins: [myPlugin()],
+});
+```
+
+### 插件配置项
+
+如果插件提供了一些自定义的配置项，可以通过插件函数的参数传入配置。
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { myPlugin } from './config/plugin/myPlugin';
+
+export default defineRuntimeConfig({
+  plugins: [myPlugin({
+    foo: 1,
+    bar: 2,
+  })],
+});
+```

package/docs/zh/configure/app/security/nonce.mdx

@@ -1,6 +1,5 @@
 ---
 title: nonce
-configName: security.nonce
 ---
 
 # security.nonce
@@ -15,6 +14,6 @@ type Nonce = string;
 
 为 HTML 所引入的脚本资源添加随机属性值 nonce，使浏览器在解析到带有匹配 nonce 值的内联脚本时，能判断该脚本是否能执行。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="security.nonce" />

package/docs/zh/configure/app/security/sri.mdx

@@ -1,6 +1,5 @@
 ---
 title: sri
-configName: security.sri
 ---
 
 # security.sri

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

@@ -1,6 +1,5 @@
 ---
 title: port
-configName: server.port
 ---
 
 # server.port
@@ -38,6 +37,6 @@ export default defineConfig({
 });
 ```
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="server.port" />

package/docs/zh/configure/app/source/alias-strategy.mdx

@@ -1,6 +1,5 @@
 ---
 title: aliasStrategy
-configName: source.aliasStrategy
 ---
 
 # source.aliasStrategy
@@ -10,6 +9,6 @@ configName: source.aliasStrategy
 
 `source.aliasStrategy` 用于控制 `tsconfig.json` 中的 `paths` 选项与打包工具的 `alias` 选项的优先级。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.aliasStrategy" />

package/docs/zh/configure/app/source/alias.mdx

@@ -1,6 +1,5 @@
 ---
 title: alias
-configName: source.alias
 ---
 
 # source.alias
@@ -19,6 +18,6 @@ type Alias = Record<string, string | false | (string | false)[]> | Function;
 对于 TypeScript 项目，你只需要在 `tsconfig.json` 中配置 [compilerOptions.paths](https://www.typescriptlang.org/tsconfig#paths) 即可，Rsbuild 会自动识别它，不需要额外配置 `source.alias` 字段，详见 [「路径别名」](https://modernjs.dev/guides/basic-features/alias.html)。
 :::
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.alias" />

package/docs/zh/configure/app/source/decorators.mdx

@@ -1,6 +1,5 @@
 ---
 title: decorators
-configName: source.decorators
 ---
 
 # source.decorators
@@ -23,6 +22,6 @@ const defaultDecorators = {
 
 用于配置装饰器语法。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.decorators" />

package/docs/zh/configure/app/source/define.mdx

@@ -1,6 +1,5 @@
 ---
 title: define
-configName: source.define
 ---
 
 # source.define
@@ -16,6 +15,6 @@ const defaultDefine = {
 
 构建时将代码中的变量替换成其它值或者表达式，可以用于在代码逻辑中区分开发环境与生产环境等场景。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.define" />

package/docs/zh/configure/app/source/exclude.mdx

@@ -1,6 +1,5 @@
 ---
 title: exclude
-configName: source.exclude
 ---
 
 # source.exclude
@@ -10,6 +9,6 @@ configName: source.exclude
 
 指定不需要编译的 JavaScript/TypeScript 文件。用法与 Rspack 中的 [Rule.exclude](https://rspack.dev/zh/config/module#ruleexclude) 一致，支持传入字符串或正则表达式来匹配模块的路径。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.exclude" />

package/docs/zh/configure/app/source/include.mdx

@@ -1,6 +1,5 @@
 ---
 title: include
-configName: source.include
 ---
 
 # source.include
@@ -21,6 +20,6 @@ const defaultInclude = [
 
 `source.include` 用于指定额外需要编译的 JavaScript 文件。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.include" />

package/docs/zh/configure/app/source/pre-entry.mdx

@@ -1,6 +1,5 @@
 ---
 title: preEntry
-configName: source.preEntry
 ---
 
 # source.preEntry
@@ -10,6 +9,6 @@ configName: source.preEntry
 
 在每个页面的入口文件前添加一段代码，这段代码会早于页面的代码执行，因此可以用于执行一些全局的代码逻辑，比如注入 polyfill、设置全局样式等。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.preEntry" />

package/docs/zh/configure/app/source/transform-import.mdx

@@ -1,6 +1,5 @@
 ---
 title: transformImport
-configName: source.transformImport
 ---
 
 # source.transformImport
@@ -59,9 +58,9 @@ const defaultArcoConfig = [
 当你添加了 `antd` 或 `@arco-design/web-react` 相关的配置时，优先级会高于上述默认配置。
 :::
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.transformImport" />
 
 ### 禁用默认配置
 

package/docs/zh/configure/app/tools/css-extract.mdx

@@ -1,6 +1,5 @@
 ---
 title: cssExtract
-configName: tools.cssExtract
 ---
 
 # tools.cssExtract
@@ -30,6 +29,6 @@ const defaultOptions = {
 
 通过 `tools.cssExtract` 可以更改 [CssExtractRspackPlugin](https://www.rspack.dev/zh/plugins/rspack/css-extract-rspack-plugin) 或 [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) 的配置。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.cssExtract" />

package/docs/zh/configure/app/tools/css-loader.mdx

@@ -1,6 +1,5 @@
 ---
 title: cssLoader
-configName: tools.cssLoader
 ---
 
 # tools.cssLoader
@@ -17,6 +16,6 @@ const defaultOptions = {
 
 修改 [css-loader](https://github.com/webpack-contrib/css-loader) 的配置项。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.cssLoader" />

package/docs/zh/configure/app/tools/html-plugin.mdx

@@ -1,6 +1,5 @@
 ---
 title: htmlPlugin
-configName: tools.htmlPlugin
 ---
 
 # tools.htmlPlugin
@@ -34,8 +33,12 @@ const defaultOptions = {
 };
 ```
 
+:::warning
+SSR 应用请勿启用 `minify.removeComments` 配置项，否则会导致 SSR 渲染失败。
+:::
+
 通过 `tools.htmlPlugin` 可以修改 [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin) 或 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 的配置项。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.htmlPlugin" />

package/docs/zh/configure/app/tools/lightningcss-loader.mdx

@@ -1,6 +1,5 @@
 ---
 title: lightningcssLoader
-configName: tools.lightningcssLoader
 ---
 
 # tools.lightningcssLoader
@@ -36,6 +35,6 @@ const defaultOptions = {
 
 需要注意的是，开启 `lightningcss-loader` 时，将会默认关闭 `postcss-loader`。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.lightningcssLoader" />

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

@@ -1,6 +1,5 @@
 ---
 title: postcss
-configName: tools.postcss
 ---
 
 # tools.postcss
@@ -35,6 +34,6 @@ Modern.js 默认集成 PostCSS，你可以通过 `tools.postcss` 对 [postcss-lo
 
 需要注意的是，当你开启 `tools.lightningcss` 配置时，PostCSS 将会被默认禁用，包括 `postcss-loader` 及其默认插件。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.postcss" />