diff --git a/packages/document/main-doc/docs/en/configure/app/output/convert-to-rem.mdx b/packages/document/main-doc/docs/en/configure/app/output/convert-to-rem.mdx index 6b537affab55..6c20bb57efff 100644 --- a/packages/document/main-doc/docs/en/configure/app/output/convert-to-rem.mdx +++ b/packages/document/main-doc/docs/en/configure/app/output/convert-to-rem.mdx @@ -7,7 +7,7 @@ title: convertToRem - **Type:** `boolean | object` - **Default:** `false` -By setting `output.convertToRem`, the Builder can do the following things: +By setting `output.convertToRem`, Modern.js can do the following things: - Convert px to rem in CSS. - Insert runtime code into the HTML template to set the fontSize of the root element. diff --git a/packages/document/main-doc/docs/en/configure/app/output/disable-ts-checker.mdx b/packages/document/main-doc/docs/en/configure/app/output/disable-ts-checker.mdx index 3ab8251a637c..8021ca3dd7e4 100644 --- a/packages/document/main-doc/docs/en/configure/app/output/disable-ts-checker.mdx +++ b/packages/document/main-doc/docs/en/configure/app/output/disable-ts-checker.mdx @@ -9,7 +9,7 @@ title: disableTsChecker Whether to disable TypeScript type checker during compilation. -By default, Modern.js will run the TypeScript type checker in a separate process during the build process. Its checking logic is consistent with TypeScript's native `tsc` command. You can use `tsconfig.json` or Builder's `tools.tsChecker` config to customize the checking behavior. +By default, Modern.js will run the TypeScript type checker in a separate process during the build process. Its checking logic is consistent with TypeScript's native `tsc` command. You can use `tsconfig.json` or `tools.tsChecker` config to customize the checking behavior. ### Blocking Compilation diff --git a/packages/document/main-doc/docs/en/configure/app/performance/build-cache.mdx b/packages/document/main-doc/docs/en/configure/app/performance/build-cache.mdx index 227827b5595c..184bab0bd419 100644 --- a/packages/document/main-doc/docs/en/configure/app/performance/build-cache.mdx +++ b/packages/document/main-doc/docs/en/configure/app/performance/build-cache.mdx @@ -31,7 +31,7 @@ const defaultBuildCacheConfig = { - **Bundler:** `only support webpack` -Controls the Builder's caching behavior during the build process. +Controls the caching behavior during the build process. Modern.js will enable build cache by default to improve the compile speed, the generated cache files are write to the `./node_modules/.cache/webpack` directory by default. diff --git a/packages/document/main-doc/docs/en/configure/app/performance/bundle-analyze.mdx b/packages/document/main-doc/docs/en/configure/app/performance/bundle-analyze.mdx index 78569d9b0c52..dc3df7d3560b 100644 --- a/packages/document/main-doc/docs/en/configure/app/performance/bundle-analyze.mdx +++ b/packages/document/main-doc/docs/en/configure/app/performance/bundle-analyze.mdx @@ -9,7 +9,7 @@ configName: performance.bundleAnalyze Used to enable the [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) plugin to analyze the size of the output. -By default, Builder does not enable `webpack-bundle-analyzer`. When this feature is enabled, the default configuration is as follows: +By default, Modern.js does not enable `webpack-bundle-analyzer`. When this feature is enabled, the default configuration is as follows: ```js const defaultConfig = { diff --git a/packages/document/main-doc/docs/en/configure/app/source/transform-import.mdx b/packages/document/main-doc/docs/en/configure/app/source/transform-import.mdx index a7e28ad08f6a..5c514f549aa2 100644 --- a/packages/document/main-doc/docs/en/configure/app/source/transform-import.mdx +++ b/packages/document/main-doc/docs/en/configure/app/source/transform-import.mdx @@ -26,7 +26,7 @@ type TransformImport = - **Default:** -When the [Ant Design component library](https://www.npmjs.com/package/antd) <= 4.x version is installed in the project, Builder will automatically add the following default configurations: +When the [Ant Design component library](https://www.npmjs.com/package/antd) <= 4.x version is installed in the project, Modern.js will automatically add the following default configurations: ```js const defaultAntdConfig = { @@ -36,7 +36,7 @@ const defaultAntdConfig = { }; ``` -When the [Arco Design component library](https://www.npmjs.com/package/@arco-design/web-react) is installed in the project, Builder will automatically add the following default configurations: +When the [Arco Design component library](https://www.npmjs.com/package/@arco-design/web-react) is installed in the project, Modern.js will automatically add the following default configurations: ```js const defaultArcoConfig = [ diff --git a/packages/document/main-doc/docs/en/configure/app/tools/babel.mdx b/packages/document/main-doc/docs/en/configure/app/tools/babel.mdx index ca60eeebb7e2..0d6f1b405ab2 100644 --- a/packages/document/main-doc/docs/en/configure/app/tools/babel.mdx +++ b/packages/document/main-doc/docs/en/configure/app/tools/babel.mdx @@ -14,7 +14,7 @@ With `tools.babel` you can modify the options of [babel-loader](https://github.c Please note the limitations of `tools.babel` in the following usage scenarios: - Rspack scenario: When using Rspack as the bundler, using the `tools.babel` option will significantly slow down the Rspack's build speed. This is because Rspack defaults to using SWC for compilation, and configuring Babel will cause the code to be compiled twice, resulting in additional compilation overhead. -- webpack + SWC scenario: When using webpack as the bundler, if you use Builder's SWC plugin for code compilation, the `tools.babel` option will not take effect. +- webpack + SWC scenario: When using webpack as the bundler, if you use SWC plugin for code compilation, the `tools.babel` option will not take effect. ### Function Type @@ -42,7 +42,7 @@ export default { The second parameter of the `tools.babel` function provides some more convenient utility functions. Please continue reading the documentation below. :::tip -The above example is just for reference, usually you don't need to manually configure `babel-plugin-import`, because the Builder already provides a more general `source.transformImport` configuration. +The above example is just for reference, usually you don't need to manually configure `babel-plugin-import`, because Modern.js already provides a more general `source.transformImport` configuration. ::: ### Object Type @@ -210,7 +210,7 @@ Deprecated, please use [source.exclude](https://modernjs.dev/en/configure/app/so ### Debugging Babel Configuration -After modifying the `babel-loader` configuration through `tools.babel`, you can view the final generated configuration in [Builder debug mode](https://rsbuild.dev/guide/debug/debug-mode). +After modifying the `babel-loader` configuration through `tools.babel`, you can view the final generated configuration in [Rsbuild debug mode](https://rsbuild.dev/guide/debug/debug-mode). First, enable debug mode by using the `DEBUG=builder` parameter: diff --git a/packages/document/main-doc/docs/en/configure/app/tools/less.mdx b/packages/document/main-doc/docs/en/configure/app/tools/less.mdx index 53b91018ab02..292ed1858b18 100644 --- a/packages/document/main-doc/docs/en/configure/app/tools/less.mdx +++ b/packages/document/main-doc/docs/en/configure/app/tools/less.mdx @@ -54,7 +54,7 @@ export default { ### Modifying Less Version -In some scenarios, if you need to use a specific version of Less instead of the built-in Less v4 in Builder, you can install the desired Less version in your project and set it up using the `implementation` option of the `less-loader`. +In some scenarios, if you need to use a specific version of Less instead of the built-in Less v4 in Modern.js, you can install the desired Less version in your project and set it up using the `implementation` option of the `less-loader`. ```js export default { diff --git a/packages/document/main-doc/docs/en/configure/app/tools/sass.mdx b/packages/document/main-doc/docs/en/configure/app/tools/sass.mdx index 339e93620c90..b417193dfe22 100644 --- a/packages/document/main-doc/docs/en/configure/app/tools/sass.mdx +++ b/packages/document/main-doc/docs/en/configure/app/tools/sass.mdx @@ -51,7 +51,7 @@ export default { ### Modifying Sass Version -In some scenarios, if you need to use a specific version of Sass instead of the built-in Dart Sass v1 in Builder, you can install the desired Sass version in your project and set it up using the `implementation` option of the `sass-loader`. +In some scenarios, if you need to use a specific version of Sass instead of the built-in Dart Sass v1 in Modern.js, you can install the desired Sass version in your project and set it up using the `implementation` option of the `sass-loader`. ```js export default { diff --git a/packages/document/main-doc/docs/en/configure/app/tools/webpack-chain.mdx b/packages/document/main-doc/docs/en/configure/app/tools/webpack-chain.mdx index b28574f11884..a3f420e4d305 100644 --- a/packages/document/main-doc/docs/en/configure/app/tools/webpack-chain.mdx +++ b/packages/document/main-doc/docs/en/configure/app/tools/webpack-chain.mdx @@ -140,7 +140,7 @@ export default { #### CHAIN_ID -Some common Chain IDs are predefined in the Builder, and you can use these IDs to locate the built-in Rule or Plugin. +Some common Chain IDs are predefined in the Modern.js, and you can use these IDs to locate the built-in Rule or Plugin. :::tip Please note that some of the rules or plugins listed below are not available by default. They will only be included in the webpack configuration when you enable specific options or register certain plugins. @@ -227,8 +227,8 @@ For example, the `RULE.STYLUS` rule exists only when the Stylus plugin is regist | `PLUGIN.REACT_FAST_REFRESH` | correspond to `ReactFastRefreshPlugin` | | `PLUGIN.NODE_POLYFILL_PROVIDE` | correspond to `ProvidePlugin` for node polyfills | | `PLUGIN.SUBRESOURCE_INTEGRITY` | correspond to `webpack-subresource-integrity` | -| `PLUGIN.ASSETS_RETRY` | correspond to webpack static asset retry plugin in Builder | -| `PLUGIN.AUTO_SET_ROOT_SIZE` | correspond to automatically set root font size plugin in Builder | +| `PLUGIN.ASSETS_RETRY` | correspond to webpack static asset retry plugin | +| `PLUGIN.AUTO_SET_ROOT_SIZE` | correspond to automatically set root font size plugin | #### CHAIN_ID.MINIMIZER diff --git a/packages/document/main-doc/docs/en/guides/basic-features/css/css-modules.mdx b/packages/document/main-doc/docs/en/guides/basic-features/css/css-modules.mdx index a1bbac8ae9e0..606d853ac870 100644 --- a/packages/document/main-doc/docs/en/guides/basic-features/css/css-modules.mdx +++ b/packages/document/main-doc/docs/en/guides/basic-features/css/css-modules.mdx @@ -2,7 +2,7 @@ [CSS Modules](https://github.com/css-modules/css-modules) allows us to write CSS code in a modular way, and these styles can be imported and used in JavaScript files. Using CSS Modules can automatically generate unique class names, isolate styles between different modules, and avoid class name conflicts. -Builder supports CSS Modules by default, you don't need to add additional configuration. Our convention is to use the `[name].module.css` filename to enable CSS Modules. +Modern.js supports CSS Modules by default, you don't need to add additional configuration. Our convention is to use the `[name].module.css` filename to enable CSS Modules. The following style files are considered CSS Modules: @@ -163,7 +163,7 @@ After adding the type declaration, if the type error still exists, you can try t Although the above method can provide the type of CSS Modules, it cannot accurately prompt which classNames are exported by a certain CSS file. -Builder supports generating accurate type declarations for CSS Modules, you only need to enable the [output.enableCssModuleTSDeclaration](/configure/app/output/enable-css-module-tsdeclaration) config, and then execute the build, Modern.js will generate type declaration files for all CSS Modules. +Modern.js supports generating accurate type declarations for CSS Modules, you only need to enable the [output.enableCssModuleTSDeclaration](/configure/app/output/enable-css-module-tsdeclaration) config, and then execute the build, Modern.js will generate type declaration files for all CSS Modules. ```ts export default { diff --git a/packages/document/main-doc/docs/en/guides/basic-features/output-files.mdx b/packages/document/main-doc/docs/en/guides/basic-features/output-files.mdx index 4370ec9ebf80..790644d4ab64 100644 --- a/packages/document/main-doc/docs/en/guides/basic-features/output-files.mdx +++ b/packages/document/main-doc/docs/en/guides/basic-features/output-files.mdx @@ -42,7 +42,7 @@ In the filename, `[name]` represents the entry name corresponding to this file, ## Modify the Directory -Builder provides some configs to modify the directory or filename, you can: +Modern.js provides some configs to modify the directory or filename, you can: - Modify the filename through [output.filename](/configure/app/output/filename). - Modify the output path of through [output.distPath](/configure/app/output/dist-path). diff --git a/packages/document/main-doc/docs/en/guides/concept/builder.mdx b/packages/document/main-doc/docs/en/guides/concept/builder.mdx index 0064f38b2d22..5cde056c244f 100644 --- a/packages/document/main-doc/docs/en/guides/concept/builder.mdx +++ b/packages/document/main-doc/docs/en/guides/concept/builder.mdx @@ -4,7 +4,7 @@ sidebar_position: 2 # Build Engine -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 internally encapsulates [Rsbuild](https://rsbuild.dev/), and supports seamless switching between Webpack and Rspack bundlers. ::: 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. diff --git a/packages/document/main-doc/docs/en/guides/troubleshooting/builder.mdx b/packages/document/main-doc/docs/en/guides/troubleshooting/builder.mdx index 54289ea6b2c9..ffd20c436d1c 100644 --- a/packages/document/main-doc/docs/en/guides/troubleshooting/builder.mdx +++ b/packages/document/main-doc/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 ``` --- diff --git a/packages/document/main-doc/docs/en/plugin/cli-plugins/plugin-swc.mdx b/packages/document/main-doc/docs/en/plugin/cli-plugins/plugin-swc.mdx index aba6e872b7a4..7edfb938241f 100644 --- a/packages/document/main-doc/docs/en/plugin/cli-plugins/plugin-swc.mdx +++ b/packages/document/main-doc/docs/en/plugin/cli-plugins/plugin-swc.mdx @@ -51,7 +51,7 @@ 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 '@site-docs-en/components/enableSwc.mdx'; @@ -297,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. diff --git a/packages/document/main-doc/docs/en/plugin/rsbuild-plugins/plugin-esbuild.mdx b/packages/document/main-doc/docs/en/plugin/rsbuild-plugins/plugin-esbuild.mdx index 42b7b4daa0d8..872b15bde152 100644 --- a/packages/document/main-doc/docs/en/plugin/rsbuild-plugins/plugin-esbuild.mdx +++ b/packages/document/main-doc/docs/en/plugin/rsbuild-plugins/plugin-esbuild.mdx @@ -19,7 +19,7 @@ import Esbuild from '@site-docs-en/components/esbuild.mdx'; ### 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({ diff --git a/packages/document/main-doc/docs/zh/components/builder.mdx b/packages/document/main-doc/docs/zh/components/builder.mdx index f9fcdd54f163..95f22a9855fe 100644 --- a/packages/document/main-doc/docs/zh/components/builder.mdx +++ b/packages/document/main-doc/docs/zh/components/builder.mdx @@ -1,3 +1,3 @@ -Modern.js Builder 指的是 Modern.js 的构建层，它的目标是为 Modern.js 用户提供开箱即用的构建能力，并支持在 webpack 和 Rspack 间无缝切换。 +Builder 指的是 Modern.js 的构建层，它的目标是为 Modern.js 用户提供开箱即用的构建能力，并支持在 webpack 和 Rspack 间无缝切换。 Modern.js `MAJOR_VERSION.46.0` 之前版本使用的是 `@modern-js/builder`, 从 `MAJOR_VERSION.46.0` 开始升级为 [Rsbuild](https://rsbuild.dev/)。 diff --git a/packages/document/main-doc/docs/zh/configure/app/output/convert-to-rem.mdx b/packages/document/main-doc/docs/zh/configure/app/output/convert-to-rem.mdx index 48e598b51c53..5075b8cb39ec 100644 --- a/packages/document/main-doc/docs/zh/configure/app/output/convert-to-rem.mdx +++ b/packages/document/main-doc/docs/zh/configure/app/output/convert-to-rem.mdx @@ -7,7 +7,7 @@ title: convertToRem - **类型：** `boolean | object` - **默认值：** `false` -通过设置 `output.convertToRem`，Builder 可进行如下处理： +通过设置 `output.convertToRem`，Modern.js 可进行如下处理： - 将 CSS 中的 px 转成 rem - 在 HTML 模版中插入运行时代码，对根元素 fontSize 进行设置 diff --git a/packages/document/main-doc/docs/zh/configure/app/output/disable-inline-runtime-chunk.mdx b/packages/document/main-doc/docs/zh/configure/app/output/disable-inline-runtime-chunk.mdx index a20b670333a2..23f4c05eed93 100644 --- a/packages/document/main-doc/docs/zh/configure/app/output/disable-inline-runtime-chunk.mdx +++ b/packages/document/main-doc/docs/zh/configure/app/output/disable-inline-runtime-chunk.mdx @@ -10,13 +10,13 @@ title: disableInlineRuntimeChunk 用于控制是否将打包工具的 runtime 代码内联到 HTML 中。 :::tip 什么是 runtimeChunk -当 Builder 构建完成后，会在 dist 目录生成 `builder-runtime.js` 文件，该文件为 webpack 或 Rspack 的 runtime 代码，即 runtimeChunk。 +当构建完成后，会在 dist 目录生成 `builder-runtime.js` 文件，该文件为 webpack 或 Rspack 的 runtime 代码，即 runtimeChunk。 runtimeChunk 是一段运行时代码，它由 webpack 或 Rspack 提供，包含必要的模块处理逻辑，比如模块加载、模块解析等，具体可参考 [Runtime](https://webpack.js.org/concepts/manifest/#runtime)。 ::: -在生产环境下，Builder 默认会将 runtimeChunk 文件内联到 HTML 文件中，而不是写到产物目录中，这样做是为了减少文件请求的数量。 +在生产环境下，Modern.js 默认会将 runtimeChunk 文件内联到 HTML 文件中，而不是写到产物目录中，这样做是为了减少文件请求的数量。 ### 禁用内联 diff --git a/packages/document/main-doc/docs/zh/configure/app/output/disable-ts-checker.mdx b/packages/document/main-doc/docs/zh/configure/app/output/disable-ts-checker.mdx index 880fa48df7ee..631b2aa96272 100644 --- a/packages/document/main-doc/docs/zh/configure/app/output/disable-ts-checker.mdx +++ b/packages/document/main-doc/docs/zh/configure/app/output/disable-ts-checker.mdx @@ -9,7 +9,7 @@ title: disableTsChecker 是否禁用编译过程中的 TypeScript 类型检查。 -默认情况下，Builder 执行构建的过程中，会在一个独立的进程里运行 TypeScript 类型检查工具，它的检查逻辑与 TypeScript 原生的 `tsc` 命令一致，你可以通过 `tsconfig.json` 或是 Builder 的 `tools.tsChecker` 配置项来自定义检查行为。 +默认情况下，Modern.js 执行构建的过程中，会在一个独立的进程里运行 TypeScript 类型检查工具，它的检查逻辑与 TypeScript 原生的 `tsc` 命令一致，你可以通过 `tsconfig.json` 或 `tools.tsChecker` 配置项来自定义检查行为。 ### 阻塞编译 diff --git a/packages/document/main-doc/docs/zh/configure/app/performance/build-cache.mdx b/packages/document/main-doc/docs/zh/configure/app/performance/build-cache.mdx index 109a8084b2b7..2e8067de22a0 100644 --- a/packages/document/main-doc/docs/zh/configure/app/performance/build-cache.mdx +++ b/packages/document/main-doc/docs/zh/configure/app/performance/build-cache.mdx @@ -31,9 +31,9 @@ const defaultBuildCacheConfig = { - **打包工具：** `仅支持 webpack` -控制 Builder 在构建过程中的缓存行为。 +控制 Modern.js 在构建过程中的缓存行为。 -Builder 默认会开启构建缓存来提升二次构建的速度，并默认把生成的缓存文件写到 `./node_modules/.cache/webpack` 目录下。 +Modern.js 默认会开启构建缓存来提升二次构建的速度，并默认把生成的缓存文件写到 `./node_modules/.cache/webpack` 目录下。 你可以通过 `buildCache` 配置缓存路径，比如： @@ -59,7 +59,7 @@ export default { ### cacheDigest -`cacheDigest` 用来添加一些会对构建结果产生影响的环境变量。Builder 将根据 `cacheDigest` 内容和当前构建模式来设置缓存名称，来确保不同的 `cacheDigest` 可以命中不同的缓存。 +`cacheDigest` 用来添加一些会对构建结果产生影响的环境变量。Modern.js 将根据 `cacheDigest` 内容和当前构建模式来设置缓存名称，来确保不同的 `cacheDigest` 可以命中不同的缓存。 #### 示例 diff --git a/packages/document/main-doc/docs/zh/configure/app/performance/bundle-analyze.mdx b/packages/document/main-doc/docs/zh/configure/app/performance/bundle-analyze.mdx index 1bd6c708b0e5..d9d7c8924d11 100644 --- a/packages/document/main-doc/docs/zh/configure/app/performance/bundle-analyze.mdx +++ b/packages/document/main-doc/docs/zh/configure/app/performance/bundle-analyze.mdx @@ -9,7 +9,7 @@ configName: performance.bundleAnalyze 用于开启 [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) 插件来分析产物体积。 -默认情况下，Builder 不会开启 `webpack-bundle-analyzer`。当开启该功能后，内部的默认配置如下: +默认情况下，Modern.js 不会开启 `webpack-bundle-analyzer`。当开启该功能后，内部的默认配置如下: ```js const defaultConfig = { diff --git a/packages/document/main-doc/docs/zh/configure/app/source/global-vars.mdx b/packages/document/main-doc/docs/zh/configure/app/source/global-vars.mdx index 540a1b53b12d..791ebf195df0 100644 --- a/packages/document/main-doc/docs/zh/configure/app/source/global-vars.mdx +++ b/packages/document/main-doc/docs/zh/configure/app/source/global-vars.mdx @@ -8,7 +8,7 @@ title: globalVars - **默认值：** ```ts -// Builder 默认会添加环境变量 `process.env.NODE_ENV`，因此你不需要手动添加它。 +// Modern.js 默认会添加环境变量 `process.env.NODE_ENV`，因此你不需要手动添加它。 const defaultGlobalVars = { 'process.env.NODE_ENV': process.env.NODE_ENV, }; @@ -100,7 +100,7 @@ export default { `source.globalVars` 是通过字符串替换的形式来注入环境变量的，因此它无法对「解构赋值」等动态写法生效。 -在使用解构赋值时，Builder 将无法判断变量 `NODE_ENV` 是否与要替换的表达式 `process.env.NODE_ENV` 存在关联，因此以下使用方式是无效的： +在使用解构赋值时，Modern.js 将无法判断变量 `NODE_ENV` 是否与要替换的表达式 `process.env.NODE_ENV` 存在关联，因此以下使用方式是无效的： ```js const { NODE_ENV } = process.env; diff --git a/packages/document/main-doc/docs/zh/configure/app/source/transform-import.mdx b/packages/document/main-doc/docs/zh/configure/app/source/transform-import.mdx index c1f69d3a07bf..e8bed0519a28 100644 --- a/packages/document/main-doc/docs/zh/configure/app/source/transform-import.mdx +++ b/packages/document/main-doc/docs/zh/configure/app/source/transform-import.mdx @@ -26,7 +26,7 @@ type TransformImport = - **默认值:** -当项目中安装了 [Ant Design 组件库](https://www.npmjs.com/package/antd) <= 4.x 版本时，Builder 会自动添加以下默认配置： +当项目中安装了 [Ant Design 组件库](https://www.npmjs.com/package/antd) <= 4.x 版本时，Modern.js 会自动添加以下默认配置： ```js const defaultAntdConfig = { @@ -36,7 +36,7 @@ const defaultAntdConfig = { }; ``` -当项目中安装了 [Arco Design 组件库](https://www.npmjs.com/package/@arco-design/web-react) 时，Builder 会自动添加以下默认配置： +当项目中安装了 [Arco Design 组件库](https://www.npmjs.com/package/@arco-design/web-react) 时，Modern.js 会自动添加以下默认配置： ```js const defaultArcoConfig = [ diff --git a/packages/document/main-doc/docs/zh/configure/app/tools/babel.mdx b/packages/document/main-doc/docs/zh/configure/app/tools/babel.mdx index 117862a2620d..3d4114a79300 100644 --- a/packages/document/main-doc/docs/zh/configure/app/tools/babel.mdx +++ b/packages/document/main-doc/docs/zh/configure/app/tools/babel.mdx @@ -14,7 +14,7 @@ title: babel 请留意 `tools.babel` 在以下使用场景中的局限性： - Rspack 场景：在使用 Rspack 作为打包工具时，使用 `tools.babel` 配置项将会明显拖慢 Rspack 构建速度。因为 Rspack 默认使用的是 SWC 编译，配置 Babel 会导致代码需要被编译两次，产生了额外的编译开销。 -- webpack + SWC 场景：在使用 webpack 作为打包工具时，如果你使用了 Builder 的 SWC 插件进行代码编译，那么 `tools.babel` 选项将不会生效。 +- webpack + SWC 场景：在使用 webpack 作为打包工具时，如果你使用了 SWC 插件进行代码编译，那么 `tools.babel` 选项将不会生效。 ### Function 类型 @@ -41,7 +41,7 @@ export default { `tools.babel` 函数的第二个参数提供了一些方便的工具函数，请继续阅读下方文档。 :::tip -以上示例仅作为参考，通常来说，你不需要手动配置 `babel-plugin-import`，因为 Builder 已经提供了更通用的 `source.transformImport` 配置。 +以上示例仅作为参考，通常来说，你不需要手动配置 `babel-plugin-import`，因为 Modern.js 已经提供了更通用的 `source.transformImport` 配置。 ::: ### Object 类型 @@ -209,7 +209,7 @@ export default { ### 调试 Babel 配置 -当你通过 `tools.babel` 修改 `babel-loader` 配置后，可以在 [Builder 调试模式](https://rsbuild.dev/zh/guide/debug/debug-mode) 下查看最终生成的配置。 +当你通过 `tools.babel` 修改 `babel-loader` 配置后，可以在 [调试模式](https://rsbuild.dev/zh/guide/debug/debug-mode) 下查看最终生成的配置。 首先通过 `DEBUG=builder` 参数开启调试模式： diff --git a/packages/document/main-doc/docs/zh/configure/app/tools/less.mdx b/packages/document/main-doc/docs/zh/configure/app/tools/less.mdx index 0715be6323ae..a7715c3b62f6 100644 --- a/packages/document/main-doc/docs/zh/configure/app/tools/less.mdx +++ b/packages/document/main-doc/docs/zh/configure/app/tools/less.mdx @@ -54,7 +54,7 @@ export default { ### 修改 Less 版本 -在某些场景下，如果你需要使用特定的 Less 版本，而不是使用 Builder 内置的 Less v4，可以在项目中安装需要使用的 Less 版本，并通过 `less-loader` 的 `implementation` 选项设置。 +在某些场景下，如果你需要使用特定的 Less 版本，而不是使用 Modern.js 内置的 Less v4，可以在项目中安装需要使用的 Less 版本，并通过 `less-loader` 的 `implementation` 选项设置。 ```js export default { diff --git a/packages/document/main-doc/docs/zh/configure/app/tools/pug.mdx b/packages/document/main-doc/docs/zh/configure/app/tools/pug.mdx index b520cd5640cb..5fb7c9275567 100644 --- a/packages/document/main-doc/docs/zh/configure/app/tools/pug.mdx +++ b/packages/document/main-doc/docs/zh/configure/app/tools/pug.mdx @@ -11,7 +11,7 @@ title: pug ### Boolean 类型 -Builder 默认不启用 Pug 模板引擎，你可以将 `tools.pug` 设置为 `true` 来启用它。 +Modern.js 默认不启用 Pug 模板引擎，你可以将 `tools.pug` 设置为 `true` 来启用它。 ```ts export default { diff --git a/packages/document/main-doc/docs/zh/configure/app/tools/sass.mdx b/packages/document/main-doc/docs/zh/configure/app/tools/sass.mdx index bb1156218b46..313a8d7a9daa 100644 --- a/packages/document/main-doc/docs/zh/configure/app/tools/sass.mdx +++ b/packages/document/main-doc/docs/zh/configure/app/tools/sass.mdx @@ -49,7 +49,7 @@ export default { ### 修改 Sass 版本 -在某些场景下，如果你需要使用特定的 Sass 版本，而不是使用 Builder 内置的 Dart Sass v1，可以在项目中安装需要使用的 Sass 版本，并通过 `sass-loader` 的 `implementation` 选项设置。 +在某些场景下，如果你需要使用特定的 Sass 版本，而不是使用 Modern.js 内置的 Dart Sass v1，可以在项目中安装需要使用的 Sass 版本，并通过 `sass-loader` 的 `implementation` 选项设置。 ```js export default { diff --git a/packages/document/main-doc/docs/zh/configure/app/tools/webpack-chain.mdx b/packages/document/main-doc/docs/zh/configure/app/tools/webpack-chain.mdx index 01e4794a46da..31f58dde642f 100644 --- a/packages/document/main-doc/docs/zh/configure/app/tools/webpack-chain.mdx +++ b/packages/document/main-doc/docs/zh/configure/app/tools/webpack-chain.mdx @@ -143,7 +143,7 @@ export default { #### CHAIN_ID -Builder 中预先定义了一些常用的 Chain ID，你可以通过这些 ID 来定位到内置的 Rule 或 Plugin。 +Modern.js 中预先定义了一些常用的 Chain ID，你可以通过这些 ID 来定位到内置的 Rule 或 Plugin。 :::tip 请留意，下列的一部分 Rule 或 Plugin 并不是默认存在的，当你开启特定配置项、或是注册某些插件后，它们才会被包含在 webpack 配置中。 @@ -231,8 +231,8 @@ Builder 中预先定义了一些常用的 Chain ID，你可以通过这些 ID | `PLUGIN.REACT_FAST_REFRESH` | 对应 `ReactFastRefreshPlugin` | | `PLUGIN.NODE_POLYFILL_PROVIDE` | 对应处理 node polyfill 的 `ProvidePlugin` | | `PLUGIN.SUBRESOURCE_INTEGRITY` | 对应 `webpack-subresource-integrity` | -| `PLUGIN.ASSETS_RETRY` | 对应 Builder 中的 webpack 静态资源重试插件 `WebpackAssetsRetryPlugin` | -| `PLUGIN.AUTO_SET_ROOT_SIZE` | 对应 Builder 中的自动设置根字体大小插件 `AutoSetRootSizePlugin` | +| `PLUGIN.ASSETS_RETRY` | 对应 webpack 静态资源重试插件 `WebpackAssetsRetryPlugin` | +| `PLUGIN.AUTO_SET_ROOT_SIZE` | 对应自动设置根字体大小插件 `AutoSetRootSizePlugin` | #### CHAIN_ID.MINIMIZER diff --git a/packages/document/main-doc/docs/zh/guides/basic-features/css/css-modules.mdx b/packages/document/main-doc/docs/zh/guides/basic-features/css/css-modules.mdx index 1e049be40588..e3520e34e88d 100644 --- a/packages/document/main-doc/docs/zh/guides/basic-features/css/css-modules.mdx +++ b/packages/document/main-doc/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 { diff --git a/packages/document/main-doc/docs/zh/guides/basic-features/output-files.mdx b/packages/document/main-doc/docs/zh/guides/basic-features/output-files.mdx index 0c0041b33267..2bc37b6a39db 100644 --- a/packages/document/main-doc/docs/zh/guides/basic-features/output-files.mdx +++ b/packages/document/main-doc/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) 来修改产物的输出路径。 diff --git a/packages/document/main-doc/docs/zh/guides/concept/builder.mdx b/packages/document/main-doc/docs/zh/guides/concept/builder.mdx index ab38dc6cbd18..e6c78c657a3e 100644 --- a/packages/document/main-doc/docs/zh/guides/concept/builder.mdx +++ b/packages/document/main-doc/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，更易用、开箱即用。 diff --git a/packages/document/main-doc/docs/zh/guides/troubleshooting/builder.mdx b/packages/document/main-doc/docs/zh/guides/troubleshooting/builder.mdx index a44f192dda2a..cca25b7b4381 100644 --- a/packages/document/main-doc/docs/zh/guides/troubleshooting/builder.mdx +++ b/packages/document/main-doc/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 ``` --- diff --git a/packages/document/main-doc/docs/zh/plugin/cli-plugins/plugin-swc.mdx b/packages/document/main-doc/docs/zh/plugin/cli-plugins/plugin-swc.mdx index cc9203f0f6b1..d484e06af897 100644 --- a/packages/document/main-doc/docs/zh/plugin/cli-plugins/plugin-swc.mdx +++ b/packages/document/main-doc/docs/zh/plugin/cli-plugins/plugin-swc.mdx @@ -51,7 +51,7 @@ import SWC from '@site-docs/components/swc.mdx'; ### 在 Modern.js 框架中使用 -Modern.js 框架对 Builder 的 SWC 插件进行了封装，你可以通过以下方式来使用： +Modern.js 框架对 SWC 插件进行了封装，你可以通过以下方式来使用： import EnableSWC from '@site-docs/components/enableSwc.mdx'; @@ -285,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)，配置选项保持一致。 diff --git a/packages/document/main-doc/docs/zh/plugin/rsbuild-plugins/plugin-esbuild.mdx b/packages/document/main-doc/docs/zh/plugin/rsbuild-plugins/plugin-esbuild.mdx index 2e8301cde5ad..28836f81d546 100644 --- a/packages/document/main-doc/docs/zh/plugin/rsbuild-plugins/plugin-esbuild.mdx +++ b/packages/document/main-doc/docs/zh/plugin/rsbuild-plugins/plugin-esbuild.mdx @@ -19,7 +19,7 @@ import Esbuild from '@site-docs/components/esbuild.mdx'; ### 在 Modern.js 框架中使用 -Modern.js 框架默认集成了 Builder 的 esbuild 插件，因此，你不需要手动安装和注册插件，只需要使用 [tools.esbuild](/configure/app/tools/esbuild.html) 配置项即可： +Modern.js 框架默认集成了 esbuild 插件，因此，你不需要手动安装和注册插件，只需要使用 [tools.esbuild](/configure/app/tools/esbuild.html) 配置项即可： ```js export default defineConfig({ @@ -156,7 +156,7 @@ builderPluginEsbuild({ ## esbuild 局限性 -虽然 esbuild 能给现有的 webpack 项目带来明显的构建性能提升，但这个工具在接入 Builder 时还存在一定的局限性，需要大家在接入的时候格外注意。 +虽然 esbuild 能给现有的 webpack 项目带来明显的构建性能提升，但这个工具在接入 Modern.js 时还存在一定的局限性，需要大家在接入的时候格外注意。 ### 兼容性 @@ -190,7 +190,7 @@ builderPluginEsbuild({ ### 不支持 Babel 插件 -使用 esbuild 进行代码转译时，诸如 `babel-plugin-import` 等原有 Babel 插件的语法编译功能在开启 esbuild 后无法使用。并且由于 Builder 底层使用的是 esbuild 的 `Transform API`，因此不支持使用额外 esbuild 插件来进行自定义编译过程。 +使用 esbuild 进行代码转译时，诸如 `babel-plugin-import` 等原有 Babel 插件的语法编译功能在开启 esbuild 后无法使用。并且由于 Modern.js 底层使用的是 esbuild 的 `Transform API`，因此不支持使用额外 esbuild 插件来进行自定义编译过程。 如果你有 `babel-plugin-import` 等 Babel 插件相关诉求，可以使用 SWC 插件。 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 709f8fd35c16..3f80f1249529 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1181,36 +1181,12 @@ importers: specifier: ^5 version: 5.3.3 - packages/document/builder-doc: - devDependencies: - '@modern-js/tsconfig': - specifier: workspace:* - version: link:../../tsconfig - '@rspress/shared': - specifier: 1.28.2 - version: 1.28.2 - '@types/node': - specifier: ^14 - version: 14.18.35 - react: - specifier: ^18.2.0 - version: 18.2.0 - react-dom: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) - rspress: - specifier: 1.28.2 - version: 1.28.2(webpack@5.94.0) - packages/document/main-doc: dependencies: '@modern-js/sandpack-react': specifier: workspace:* version: link:../../generator/sandpack-react devDependencies: - '@modern-js/builder-doc': - specifier: workspace:* - version: link:../builder-doc '@rspress/shared': specifier: 1.28.2 version: 1.28.2