@modern-js/main-doc 2.67.7 → 2.67.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/en/apis/app/commands.mdx +3 -3
- package/docs/en/community/blog/v2-release-note.mdx +2 -2
- package/docs/en/community/contributing-guide.mdx +1 -1
- package/docs/en/components/builder.mdx +1 -1
- package/docs/en/components/bundler.mdx +1 -1
- package/docs/en/components/rsbuild.mdx +1 -1
- package/docs/en/components/rspack.mdx +1 -1
- package/docs/en/components/rspackPrecautions.mdx +2 -2
- package/docs/en/configure/app/builder-plugins.mdx +1 -1
- package/docs/en/configure/app/output/assets-retry.mdx +1 -1
- package/docs/en/configure/app/output/copy.mdx +1 -1
- package/docs/en/configure/app/performance/build-cache.mdx +1 -1
- package/docs/en/configure/app/security/sri.mdx +1 -1
- package/docs/en/configure/app/source/exclude.mdx +2 -2
- package/docs/en/configure/app/source/include.mdx +1 -1
- package/docs/en/configure/app/source/transform-import.mdx +2 -2
- package/docs/en/configure/app/tools/babel.mdx +5 -5
- package/docs/en/configure/app/tools/bundler-chain.mdx +2 -2
- package/docs/en/configure/app/tools/css-extract.mdx +1 -1
- package/docs/en/configure/app/tools/dev-server.mdx +1 -1
- package/docs/en/configure/app/tools/lightningcss-loader.mdx +1 -1
- package/docs/en/configure/app/tools/rspack.mdx +1 -1
- package/docs/en/configure/app/tools/swc.mdx +3 -3
- package/docs/en/configure/app/tools/webpack-chain.mdx +19 -19
- package/docs/en/guides/advanced-features/build-performance.mdx +1 -1
- package/docs/en/guides/advanced-features/compatibility.mdx +1 -1
- package/docs/en/guides/advanced-features/page-performance/optimize-bundle.mdx +3 -3
- package/docs/en/guides/advanced-features/rspack-start.mdx +2 -2
- package/docs/en/guides/basic-features/css/css.mdx +4 -4
- package/docs/en/guides/basic-features/debug/rsdoctor.mdx +1 -1
- package/docs/en/guides/basic-features/routes.mdx +3 -3
- package/docs/en/guides/basic-features/static-assets.mdx +1 -1
- package/docs/en/guides/concept/builder.mdx +3 -3
- package/docs/en/guides/concept/entries.mdx +1 -1
- package/docs/en/guides/get-started/tech-stack.mdx +3 -3
- package/docs/en/guides/troubleshooting/builder.mdx +4 -5
- package/docs/en/plugin/cli-plugins/api.mdx +140 -134
- package/docs/en/plugin/introduction.mdx +27 -24
- package/docs/en/tutorials/examples/csr-auth.mdx +15 -198
- package/docs/zh/apis/app/commands.mdx +3 -3
- package/docs/zh/community/blog/v2-release-note.mdx +2 -2
- package/docs/zh/community/contributing-guide.mdx +1 -1
- package/docs/zh/components/builder.mdx +1 -1
- package/docs/zh/components/bundler.mdx +1 -2
- package/docs/zh/components/rsbuild.mdx +1 -1
- package/docs/zh/components/rspack.mdx +1 -1
- package/docs/zh/components/rspackPrecautions.mdx +2 -2
- package/docs/zh/configure/app/builder-plugins.mdx +1 -1
- package/docs/zh/configure/app/output/assets-retry.mdx +1 -1
- package/docs/zh/configure/app/output/copy.mdx +1 -1
- package/docs/zh/configure/app/performance/build-cache.mdx +1 -1
- package/docs/zh/configure/app/security/sri.mdx +1 -1
- package/docs/zh/configure/app/source/exclude.mdx +2 -2
- package/docs/zh/configure/app/source/include.mdx +1 -1
- package/docs/zh/configure/app/source/transform-import.mdx +2 -2
- package/docs/zh/configure/app/tools/babel.mdx +5 -6
- package/docs/zh/configure/app/tools/bundler-chain.mdx +2 -2
- package/docs/zh/configure/app/tools/css-extract.mdx +1 -1
- package/docs/zh/configure/app/tools/dev-server.mdx +1 -1
- package/docs/zh/configure/app/tools/lightningcss-loader.mdx +1 -1
- package/docs/zh/configure/app/tools/rspack.mdx +1 -1
- package/docs/zh/configure/app/tools/swc.mdx +3 -3
- package/docs/zh/configure/app/tools/webpack-chain.mdx +20 -20
- package/docs/zh/guides/advanced-features/compatibility.mdx +1 -1
- package/docs/zh/guides/advanced-features/page-performance/optimize-bundle.mdx +2 -2
- package/docs/zh/guides/advanced-features/rspack-start.mdx +2 -2
- package/docs/zh/guides/basic-features/css/css.mdx +4 -4
- package/docs/zh/guides/basic-features/debug/rsdoctor.mdx +1 -1
- package/docs/zh/guides/basic-features/static-assets.mdx +2 -2
- package/docs/zh/guides/concept/builder.mdx +3 -3
- package/docs/zh/guides/concept/entries.mdx +1 -1
- package/docs/zh/guides/get-started/tech-stack.mdx +3 -3
- package/docs/zh/guides/troubleshooting/builder.mdx +4 -5
- package/docs/zh/plugin/cli-plugins/api.mdx +122 -120
- package/docs/zh/plugin/introduction.mdx +18 -15
- package/docs/zh/tutorials/examples/csr-auth.mdx +15 -198
- package/package.json +6 -6
- package/rspress.config.ts +12 -1
- package/src/components/RsbuildLink/index.tsx +1 -1
- package/src/components/Sandpack/index.tsx +1 -11
- package/src/components/ShowcaseList/useShowcases.ts +1 -1
- package/src/sandbox/csr-auth/src/routes/Auth-tsx.txt +74 -0
- package/src/sandbox/csr-auth/src/routes/fakeAuth-ts.txt +16 -0
- package/src/sandbox/csr-auth/src/routes/layout-tsx.txt +21 -0
- package/src/sandbox/csr-auth/src/routes/login/page-tsx.txt +40 -0
- package/src/sandbox/csr-auth/src/routes/page-tsx.txt +17 -0
- package/src/sandbox/csr-auth/src/routes/protected/page-tsx.txt +11 -0
@@ -154,7 +154,7 @@ The `--config` parameter needs to use a JSON string.
|
|
154
154
|
pnpm does not support the use of JSON strings as parameter values currently. Use `npm new` to turn on.【[Relate Issue](https://github.com/pnpm/pnpm/issues/3876)】
|
155
155
|
:::
|
156
156
|
|
157
|
-
import ServeCommand from
|
157
|
+
import ServeCommand from '@site-docs-en/components/serve-command';
|
158
158
|
|
159
159
|
<ServeCommand />
|
160
160
|
|
@@ -175,7 +175,7 @@ Options:
|
|
175
175
|
|
176
176
|
## modern inspect
|
177
177
|
|
178
|
-
The `modern inspect` command is used to view the [Rsbuild config](https://rsbuild.
|
178
|
+
The `modern inspect` command is used to view the [Rsbuild config](https://rsbuild.rs/config/index) and webpack or Rspack config of the project.
|
179
179
|
|
180
180
|
```bash
|
181
181
|
Usage: modern inspect [options]
|
@@ -232,6 +232,6 @@ Inspect config succeed, open following files to view the content:
|
|
232
232
|
- Webpack Config (node): /root/my-project/dist/webpack.config.node.mjs
|
233
233
|
```
|
234
234
|
|
235
|
-
import DeployCommand from
|
235
|
+
import DeployCommand from '@site-docs-en/components/deploy-command';
|
236
236
|
|
237
237
|
<DeployCommand />
|
@@ -80,7 +80,7 @@ title: Modern.js v2 发布
|
|
80
80
|
|
81
81
|
目前,Rspack 项目以及 Modern.js 的 Rspack 模式仍在快速迭代中。在未来几个月内,我们将逐步对齐 Webpack 模式和 Rspack 模式的绝大多数功能和配置,使更多项目能从 Webpack 平滑地过渡到 Rspack。
|
82
82
|
|
83
|
-
> Rspack 已于 2023.03.10 号正式开源,你也可以在非 Modern.js 的项目中直接使用 Rspack 进行构建。如果你对 Rspack 感兴趣,请阅读 [「Rspack 正式发布了」](https://
|
83
|
+
> Rspack 已于 2023.03.10 号正式开源,你也可以在非 Modern.js 的项目中直接使用 Rspack 进行构建。如果你对 Rspack 感兴趣,请阅读 [「Rspack 正式发布了」](https://rspack.rs/zh/blog/announcement.html)来了解更多。
|
84
84
|
|
85
85
|
### 渐进式设计
|
86
86
|
|
@@ -224,7 +224,7 @@ Rspress 是一个面向文档站场景的框架,它的目标是给开发者提
|
|
224
224
|
|
225
225
|
我们做 Rspress 的初心,是为了解决我们团队内的文档站搭建需求。随着 Rspress 的功能逐渐完整,我们也将它开放给社区使用,使它能发挥更大的价值。
|
226
226
|
|
227
|
-
目前,Rspress 仍处于 beta 测试状态,相关源代码已经开放在 [Rspress 仓库](https://github.com/web-infra-dev/rspress) 中,并提供了基础的 [使用文档](https://rspress.
|
227
|
+
目前,Rspress 仍处于 beta 测试状态,相关源代码已经开放在 [Rspress 仓库](https://github.com/web-infra-dev/rspress) 中,并提供了基础的 [使用文档](https://rspress.rs/)。在未来,我们将继续投入,使之成为一个完成度更高的文档解决方案。
|
228
228
|
|
229
229
|
## 致谢
|
230
230
|
|
@@ -190,7 +190,7 @@ root
|
|
190
190
|
└─ module-doc # Documentation for Modern.js Module
|
191
191
|
```
|
192
192
|
|
193
|
-
This website is built with Rspress, the document content can be written using markdown or mdx syntax. You can refer to the [Rspress Website](https://rspress.
|
193
|
+
This website is built with Rspress, the document content can be written using markdown or mdx syntax. You can refer to the [Rspress Website](https://rspress.rs/) for detailed usage.
|
194
194
|
|
195
195
|
The source code of Rspress can be found in [this repo](https://github.com/web-infra-dev/rspress).
|
196
196
|
|
@@ -1,3 +1,3 @@
|
|
1
1
|
Refers to the build layer of Modern.js. The goal of Builder is to provide Modern.js users with out-of-the-box build capabilities and support seamless switching between webpack and Rspack.
|
2
2
|
|
3
|
-
The previous version of Modern.js `MAJOR_VERSION.46.0` used `@modern-js/builder`, which was upgraded to [Rsbuild](https://rsbuild.
|
3
|
+
The previous version of Modern.js `MAJOR_VERSION.46.0` used `@modern-js/builder`, which was upgraded to [Rsbuild](https://rsbuild.rs/) starting from `MAJOR_VERSION.46.0`.
|
@@ -1,3 +1,3 @@
|
|
1
|
-
Refers to module bundlers such as [webpack](https://webpack.js.org/), [Rspack](https://
|
1
|
+
Refers to module bundlers such as [webpack](https://webpack.js.org/), [Rspack](https://rspack.rs/).
|
2
2
|
|
3
3
|
The main goal of bundlers is to bundle JavaScript, CSS and other files together, and the bundled files can be used in the browser, Node.js or other environments. When bundler processes the Web application, it builds a dependency graph and then combines every module into one or more bundles.
|
@@ -1,3 +1,3 @@
|
|
1
|
-
[Rsbuild](https://rsbuild.
|
1
|
+
[Rsbuild](https://rsbuild.rs/) is an Rspack-based build tool for the web. The main goal of Rsbuild is to provide out-of-the-box build capabilities for Rspack users, allowing developers to start a web project with zero configuration.
|
2
2
|
|
3
3
|
Rsbuild integrates high-performance Rust-based tools from the community, including Rspack and SWC, to provide first-class build speed and development experience.
|
@@ -1,3 +1,3 @@
|
|
1
|
-
[Rspack](https://
|
1
|
+
[Rspack](https://rspack.rs/) is a high performance JavaScript bundler written in Rust. It offers strong compatibility with the webpack ecosystem, allowing for seamless replacement of webpack, and provides lightning fast build speeds.
|
2
2
|
|
3
3
|
Compared to webpack, Rspack has significantly improved build performance, thanks not only to the language advantages brought by Rust, but also to its parallel architecture and incremental compilation features. Benchmarking has shown that Rspack can provide 5-10 times better compilation performance.
|
@@ -2,5 +2,5 @@
|
|
2
2
|
|
3
3
|
Before using Rspack, you need to be aware of the following:
|
4
4
|
|
5
|
-
- Rspack is compatible with most webpack plugins and almost all loaders, but there are still a few webpack plugins that cannot be used for now. For more details, see [Plugin Compatibility](https://rspack.
|
6
|
-
- Rspack uses [SWC](https://rspack.
|
5
|
+
- Rspack is compatible with most webpack plugins and almost all loaders, but there are still a few webpack plugins that cannot be used for now. For more details, see [Plugin Compatibility](https://rspack.rs/guide/compatibility/plugin).
|
6
|
+
- Rspack uses [SWC](https://rspack.rs/guide/features/builtin-swc-loader) by default for code transformation and compression. In rare cases, you may encounter bugs in SWC in edge cases. You can provide feedback via [SWC issues](https://github.com/swc-project/swc/issues).
|
@@ -9,7 +9,7 @@ sidebar_position: 21
|
|
9
9
|
|
10
10
|
Used to configure the Rsbuild plugin.
|
11
11
|
|
12
|
-
Rsbuild is the build tool of Modern.js, please read [Build Engine](/guides/concept/builder) for background. If you want to know how to write Rsbuild plugins, you can refer to [Rsbuild - Plugin System](https://rsbuild.
|
12
|
+
Rsbuild is the build tool of Modern.js, please read [Build Engine](/guides/concept/builder) for background. If you want to know how to write Rsbuild plugins, you can refer to [Rsbuild - Plugin System](https://rsbuild.rs/plugins/dev/index).
|
13
13
|
|
14
14
|
## Precautions
|
15
15
|
|
@@ -76,4 +76,4 @@ After adding the above configuration, when assets fail to load from the `cdn1.co
|
|
76
76
|
|
77
77
|
If the assets request for `cdn2.com` also fails, the request will fallback to `cdn3.com`.
|
78
78
|
|
79
|
-
`assetsRetry` is implemented based on the Assets Retry plugin of Rsbuild and provides the same configuration options. You can refer to [Rsbuild - Assets Retry Plugin](https://rsbuild.
|
79
|
+
`assetsRetry` is implemented based on the Assets Retry plugin of Rsbuild and provides the same configuration options. You can refer to [Rsbuild - Assets Retry Plugin](https://rsbuild.rs/plugins/list/plugin-assets-retry#options) to understand all available configuration options.
|
@@ -7,7 +7,7 @@ title: copy
|
|
7
7
|
- **Type:**`Rspack.CopyRspackPluginOptions | Rspack.CopyRspackPluginOptions['patterns']`
|
8
8
|
- **Default:** `undefined`
|
9
9
|
|
10
|
-
Copies the specified file or directory to the dist directory, implemented based on [rspack.CopyRspackPlugin](https://rspack.
|
10
|
+
Copies the specified file or directory to the dist directory, implemented based on [rspack.CopyRspackPlugin](https://rspack.rs/zh/plugins/rspack/copy-rspack-plugin).
|
11
11
|
|
12
12
|
import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
|
13
13
|
|
@@ -38,7 +38,7 @@ export default {
|
|
38
38
|
};
|
39
39
|
```
|
40
40
|
|
41
|
-
It should be noted that, Rspack's persistent cache is [experimental](https://rspack.
|
41
|
+
It should be noted that, Rspack's persistent cache is [experimental](https://rspack.rs/config/experiments#experimentscache), which may change in future versions, and this feature needs to be turned on manually.
|
42
42
|
|
43
43
|
import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
|
44
44
|
|
@@ -19,7 +19,7 @@ type SriOptions = {
|
|
19
19
|
Adding an `integrity` attribute to `<script>` and `<link rel="stylesheet">` tags introduced by HTML allows the browser to verify the integrity of the introduced resource, thus preventing tampering with the downloaded resource.
|
20
20
|
|
21
21
|
:::info
|
22
|
-
For a specific introduction to SRI, you can refer to [Rsbuild security.sri](https://rsbuild.
|
22
|
+
For a specific introduction to SRI, you can refer to [Rsbuild security.sri](https://rsbuild.rs/zh/config/security/sri).
|
23
23
|
|
24
24
|
This configuration type is not completely consistent with Rsbuild and will be automatically converted during the build process.
|
25
25
|
:::
|
@@ -4,10 +4,10 @@ title: exclude
|
|
4
4
|
|
5
5
|
# source.exclude
|
6
6
|
|
7
|
-
- **Type:** [RuleSetCondition[]](https://rspack.
|
7
|
+
- **Type:** [RuleSetCondition[]](https://rspack.rs/config/module#condition)
|
8
8
|
- **Default:** `[]`
|
9
9
|
|
10
|
-
Specifies JavaScript/TypeScript files that do not need to be compiled. The usage is consistent with [Rule.exclude](https://rspack.
|
10
|
+
Specifies JavaScript/TypeScript files that do not need to be compiled. The usage is consistent with [Rule.exclude](https://rspack.rs/config/module#ruleexclude) in Rspack, which supports passing in strings or regular expressions to match the module path.
|
11
11
|
|
12
12
|
import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
|
13
13
|
|
@@ -74,12 +74,12 @@ export default {
|
|
74
74
|
};
|
75
75
|
```
|
76
76
|
|
77
|
-
You can also use the [function usage](https://rsbuild.
|
77
|
+
You can also use the [function usage](https://rsbuild.rs/config/source/transform-import#function-type) of `transformImport` to modify the default configuration.
|
78
78
|
|
79
79
|
```js
|
80
80
|
export default {
|
81
81
|
source: {
|
82
|
-
transformImport:
|
82
|
+
transformImport: imports => {
|
83
83
|
return imports.filter(data => data.libraryName !== 'antd');
|
84
84
|
},
|
85
85
|
},
|
@@ -160,7 +160,7 @@ export default {
|
|
160
160
|
tools: {
|
161
161
|
babel(config, { modifyPresetEnvOptions }) {
|
162
162
|
modifyPresetEnvOptions({
|
163
|
-
targets:
|
163
|
+
targets: 'last 2 versions',
|
164
164
|
});
|
165
165
|
},
|
166
166
|
},
|
@@ -173,9 +173,9 @@ export default {
|
|
173
173
|
babel(config, { modifyPresetEnvOptions }) {
|
174
174
|
modifyPresetEnvOptions({
|
175
175
|
targets: {
|
176
|
-
chrome:
|
177
|
-
ie:
|
178
|
-
}
|
176
|
+
chrome: '58',
|
177
|
+
ie: '11',
|
178
|
+
},
|
179
179
|
});
|
180
180
|
},
|
181
181
|
},
|
@@ -210,7 +210,7 @@ Deprecated, please use [source.exclude](https://modernjs.dev/en/configure/app/so
|
|
210
210
|
|
211
211
|
### Debugging Babel Configuration
|
212
212
|
|
213
|
-
After modifying the `babel-loader` configuration through `tools.babel`, you can view the final generated configuration in [Rsbuild debug mode](https://rsbuild.
|
213
|
+
After modifying the `babel-loader` configuration through `tools.babel`, you can view the final generated configuration in [Rsbuild debug mode](https://rsbuild.rs/guide/debug/debug-mode).
|
214
214
|
|
215
215
|
First, enable debug mode by using the `DEBUG=builder` parameter:
|
216
216
|
|
@@ -21,10 +21,10 @@ You can modify the webpack and Rspack configuration by configuring `tools.bundle
|
|
21
21
|
|
22
22
|
Bundler chain is a subset of webpack chain, which contains part of the webpack chain API that you can use to modify both webpack and Rspack configuration.
|
23
23
|
|
24
|
-
Configurations modified via bundler chain will work on both webpack and Rspack builds. Note that the bundler chain only supports modifying the configuration of the non-differentiated parts of webpack and Rspack. For example, modifying the devtool configuration option (webpack and Rspack have the same devtool property value type), or adding an [Rspack-compatible](https://rspack.
|
24
|
+
Configurations modified via bundler chain will work on both webpack and Rspack builds. Note that the bundler chain only supports modifying the configuration of the non-differentiated parts of webpack and Rspack. For example, modifying the devtool configuration option (webpack and Rspack have the same devtool property value type), or adding an [Rspack-compatible](https://rspack.rs/guide/compatibility/plugin) webpack plugin.
|
25
25
|
|
26
26
|
:::
|
27
27
|
|
28
28
|
> `tools.bundlerChain` is executed earlier than tools.webpackChain / tools.webpack / tools.rspack and thus will be overridden by changes in others.
|
29
29
|
|
30
|
-
For more information, please refer to [Rsbuild#tools.bundlerChain](https://rsbuild.
|
30
|
+
For more information, please refer to [Rsbuild#tools.bundlerChain](https://rsbuild.rs/config/tools/bundler-chain).
|
@@ -30,7 +30,7 @@ const defaultOptions = {
|
|
30
30
|
};
|
31
31
|
```
|
32
32
|
|
33
|
-
The config of [CssExtractRspackPlugin](https://
|
33
|
+
The config of [CssExtractRspackPlugin](https://rspack.rs/plugins/rspack/css-extract-rspack-plugin) / [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) can be modified through `tools.cssExtract`.
|
34
34
|
|
35
35
|
import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
|
36
36
|
|
@@ -10,7 +10,7 @@ title: devServer
|
|
10
10
|
The config of DevServer can be modified through `tools.devServer`.
|
11
11
|
|
12
12
|
:::tip
|
13
|
-
Modern.js does not directly use [webpack-dev-server](https://webpack.js.org/api/webpack-dev-server/) or [@rspack/dev-server](https://
|
13
|
+
Modern.js does not directly use [webpack-dev-server](https://webpack.js.org/api/webpack-dev-server/) or [@rspack/dev-server](https://rspack.rs/guide/dev-server.html), but implement DevServer based on [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware).
|
14
14
|
:::
|
15
15
|
|
16
16
|
### Options
|
@@ -8,7 +8,7 @@ title: lightningcssLoader
|
|
8
8
|
- **Default:** `Rspack.LightningcssLoaderOptions | Function | boolean`
|
9
9
|
- **Bundler:** `only support rspack`
|
10
10
|
|
11
|
-
You can configure [builtin:lightningcss-loader](https://rspack.
|
11
|
+
You can configure [builtin:lightningcss-loader](https://rspack.rs/guide/features/builtin-lightningcss-loader) through `tools.lightningcssLoader`.
|
12
12
|
|
13
13
|
## Enable loader
|
14
14
|
|
@@ -7,7 +7,7 @@ title: rspack
|
|
7
7
|
- **Type:** `Rspack.Configuration | Function | undefined`
|
8
8
|
- **Default:** `undefined`
|
9
9
|
|
10
|
-
`tools.rspack` is used to configure [Rspack](https://rspack.
|
10
|
+
`tools.rspack` is used to configure [Rspack](https://rspack.rs/).
|
11
11
|
|
12
12
|
import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
|
13
13
|
|
@@ -19,7 +19,7 @@ When using Rspack as the bundler, SWC will be used for transpiling and compressi
|
|
19
19
|
|
20
20
|
## Used in Rspack mode
|
21
21
|
|
22
|
-
You can set the options of [builtin:swc-loader](https://rspack.
|
22
|
+
You can set the options of [builtin:swc-loader](https://rspack.rs/guide/features/builtin-swc-loader) through `tools.swc`.
|
23
23
|
|
24
24
|
```ts
|
25
25
|
import { defineConfig } from '@modern-js/app-tools';
|
@@ -35,7 +35,7 @@ export default defineConfig<'rspack'>({
|
|
35
35
|
});
|
36
36
|
```
|
37
37
|
|
38
|
-
For more usage, please refer to [Rsbuild - tools.swc](https://rsbuild.
|
38
|
+
For more usage, please refer to [Rsbuild - tools.swc](https://rsbuild.rs/config/tools/swc).
|
39
39
|
|
40
40
|
### Register SWC Plugin
|
41
41
|
|
@@ -66,7 +66,7 @@ This means that you must to choose an SWC plugin that matches the current versio
|
|
66
66
|
|
67
67
|
If you encounter the above issues, a common solution is to upgrade both the Modern.js and SWC plugins to the latest versions.
|
68
68
|
|
69
|
-
For details, please refer to [Rsbuild - SWC Plugin Version](https://rsbuild.
|
69
|
+
For details, please refer to [Rsbuild - SWC Plugin Version](https://rsbuild.rs/guide/basic/configure-swc#swc-plugin-version).
|
70
70
|
|
71
71
|
## Used in Webpack mode
|
72
72
|
|
@@ -6,7 +6,7 @@ title: webpackChain
|
|
6
6
|
|
7
7
|
import { Badge } from '@theme';
|
8
8
|
|
9
|
-
<Badge type="danger"
|
9
|
+
<Badge type="danger">Webpack Only</Badge>
|
10
10
|
|
11
11
|
- **Type:** `Function | undefined`
|
12
12
|
- **Default:** `undefined`
|
@@ -153,23 +153,23 @@ For example, the `RULE.STYLUS` rule exists only when the Stylus plugin is regist
|
|
153
153
|
|
154
154
|
#### CHAIN_ID.RULE
|
155
155
|
|
156
|
-
| ID | Description
|
157
|
-
| ------------- |
|
158
|
-
| `RULE.JS` | Rule for `js`
|
159
|
-
| `RULE.TS` | Rule for `ts`
|
160
|
-
| `RULE.CSS` | Rule for `css`
|
161
|
-
| `RULE.LESS` | Rule for `less`
|
162
|
-
| `RULE.SASS` | Rule for `sass`
|
163
|
-
| `RULE.STYLUS` | Rule for `stylus`(requires [Stylus plugin](https://rsbuild.
|
164
|
-
| `RULE.SVG` | Rule for `svg`
|
165
|
-
| `RULE.PUG` | Rule for `pug`
|
166
|
-
| `RULE.TOML` | Rule for `toml`
|
167
|
-
| `RULE.YAML` | Rule for `yaml`
|
168
|
-
| `RULE.WASM` | Rule for `WASM`
|
169
|
-
| `RULE.NODE` | Rule for `node`
|
170
|
-
| `RULE.FONT` | Rule for `font`
|
171
|
-
| `RULE.IMAGE` | Rule for `image`
|
172
|
-
| `RULE.MEDIA` | Rule for `media`
|
156
|
+
| ID | Description |
|
157
|
+
| ------------- | ------------------------------------------------------------------------------------------ |
|
158
|
+
| `RULE.JS` | Rule for `js` |
|
159
|
+
| `RULE.TS` | Rule for `ts` |
|
160
|
+
| `RULE.CSS` | Rule for `css` |
|
161
|
+
| `RULE.LESS` | Rule for `less` |
|
162
|
+
| `RULE.SASS` | Rule for `sass` |
|
163
|
+
| `RULE.STYLUS` | Rule for `stylus`(requires [Stylus plugin](https://rsbuild.rs/plugins/list/plugin-stylus)) |
|
164
|
+
| `RULE.SVG` | Rule for `svg` |
|
165
|
+
| `RULE.PUG` | Rule for `pug` |
|
166
|
+
| `RULE.TOML` | Rule for `toml` |
|
167
|
+
| `RULE.YAML` | Rule for `yaml` |
|
168
|
+
| `RULE.WASM` | Rule for `WASM` |
|
169
|
+
| `RULE.NODE` | Rule for `node` |
|
170
|
+
| `RULE.FONT` | Rule for `font` |
|
171
|
+
| `RULE.IMAGE` | Rule for `image` |
|
172
|
+
| `RULE.MEDIA` | Rule for `media` |
|
173
173
|
|
174
174
|
#### CHAIN_ID.ONE_OF
|
175
175
|
|
@@ -246,4 +246,4 @@ For example, the `RULE.STYLUS` rule exists only when the Stylus plugin is regist
|
|
246
246
|
|
247
247
|
### Examples
|
248
248
|
|
249
|
-
For usage examples, please refer to: [Rsbuild - bundlerChain examples](https://rsbuild.
|
249
|
+
For usage examples, please refer to: [Rsbuild - bundlerChain examples](https://rsbuild.rs/guide/basic/configure-rspack#examples).
|
@@ -24,7 +24,7 @@ If you are not using Rspack yet, you can switch to Rspack build mode to improve
|
|
24
24
|
|
25
25
|
In general, updating Node.js to the latest [LTS release](https://github.com/nodejs/release#release-schedule) will help improve build performance.
|
26
26
|
|
27
|
-
Especially for devices with Apple M1/M2 chips, it is recommended to use Node 18.
|
27
|
+
Especially for devices with Apple M1/M2 chips, it is recommended to use at least Node 18.
|
28
28
|
|
29
29
|
Node >= 16 provides Apple Silicon binaries by default, so the performance on M1/M2 models will be greatly improved than Node 14. According to our tests, **After switching from Node 14 to Node >= 16, the compilation speed can be improved by more than 100%**.
|
30
30
|
|
@@ -19,7 +19,7 @@ ios_saf >= 10
|
|
19
19
|
```
|
20
20
|
|
21
21
|
:::tip
|
22
|
-
Please refer to [Rsbuild - Browserslist](https://rsbuild.
|
22
|
+
Please refer to [Rsbuild - Browserslist](https://rsbuild.rs/guide/advanced/browserslist) for more information.
|
23
23
|
:::
|
24
24
|
|
25
25
|
## Polyfill
|
@@ -59,12 +59,12 @@ For example, if you only need to be compatible with browsers above Chrome 61, yo
|
|
59
59
|
```
|
60
60
|
|
61
61
|
:::tip
|
62
|
-
Please read the [Browserslist](https://rsbuild.
|
62
|
+
Please read the [Browserslist](https://rsbuild.rs/guide/advanced/browserslist) chapter to know more about the usage of Browserslist.
|
63
63
|
:::
|
64
64
|
|
65
65
|
## Usage polyfill
|
66
66
|
|
67
|
-
When it is clear that third-party dependencies do not require additional
|
67
|
+
When it is clear that third-party dependencies do not require additional polyfills, you can set [output.polyfill](/configure/app/output/polyfill.html) to `usage`.
|
68
68
|
|
69
69
|
In `usage` mode, Modern.js analyzes the syntax used in the source code and injects the required polyfill code on demand to reduce the size of polyfill.
|
70
70
|
|
@@ -98,7 +98,7 @@ See details in [plugin-image-compress](https://github.com/rspack-contrib/rsbuild
|
|
98
98
|
|
99
99
|
A great chunk splitting strategy is very important to improve the loading performance of the application. It can make full use of the browser's caching mechanism to reduce the number of requests and improve the loading speed of the application.
|
100
100
|
|
101
|
-
A variety of [chunk splitting strategies](https://rsbuild.
|
101
|
+
A variety of [chunk splitting strategies](https://rsbuild.rs/guide/optimization/split-chunk) are built into Modern.js, which can meet the needs of most applications. You can also customize the chunk splitting config according to your own business scenarios.
|
102
102
|
|
103
103
|
For example, split the `axios` library under node_modules into `axios.js`:
|
104
104
|
|
@@ -72,7 +72,7 @@ export default {
|
|
72
72
|
|
73
73
|
## Modify transpile configuration
|
74
74
|
|
75
|
-
Modern.js uses Rspack [builtin:swc-loader](https://rspack.
|
75
|
+
Modern.js uses Rspack [builtin:swc-loader](https://rspack.rs/guide/features/builtin-swc-loader) for code translation in Rspack mode.
|
76
76
|
|
77
77
|
Modern.js has provided a more convenient configuration for the common configuration of `builtin:swc-loader`, such as: configuring the component library to import it on demand through [source.transformImport](/configure/app/source/transform-import).
|
78
78
|
|
@@ -102,7 +102,7 @@ Usually, the latest version of Rspack will be integrated into Modern.js. You can
|
|
102
102
|
|
103
103
|
However, Modern.js uses a locked version dependency method (non-automatic upgrade) for Rspack. Due to differences in release cycles, the version of Rspack integrated into Modern.js may be behind the latest version of Rspack.
|
104
104
|
|
105
|
-
When Rspack is enabled for building through dev / build, the current version of Rspack used in the framework will be printed automatically when [debugging mode](https://rsbuild.
|
105
|
+
When Rspack is enabled for building through dev / build, the current version of Rspack used in the framework will be printed automatically when [debugging mode](https://rsbuild.rs/guide/debug/debug-mode) is turned on:
|
106
106
|
|
107
107
|

|
108
108
|
|
@@ -12,20 +12,20 @@ Modern.js has built-in popular community CSS preprocessors, including Less and S
|
|
12
12
|
|
13
13
|
By default, you don't need to configure Less and Sass. If you have custom loader configuration requirements, you can set them up by configuring [tools.less](/configure/app/tools/less) and [tools.sass](/configure/app/tools/sass).
|
14
14
|
|
15
|
-
You can also use Stylus in Modern.js by installing the Stylus plugin provided by Rsbuild. For usage, please refer to [Stylus Plugin](https://rsbuild.
|
15
|
+
You can also use Stylus in Modern.js by installing the Stylus plugin provided by Rsbuild. For usage, please refer to [Stylus Plugin](https://rsbuild.rs/plugins/list/plugin-stylus).
|
16
16
|
|
17
17
|
## Using PostCSS
|
18
18
|
|
19
19
|
Modern.js has built-in [PostCSS](https://postcss.org/) to transform CSS code.
|
20
20
|
|
21
|
-
Please refer to [Rsbuild - Using PostCSS](https://rsbuild.
|
21
|
+
Please refer to [Rsbuild - Using PostCSS](https://rsbuild.rs/guide/basic/css-usage#using-postcss) for detailed usage.
|
22
22
|
|
23
23
|
## Using Lightning CSS
|
24
24
|
|
25
25
|
Modern.js supports using [Lightning CSS](https://lightningcss.dev/) to convert CSS code. This feature can be turned on by configuring [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader).
|
26
26
|
|
27
|
-
Please refer to [Rsbuild - Using Lightning CSS](https://rsbuild.
|
27
|
+
Please refer to [Rsbuild - Using Lightning CSS](https://rsbuild.rs/guide/basic/css-usage#lightning-css) for detailed usage.
|
28
28
|
|
29
29
|
## Using Uno CSS
|
30
30
|
|
31
|
-
Please read the [Rsbuild - Using UnoCSS](https://rsbuild.
|
31
|
+
Please read the [Rsbuild - Using UnoCSS](https://rsbuild.rs/zh/guide/basic/unocss) for detailed usage.
|
@@ -562,11 +562,11 @@ export const loader = async ({ params }) => {
|
|
562
562
|
|
563
563
|
## FAQ
|
564
564
|
|
565
|
-
1. Why there
|
565
|
+
1. Why is there `@modern-js/runtime/router` to re-export React Router API?
|
566
566
|
|
567
|
-
Notice that all the code examples in the documentation
|
567
|
+
Notice that all the code examples in the documentation uses APIs exported from the `@modern-js/runtime/router` package instead of directly using the API exported from the React Router package. So, what is the difference?
|
568
568
|
|
569
|
-
The API exported from `@modern-js/runtime/router` is
|
569
|
+
The API exported from `@modern-js/runtime/router` is the same as the API from the React Router package. If you encounter issues while using an API, check the React Router documentation and issues first.
|
570
570
|
|
571
571
|
Additionally, when using conventional routing, make sure to use the API from `@modern-js/runtime/router` instead of directly using the React Router API. Modern.js internally installs React Router, and using the React Router API directly in your application may result in two versions of React Router being present, causing unexpected behavior.
|
572
572
|
|
@@ -150,7 +150,7 @@ console.log(myFile); // "/static/myFile.6c12aba3.pdf"
|
|
150
150
|
|
151
151
|
For more information about asset modules, please refer to:
|
152
152
|
|
153
|
-
- [Rspack Documentation - Asset modules](https://
|
153
|
+
- [Rspack Documentation - Asset modules](https://rspack.rs/guide/asset-module.html#asset-modules)
|
154
154
|
- [webpack Documentation - Asset modules](https://webpack.js.org/guides/asset-modules/)
|
155
155
|
|
156
156
|
## Image Format
|
@@ -4,7 +4,7 @@ sidebar_position: 2
|
|
4
4
|
|
5
5
|
# Build Engine
|
6
6
|
|
7
|
-
Modern.js internally encapsulates [Rsbuild](https://rsbuild.
|
7
|
+
Modern.js internally encapsulates [Rsbuild](https://rsbuild.rs/), and supports seamless switching between Webpack and Rspack bundlers.
|
8
8
|
|
9
9
|
::: tip What is Rsbuild?
|
10
10
|
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.
|
@@ -25,7 +25,7 @@ From the building perspective, Modern.js can be divided into three-layers, from
|
|
25
25
|
|
26
26
|
## Build Documentation
|
27
27
|
|
28
|
-
The documentation address of Rsbuild is: https://rsbuild.
|
28
|
+
The documentation address of Rsbuild is: https://rsbuild.rs/
|
29
29
|
|
30
30
|
In this documentation, you can learn about the detailed introduction of Rsbuild, and you can also find complete usage guides for various building capabilities.
|
31
31
|
|
@@ -42,4 +42,4 @@ In Modern.js, you can register Webpack plugins, Rspack plugins, or Rsbuild plugi
|
|
42
42
|
|
43
43
|
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.
|
44
44
|
|
45
|
-
We recommend that you read [「Rsbuild - All Features」](https://rsbuild.
|
45
|
+
We recommend that you read [「Rsbuild - All Features」](https://rsbuild.rs/guide/start/features) to learn about all the features provided by Rsbuild.
|
@@ -290,7 +290,7 @@ Note that even if SSR is used, React still needs to go through the hydration pha
|
|
290
290
|
|
291
291
|
4. **What are the exceptions to generating multiple HTML files?**
|
292
292
|
|
293
|
-
You can configure [html-rspack-plugin](https://rspack.
|
293
|
+
You can configure [html-rspack-plugin](https://rspack.rs/plugins/rspack/html-rspack-plugin#generate-multiple-html-files) to generate multiple HTML files for each entry, or let multiple entries share the same HTML file.
|
294
294
|
|
295
295
|
5. **What is a Multi-Page Application (MPA)?**
|
296
296
|
|
@@ -12,7 +12,7 @@ In this document, you can learn about the main technology stack involved in the
|
|
12
12
|
|
13
13
|
Modern.js uses [React 18](https://react.dev/) to build user interfaces and is also compatible with React 17.
|
14
14
|
|
15
|
-
Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://rsbuild.
|
15
|
+
Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://rsbuild.rs/guide/framework/vue).
|
16
16
|
|
17
17
|
## Routing
|
18
18
|
|
@@ -38,7 +38,7 @@ We recommend using pnpm for faster installation speed.
|
|
38
38
|
|
39
39
|
## Bundler
|
40
40
|
|
41
|
-
Modern.js uses [Webpack 5](https://webpack.js.org/) or [Rspack](https://
|
41
|
+
Modern.js uses [Webpack 5](https://webpack.js.org/) or [Rspack](https://rspack.rs/) to bundle your web applications.
|
42
42
|
|
43
43
|
The default bundler used is Webpack 5. You can refer to ["Using Rspack"](/en/guides/advanced-features/rspack-start) to switch to the faster Rspack.
|
44
44
|
|
@@ -69,7 +69,7 @@ Modern.js supports enabling ["Tailwind CSS"](/guides/basic-features/css/tailwind
|
|
69
69
|
Modern.js supports three CSS preprocessors: [Sass](https://sass-lang.com/), [Less](https://lesscss.org/), and [Stylus](https://stylus-lang.com/):
|
70
70
|
|
71
71
|
- Sass and Less are supported by default and ready to use.
|
72
|
-
- Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://rsbuild.
|
72
|
+
- Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://rsbuild.rs/plugins/list/plugin-stylus).
|
73
73
|
|
74
74
|
## CSS Modules
|
75
75
|
|
@@ -10,12 +10,11 @@ If you encounter any build-related issues, you can refer to the current document
|
|
10
10
|
|
11
11
|
### Rsbuild FAQ
|
12
12
|
|
13
|
-
Modern.js is internally based on [Rsbuild](https://rsbuild.
|
14
|
-
|
15
|
-
- [Rsbuild - Features FAQ](https://rsbuild.dev/guide/faq/features)
|
16
|
-
- [Rsbuild - Exceptions FAQ](https://rsbuild.dev/guide/faq/exceptions)
|
17
|
-
- [Rsbuild - HMR FAQ](https://rsbuild.dev/guide/faq/hmr)
|
13
|
+
Modern.js is internally based on [Rsbuild](https://rsbuild.rs/) and encapsulates its own build tool, so you can directly refer to the FAQ document of Rsbuild:
|
18
14
|
|
15
|
+
- [Rsbuild - Features FAQ](https://rsbuild.rs/guide/faq/features)
|
16
|
+
- [Rsbuild - Exceptions FAQ](https://rsbuild.rs/guide/faq/exceptions)
|
17
|
+
- [Rsbuild - HMR FAQ](https://rsbuild.rs/guide/faq/hmr)
|
19
18
|
|
20
19
|
---
|
21
20
|
|