@modern-js/main-doc 3.0.2 → 3.0.3

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.
Files changed (53) hide show
  1. package/docs/en/apis/app/commands.mdx +1 -1
  2. package/docs/en/community/blog/v3-release-note.mdx +5 -2
  3. package/docs/en/components/rsbuild.mdx +1 -1
  4. package/docs/en/configure/app/builder-plugins.mdx +1 -1
  5. package/docs/en/configure/app/dev/server.mdx +6 -6
  6. package/docs/en/configure/app/resolve/alias-strategy.mdx +1 -1
  7. package/docs/en/configure/app/resolve/dedupe.mdx +1 -1
  8. package/docs/en/configure/app/security/sri.mdx +1 -1
  9. package/docs/en/configure/app/source/decorators.mdx +1 -1
  10. package/docs/en/configure/app/tools/bundler-chain.mdx +1 -1
  11. package/docs/en/configure/app/tools/swc.mdx +2 -2
  12. package/docs/en/guides/advanced-features/compatibility.mdx +1 -1
  13. package/docs/en/guides/advanced-features/page-performance/optimize-bundle.mdx +1 -1
  14. package/docs/en/guides/basic-features/css/css.mdx +4 -4
  15. package/docs/en/guides/basic-features/css/tailwindcss.mdx +2 -2
  16. package/docs/en/guides/concept/builder.mdx +3 -3
  17. package/docs/en/guides/get-started/tech-stack.mdx +3 -3
  18. package/docs/en/guides/troubleshooting/builder.mdx +4 -4
  19. package/docs/en/guides/upgrade/config.mdx +3 -3
  20. package/docs/en/guides/upgrade/other.mdx +50 -0
  21. package/docs/en/guides/upgrade/overview.mdx +1 -1
  22. package/docs/en/guides/upgrade/tailwindcss.mdx +1 -1
  23. package/docs/en/plugin/cli-plugins/api.mdx +9 -9
  24. package/docs/en/plugin/introduction.mdx +4 -4
  25. package/docs/zh/apis/app/commands.mdx +1 -1
  26. package/docs/zh/community/blog/v3-release-note.mdx +4 -2
  27. package/docs/zh/components/rsbuild.mdx +1 -1
  28. package/docs/zh/configure/app/builder-plugins.mdx +1 -1
  29. package/docs/zh/configure/app/dev/server.mdx +6 -6
  30. package/docs/zh/configure/app/resolve/alias-strategy.mdx +1 -1
  31. package/docs/zh/configure/app/resolve/dedupe.mdx +1 -1
  32. package/docs/zh/configure/app/security/sri.mdx +1 -1
  33. package/docs/zh/configure/app/source/decorators.mdx +1 -1
  34. package/docs/zh/configure/app/tools/bundler-chain.mdx +1 -1
  35. package/docs/zh/configure/app/tools/swc.mdx +2 -2
  36. package/docs/zh/guides/advanced-features/compatibility.mdx +1 -1
  37. package/docs/zh/guides/advanced-features/page-performance/optimize-bundle.mdx +1 -1
  38. package/docs/zh/guides/basic-features/css/css.mdx +4 -4
  39. package/docs/zh/guides/basic-features/css/tailwindcss.mdx +2 -2
  40. package/docs/zh/guides/concept/builder.mdx +3 -3
  41. package/docs/zh/guides/get-started/tech-stack.mdx +3 -3
  42. package/docs/zh/guides/troubleshooting/builder.mdx +4 -4
  43. package/docs/zh/guides/upgrade/config.mdx +3 -3
  44. package/docs/zh/guides/upgrade/other.md +50 -0
  45. package/docs/zh/guides/upgrade/overview.mdx +1 -1
  46. package/docs/zh/guides/upgrade/tailwindcss.mdx +1 -1
  47. package/docs/zh/plugin/cli-plugins/api.mdx +9 -9
  48. package/docs/zh/plugin/introduction.mdx +4 -4
  49. package/package.json +3 -3
  50. package/src/i18n/enUS.ts +5 -1
  51. package/src/i18n/zhCN.ts +5 -1
  52. package/src/pages/index.module.scss +93 -0
  53. package/src/pages/index.tsx +12 -0
@@ -150,7 +150,7 @@ Options:
150
150
 
151
151
  ## modern inspect
152
152
 
153
- The `modern inspect` command is used to view the Modern.js config, [Rsbuild config](https://v2.rsbuild.dev/config/index) and Rspack config of the project.
153
+ The `modern inspect` command is used to view the Modern.js config, [Rsbuild config](https://v2.rsbuild.rs/config/index) and Rspack config of the project.
154
154
 
155
155
  ```bash
156
156
  Usage: modern inspect [options]
@@ -2,7 +2,8 @@
2
2
  title: Modern.js v3 Release
3
3
  ---
4
4
 
5
- # Modern.js v3 Release: Fully Embracing Rspack
5
+
6
+ # Modern.js v3 Release: Focused on web framework, embracing ecosystem development
6
7
 
7
8
  > Published on 2025.02.06
8
9
 
@@ -10,6 +11,8 @@ title: Modern.js v3 Release
10
11
 
11
12
  It has been three years since the [Modern.js 2.0 release](./v2-release-note.mdx). We sincerely thank the community developers for using and trusting Modern.js. Modern.js has maintained a steady iteration pace, with over 100 versions released.
12
13
 
14
+ In Bytedance, the web development framework based on Modern.js has become mainstream. The proportion of active web projects in the company has grown from 43% at the beginning of 2025 to nearly 70% now.
15
+
13
16
  Over these three years, we have continuously added new features, performed code refactoring and optimizations, and received extensive community feedback. These experiences have become important references for the improvements in version 3.0. After careful consideration, we decided to release Modern.js 3.0, delivering a comprehensive upgrade to the framework.
14
17
 
15
18
  ## The Evolution from Modern.js 2.0 to 3.0
@@ -122,7 +125,7 @@ Modern.js 3.0 upgrades its underlying Rspack and Rsbuild dependencies to version
122
125
 
123
126
  Refer to the following docs for details on underlying behavior changes:
124
127
 
125
- - [Rsbuild 2.0 Upgrade Guide](https://rsbuild.dev/guide/upgrade/v1-to-v2)
128
+ - [Rsbuild 2.0 Upgrade Guide](https://v2.rsbuild.rs/guide/upgrade/v1-to-v2)
126
129
  - [Rspack 2.0 Breaking Changes](https://github.com/web-infra-dev/rspack/discussions/9270)
127
130
 
128
131
  **Faster Build Speed**
@@ -1,3 +1,3 @@
1
- [Rsbuild](https://v2.rsbuild.dev/) 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.
1
+ [Rsbuild](https://v2.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.
@@ -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://v2.rsbuild.dev/plugins/dev/index).
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://v2.rsbuild.rs/plugins/dev/index).
13
13
 
14
14
  ## Precautions
15
15
 
@@ -28,7 +28,7 @@ export default {
28
28
  };
29
29
  ```
30
30
 
31
- For more details, please refer to the [Rsbuild - server.compress](https://v2.rsbuild.dev/config/server/compress) documentation.
31
+ For more details, please refer to the [Rsbuild - server.compress](https://v2.rsbuild.rs/config/server/compress) documentation.
32
32
 
33
33
  ### headers
34
34
 
@@ -49,7 +49,7 @@ export default {
49
49
  };
50
50
  ```
51
51
 
52
- For more details, please refer to the [Rsbuild - server.headers](https://v2.rsbuild.dev/config/server/headers) documentation.
52
+ For more details, please refer to the [Rsbuild - server.headers](https://v2.rsbuild.rs/config/server/headers) documentation.
53
53
 
54
54
  ### historyApiFallback
55
55
 
@@ -68,7 +68,7 @@ export default {
68
68
  };
69
69
  ```
70
70
 
71
- For more configuration options, please refer to the [Rsbuild - server.historyApiFallback](https://v2.rsbuild.dev/config/server/history-api-fallback) documentation.
71
+ For more configuration options, please refer to the [Rsbuild - server.historyApiFallback](https://v2.rsbuild.rs/config/server/history-api-fallback) documentation.
72
72
 
73
73
  ### watch
74
74
 
@@ -77,7 +77,7 @@ For more configuration options, please refer to the [Rsbuild - server.historyApi
77
77
 
78
78
  Whether to watch files change in directories such as `mock/`, `server/`, `api/`.
79
79
 
80
- For more details, please refer to the [Rsbuild - dev.watchFiles](https://v2.rsbuild.dev/config/dev/watch-files) documentation.
80
+ For more details, please refer to the [Rsbuild - dev.watchFiles](https://v2.rsbuild.rs/config/dev/watch-files) documentation.
81
81
 
82
82
  ### cors
83
83
 
@@ -100,7 +100,7 @@ const defaultOptions = {
100
100
  };
101
101
  ```
102
102
 
103
- For more configuration options and detailed usage, please refer to the [Rsbuild - server.cors](https://v2.rsbuild.dev/config/server/cors) documentation.
103
+ For more configuration options and detailed usage, please refer to the [Rsbuild - server.cors](https://v2.rsbuild.rs/config/server/cors) documentation.
104
104
 
105
105
  ### proxy
106
106
 
@@ -124,5 +124,5 @@ export default {
124
124
  ```
125
125
 
126
126
  :::tip
127
- This option is the same as Rsbuild's `server.proxy` option, see [Rsbuild - server.proxy](https://v2.rsbuild.dev/config/server/proxy) for detailed usage.
127
+ This option is the same as Rsbuild's `server.proxy` option, see [Rsbuild - server.proxy](https://v2.rsbuild.rs/config/server/proxy) for detailed usage.
128
128
  :::
@@ -7,7 +7,7 @@ title: aliasStrategy
7
7
  - **Type:** `'prefer-tsconfig' | 'prefer-alias'`
8
8
  - **Default:** `'prefer-tsconfig'`
9
9
 
10
- Set the strategy for path alias resolution, to control the priority relationship between the paths option in `tsconfig.json` and the [resolve.alias](https://v2.rsbuild.dev/config/resolve/alias) option of Rsbuild.
10
+ Set the strategy for path alias resolution, to control the priority relationship between the paths option in `tsconfig.json` and the [resolve.alias](https://v2.rsbuild.rs/config/resolve/alias) option of Rsbuild.
11
11
 
12
12
  import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
13
13
 
@@ -6,7 +6,7 @@ title: dedupe
6
6
 
7
7
  - **Type:** `string[]`
8
8
 
9
- Force Rsbuild to resolve the specified packages from project root, which is useful for deduplicating packages and reducing the bundle size. same as the [resolve.dedupe](https://v2.rsbuild.dev/config/resolve/dedupe) config of Rsbuild.
9
+ Force Rsbuild to resolve the specified packages from project root, which is useful for deduplicating packages and reducing the bundle size. same as the [resolve.dedupe](https://v2.rsbuild.rs/config/resolve/dedupe) config of Rsbuild.
10
10
 
11
11
  import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
12
12
 
@@ -18,7 +18,7 @@ type SriOptions = {
18
18
  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.
19
19
 
20
20
  :::info
21
- For a specific introduction to SRI, you can refer to [Rsbuild security.sri](https://v2.rsbuild.dev/zh/config/security/sri).
21
+ For a specific introduction to SRI, you can refer to [Rsbuild security.sri](https://v2.rsbuild.rs/zh/config/security/sri).
22
22
 
23
23
  This configuration type is not completely consistent with Rsbuild and will be automatically converted during the build process.
24
24
  :::
@@ -23,7 +23,7 @@ const defaultDecorators = {
23
23
  Used to configure the decorators syntax.
24
24
 
25
25
  :::warning
26
- The usage of this configuration item is exactly the same as that of Rsbuild, but the default value is different. For detailed information, please refer to [Rsbuild - source.decorators](https://v2.rsbuild.dev/config/source/decorators).
26
+ The usage of this configuration item is exactly the same as that of Rsbuild, but the default value is different. For detailed information, please refer to [Rsbuild - source.decorators](https://v2.rsbuild.rs/config/source/decorators).
27
27
  :::
28
28
 
29
29
  We found that most projects still use the `legacy` version of the decorator syntax, so the default value is `legacy`.
@@ -27,4 +27,4 @@ Configurations modified via bundler chain will work on Rspack builds.
27
27
 
28
28
  > `tools.bundlerChain` is executed earlier than tools.rspack and thus will be overridden by changes in tools.rspack.
29
29
 
30
- For more information, please refer to [Rsbuild#tools.bundlerChain](https://v2.rsbuild.dev/config/tools/bundler-chain).
30
+ For more information, please refer to [Rsbuild#tools.bundlerChain](https://v2.rsbuild.rs/config/tools/bundler-chain).
@@ -35,7 +35,7 @@ export default defineConfig({
35
35
  });
36
36
  ```
37
37
 
38
- For more usage, please refer to [Rsbuild - tools.swc](https://v2.rsbuild.dev/config/tools/swc).
38
+ For more usage, please refer to [Rsbuild - tools.swc](https://v2.rsbuild.rs/config/tools/swc).
39
39
 
40
40
  ### Register SWC Plugin
41
41
 
@@ -66,4 +66,4 @@ 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://v2.rsbuild.dev/guide/configuration/swc#swc-plugin-version).
69
+ For details, please refer to [Rsbuild - SWC Plugin Version](https://v2.rsbuild.rs/guide/configuration/swc#swc-plugin-version).
@@ -56,7 +56,7 @@ The `overrideBrowserslist` configuration has a higher priority than the `.browse
56
56
  In most scenarios, it is recommended to prioritize using the `.browserslistrc` file rather than the `overrideBrowserslist` configuration because the `.browserslistrc` file is the officially defined configuration file, has better general applicability, and can be recognized by other libraries in the community.
57
57
 
58
58
  :::tip
59
- Please refer to [Rsbuild - Setting Browser Range](https://v2.rsbuild.dev/zh/guide/advanced/browserslist) for more information.
59
+ Please refer to [Rsbuild - Setting Browser Range](https://v2.rsbuild.rs/zh/guide/advanced/browserslist) for more information.
60
60
  :::
61
61
 
62
62
  import UpgradeBrowserslist from '@site-docs-en/components/upgrade-browserslist';
@@ -98,4 +98,4 @@ 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://v2.rsbuild.dev/guide/optimization/code-splitting) 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.
101
+ A variety of [chunk splitting strategies](https://v2.rsbuild.rs/guide/optimization/code-splitting) 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.
@@ -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://v2.rsbuild.dev/plugins/list/plugin-stylus).
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://v2.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://v2.rsbuild.dev/guide/styling/css-usage) for detailed usage.
21
+ Please refer to [Rsbuild - Using PostCSS](https://v2.rsbuild.rs/guide/styling/css-usage) 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://v2.rsbuild.dev/guide/styling/css-usage#lightning-css) for detailed usage.
27
+ Please refer to [Rsbuild - Using Lightning CSS](https://v2.rsbuild.rs/guide/styling/css-usage#lightning-css) for detailed usage.
28
28
 
29
29
  ## Using Uno CSS
30
30
 
31
- Please read the [Rsbuild - Using UnoCSS](https://v2.rsbuild.dev/guide/styling/unocss) for detailed usage.
31
+ Please read the [Rsbuild - Using UnoCSS](https://v2.rsbuild.rs/guide/styling/unocss) for detailed usage.
@@ -6,8 +6,8 @@
6
6
 
7
7
  To use [Tailwind CSS](https://tailwindcss.com/) in Modern.js, you only need to configure it according to the Rsbuild steps. Rsbuild supports Tailwind CSS versions v3 and v4:
8
8
 
9
- - [Tailwind CSS v3](https://v2.rsbuild.dev/guide/styling/tailwindcss-v3#tailwind-css-v3)
10
- - [Tailwind CSS v4](https://v2.rsbuild.dev/guide/styling/tailwindcss)
9
+ - [Tailwind CSS v3](https://v2.rsbuild.rs/guide/styling/tailwindcss-v3#tailwind-css-v3)
10
+ - [Tailwind CSS v4](https://v2.rsbuild.rs/guide/styling/tailwindcss)
11
11
 
12
12
  ## Tailwind CSS Autocomplete
13
13
 
@@ -4,7 +4,7 @@ sidebar_position: 2
4
4
 
5
5
  # Build Engine
6
6
 
7
- Modern.js internally encapsulates [Rsbuild](https://v2.rsbuild.dev/), using Rspack as the bundler.
7
+ Modern.js internally encapsulates [Rsbuild](https://v2.rsbuild.rs/), using Rspack as the bundler.
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.
@@ -40,7 +40,7 @@ flowchart TD
40
40
 
41
41
  ## Build Documentation
42
42
 
43
- The documentation address of Rsbuild is: https://v2.rsbuild.dev/
43
+ The documentation address of Rsbuild is: https://v2.rsbuild.rs/
44
44
 
45
45
  In this documentation, you can learn about the detailed introduction of Rsbuild, and you can also find complete usage guides for various building capabilities.
46
46
 
@@ -57,4 +57,4 @@ In Modern.js, you can register Rspack plugins or Rsbuild plugins:
57
57
 
58
58
  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.
59
59
 
60
- We recommend that you read [「Rsbuild - All Features」](https://v2.rsbuild.dev/guide/start/features) to learn about all the features provided by Rsbuild.
60
+ We recommend that you read [「Rsbuild - All Features」](https://v2.rsbuild.rs/guide/start/features) to learn about all the features provided by Rsbuild.
@@ -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://v2.rsbuild.dev/guide/framework/vue).
15
+ Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://v2.rsbuild.rs/guide/framework/vue).
16
16
 
17
17
  ## Routing
18
18
 
@@ -34,7 +34,7 @@ Modern.js uses [Rspack](https://rspack.rs/) to bundle your web applications.
34
34
 
35
35
  Modern.js uses [SWC](https://swc.rs/) as JavaScript transpiler to transform TypeScript or JSX into JavaScript code that can run in browsers and perform syntax downgrades.
36
36
 
37
- When using Rspack for building, `babel-loader` is not enabled by default. If you need to add [Babel](https://babeljs.io/) plugins, you can configure them through [`babel plugin`](https://v2.rsbuild.dev/plugins/list/plugin-babel#babel-plugin), which will generate additional compilation overhead and slow down Rspack build speed to some extent.
37
+ When using Rspack for building, `babel-loader` is not enabled by default. If you need to add [Babel](https://babeljs.io/) plugins, you can configure them through [`babel plugin`](https://v2.rsbuild.rs/plugins/list/plugin-babel#babel-plugin), which will generate additional compilation overhead and slow down Rspack build speed to some extent.
38
38
 
39
39
  ## Minimizer
40
40
 
@@ -53,7 +53,7 @@ Modern.js supports enabling ["Tailwind CSS"](/guides/basic-features/css/tailwind
53
53
  Modern.js supports three CSS preprocessors: [Sass](https://sass-lang.com/), [Less](https://lesscss.org/), and [Stylus](https://stylus-lang.com/):
54
54
 
55
55
  - Sass and Less are supported by default and ready to use.
56
- - Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://v2.rsbuild.dev/plugins/list/plugin-stylus).
56
+ - Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://v2.rsbuild.rs/plugins/list/plugin-stylus).
57
57
 
58
58
  ## CSS Modules
59
59
 
@@ -10,11 +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://v2.rsbuild.dev/) and encapsulates its own build tool, so you can directly refer to the FAQ document of Rsbuild:
13
+ Modern.js is internally based on [Rsbuild](https://v2.rsbuild.rs/) and encapsulates its own build tool, so you can directly refer to the FAQ document of Rsbuild:
14
14
 
15
- - [Rsbuild - Features FAQ](https://v2.rsbuild.dev/guide/faq/features)
16
- - [Rsbuild - Exceptions FAQ](https://v2.rsbuild.dev/guide/faq/exceptions)
17
- - [Rsbuild - HMR FAQ](https://v2.rsbuild.dev/guide/faq/hmr)
15
+ - [Rsbuild - Features FAQ](https://v2.rsbuild.rs/guide/faq/features)
16
+ - [Rsbuild - Exceptions FAQ](https://v2.rsbuild.rs/guide/faq/exceptions)
17
+ - [Rsbuild - HMR FAQ](https://v2.rsbuild.rs/guide/faq/hmr)
18
18
 
19
19
  ---
20
20
 
@@ -184,7 +184,7 @@ export default {
184
184
  **Change**: This configuration has been deprecated, you need to manually switch to esbuild minification.
185
185
 
186
186
  ```typescript
187
- // This configuration has been deprecated, please refer to [Switching Minifier](https://v2.rsbuild.dev/config/output/minify#switching-minifier) to manually switch to esbuild minification
187
+ // This configuration has been deprecated, please refer to [Switching Minifier](https://v2.rsbuild.rs/config/output/minify#switching-minifier) to manually switch to esbuild minification
188
188
  // tools: {
189
189
  // esbuild: { /* configuration */ }
190
190
  // },
@@ -195,7 +195,7 @@ export default {
195
195
  **Change**: This configuration has been deprecated, you need to manually switch to Terser minification.
196
196
 
197
197
  ```typescript
198
- // This configuration has been deprecated, please refer to [Switching Minifier](https://v2.rsbuild.dev/config/output/minify#switching-minifier) to manually switch to Terser minification
198
+ // This configuration has been deprecated, please refer to [Switching Minifier](https://v2.rsbuild.rs/config/output/minify#switching-minifier) to manually switch to Terser minification
199
199
  // tools: {
200
200
  // terser: { /* configuration */ }
201
201
  // },
@@ -917,7 +917,7 @@ export default defineRuntimeConfig({
917
917
 
918
918
  ### performance.bundleAnalyze
919
919
 
920
- **Change**: This configuration has been deprecated, it is recommended to use [Rsdoctor](https://v2.rsbuild.dev/guide/debug/rsdoctor) to analyze bundle size.
920
+ **Change**: This configuration has been deprecated, it is recommended to use [Rsdoctor](https://v2.rsbuild.rs/guide/debug/rsdoctor) to analyze bundle size.
921
921
 
922
922
  ### performance.transformLodash
923
923
 
@@ -120,6 +120,56 @@ Modern.js 3.0 removed the `modern new` and `modern upgrade` commands, and you ne
120
120
  The purpose of removing these commands is to make the documentation more aligned with the default implementation approach of AI Agents, not encapsulating operations, so that developers can more clearly understand the specific steps of each operation, and it is also convenient for AI Agents to directly execute corresponding operations according to the documentation.
121
121
  :::
122
122
 
123
+ ## Built-in Arco/Antd Support Removed
124
+
125
+ Modern.js 2.0 had built-in support for on-demand imports of [Arco Design](https://arco.design/) and [Ant Design](https://ant.design/). This built-in support has been removed in 3.0, and users need to configure `source.transformImport` manually.
126
+
127
+ If your project uses Arco Design or Ant Design, please add the corresponding `source.transformImport` configuration manually.
128
+
129
+ **Arco Design Migration Example**:
130
+
131
+ ```typescript
132
+ export default {
133
+ source: {
134
+ transformImport: [
135
+ {
136
+ libraryName: '@arco-design/web-react',
137
+ libraryDirectory: 'es',
138
+ camelToDashComponentName: false,
139
+ style: 'css',
140
+ },
141
+ {
142
+ libraryName: '@arco-design/web-react/icon',
143
+ libraryDirectory: 'react-icon',
144
+ camelToDashComponentName: false,
145
+ },
146
+ ],
147
+ },
148
+ };
149
+ ```
150
+
151
+ **Ant Design Migration Example** (antd v4 and below):
152
+
153
+ ```typescript
154
+ export default {
155
+ source: {
156
+ transformImport: [
157
+ {
158
+ libraryName: 'antd',
159
+ libraryDirectory: 'es',
160
+ style: 'css',
161
+ },
162
+ ],
163
+ },
164
+ };
165
+ ```
166
+
167
+ :::tip
168
+ antd v5 uses a CSS-in-JS solution and natively supports on-demand loading, so `source.transformImport` is not needed.
169
+
170
+ For more details, refer to [Rsbuild - source.transformImport](https://v2.rsbuild.rs/config/source/transform-import).
171
+ :::
172
+
123
173
  ## ESLint Rule Sets
124
174
 
125
175
  Modern.js previously provided complete ESLint rule sets, covering @modern-js (Lint rules for Node.js projects) and @modern-js-app (Lint rules for frontend projects). In [v2.60.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.60.0), we officially removed these rule sets. We encourage developers to choose appropriate code specification tools according to their needs, directly use ESLint combined with community-recommended rules, or use Biome to improve code formatting performance.
@@ -6,7 +6,7 @@ This guide will help you upgrade from Modern.js 2.0 to Modern.js 3.0.
6
6
 
7
7
  Modern.js 3.0 brings significant improvements and changes, including:
8
8
 
9
- - **Build Tool Upgrade**: Default use of [Rspack](https://rspack.dev) for building, no longer supporting Webpack. Build configuration is aligned with [Rsbuild](https://rsbuild.dev).
9
+ - **Build Tool Upgrade**: Default use of [Rspack](https://rspack.dev) for building, no longer supporting Webpack. Build configuration is aligned with [Rsbuild](https://v2.rsbuild.rs).
10
10
  - **React Ecosystem Upgrade**: Full support for [React 19](https://react.dev/blog/2024/04/25/react-19) and [React Router v7](https://reactrouter.com).
11
11
  - **Plugin System Refactoring**: Redesigned plugin API, supporting custom plugins at CLI, Runtime, and Server layers to extend framework capabilities.
12
12
  - **React Server Component**: Support for using React Server Component in [CSR](/guides/get-started/glossary#csr) and [SSR](/guides/basic-features/render/ssr) projects.
@@ -4,7 +4,7 @@ Modern.js 3.0 recommends integrating Tailwind CSS through Rsbuild's native appro
4
4
 
5
5
  ## Migration Steps
6
6
 
7
- The migration operations in this section only need to be performed when the project actually uses the `@modern-js/plugin-tailwindcss` plugin.
7
+ The migration operations in this section are only required if the project uses the `@modern-js/plugin-tailwindcss` plugin and the `tailwindcss` version is v2 or v3.
8
8
 
9
9
  ### 1. Remove Old Plugin
10
10
 
@@ -192,7 +192,7 @@ Modify Rspack configuration using the chain API.
192
192
  - **Parameters:**
193
193
  - `modifyFn`: A modification function that receives a `RspackChain` instance and utility functions as parameters.
194
194
  - **Execution Phase:** When generating the final Rspack configuration.
195
- - **Corresponding Rsbuild Hook:** [modifyBundlerChain](https://v2.rsbuild.dev/plugins/dev/hooks#modifybundlerchain)
195
+ - **Corresponding Rsbuild Hook:** [modifyBundlerChain](https://v2.rsbuild.rs/plugins/dev/hooks#modifybundlerchain)
196
196
  - **Example:**
197
197
 
198
198
  ```typescript
@@ -212,7 +212,7 @@ Modify the Rsbuild configuration.
212
212
  - **Parameters:**
213
213
  - `modifyFn`: A modification function that receives the Rsbuild configuration object and utility functions as parameters. It can return the modified configuration object, a Promise, or nothing (modifying the original object directly).
214
214
  - **Execution Phase:** When generating the final Rsbuild configuration.
215
- - **Corresponding Rsbuild Hook:** [modifyRsbuildConfig](https://v2.rsbuild.dev/plugins/dev/hooks#modifyrsbuildconfig)
215
+ - **Corresponding Rsbuild Hook:** [modifyRsbuildConfig](https://v2.rsbuild.rs/plugins/dev/hooks#modifyrsbuildconfig)
216
216
  - **Example:**
217
217
 
218
218
  ```typescript
@@ -232,7 +232,7 @@ Modify the Rspack configuration (when using Rspack as the bundler).
232
232
  - **Parameters:**
233
233
  - `modifyFn`: A modification function that receives the Rspack configuration object and utility functions as parameters. It can return the modified configuration object, a Promise, or nothing (modifying the original object directly).
234
234
  - **Execution Phase:** When generating the final Rspack configuration.
235
- - **Corresponding Rsbuild Hook:** [modifyRspackConfig](https://v2.rsbuild.dev/plugins/dev/hooks#modifyrspackconfig)
235
+ - **Corresponding Rsbuild Hook:** [modifyRspackConfig](https://v2.rsbuild.rs/plugins/dev/hooks#modifyrspackconfig)
236
236
  - **Example:**
237
237
 
238
238
  ```typescript
@@ -407,7 +407,7 @@ Add additional logic before the build starts.
407
407
  - **Parameters:**
408
408
  - `buildFn`: A function to be executed before the build, without parameters, can be asynchronous.
409
409
  - **Execution Phase:** Before executing the build process.
410
- - **Corresponding Rsbuild Hook:** [onBeforeBuild](https://v2.rsbuild.dev/plugins/dev/hooks#onbeforebuild)
410
+ - **Corresponding Rsbuild Hook:** [onBeforeBuild](https://v2.rsbuild.rs/plugins/dev/hooks#onbeforebuild)
411
411
  - **Example:**
412
412
 
413
413
  ```typescript
@@ -426,7 +426,7 @@ Add additional logic after the build is complete.
426
426
  - **Parameters:**
427
427
  - `buildFn`: A function to be executed after the build, without parameters, can be asynchronous.
428
428
  - **Execution Phase:** After executing the build process.
429
- - **Corresponding Rsbuild Hook:** [onAfterBuild](https://v2.rsbuild.dev/plugins/dev/hooks#onafterbuild)
429
+ - **Corresponding Rsbuild Hook:** [onAfterBuild](https://v2.rsbuild.rs/plugins/dev/hooks#onafterbuild)
430
430
  - **Example:**
431
431
 
432
432
  ```typescript
@@ -445,7 +445,7 @@ Add additional logic after the development server compilation is complete.
445
445
  - **Parameters:**
446
446
  - `compileFn`: A function to be executed after compilation is complete.
447
447
  - **Execution Phase:** After the development server starts and the initial compilation is complete.
448
- - **Corresponding Rsbuild Hook:** [onDevCompileDone](https://v2.rsbuild.dev/plugins/dev/hooks#ondevcompiledone)
448
+ - **Corresponding Rsbuild Hook:** [onDevCompileDone](https://v2.rsbuild.rs/plugins/dev/hooks#ondevcompiledone)
449
449
  - **Example:**
450
450
 
451
451
  ```typescript
@@ -464,7 +464,7 @@ Add additional logic before creating the compiler instance.
464
464
  - **Parameters:**
465
465
  - `createFn`: A function to be executed before creation, without parameters, can be asynchronous.
466
466
  - **Execution Phase:** Before creating the Rspack compiler instance.
467
- - **Corresponding Rsbuild Hook:** [onBeforeCreateCompiler](https://v2.rsbuild.dev/plugins/dev/hooks#onbeforecreatecompiler)
467
+ - **Corresponding Rsbuild Hook:** [onBeforeCreateCompiler](https://v2.rsbuild.rs/plugins/dev/hooks#onbeforecreatecompiler)
468
468
  - **Example:**
469
469
 
470
470
  ```typescript
@@ -483,7 +483,7 @@ Add additional logic after creating the compiler instance.
483
483
  - **Parameters:**
484
484
  - `createFn`: A function to be executed after creation, without parameters, can be asynchronous.
485
485
  - **Execution Phase:** After creating the Rspack compiler instance.
486
- - **Corresponding Rsbuild Hook:** [onAfterCreateCompiler](https://v2.rsbuild.dev/plugins/dev/hooks#onaftercreatecompiler)
486
+ - **Corresponding Rsbuild Hook:** [onAfterCreateCompiler](https://v2.rsbuild.rs/plugins/dev/hooks#onaftercreatecompiler)
487
487
  - **Example:**
488
488
 
489
489
  ```typescript
@@ -521,7 +521,7 @@ Add additional logic after starting the development server.
521
521
  - **Parameters:**
522
522
  - `devFn`: A function to be executed after the development server starts.
523
523
  - **Execution Phase:** After the development server has successfully started.
524
- - **Corresponding Rsbuild Hook:** [onAfterStartDevServer](https://v2.rsbuild.dev/plugins/dev/hooks#onafterstartdevserver)
524
+ - **Corresponding Rsbuild Hook:** [onAfterStartDevServer](https://v2.rsbuild.rs/plugins/dev/hooks#onafterstartdevserver)
525
525
  - **Example:**
526
526
 
527
527
  ```typescript
@@ -117,7 +117,7 @@ Rsbuild is the underlying build tool for Modern.js. By adding Rsbuild plugins, y
117
117
  You can register Rsbuild plugins in `modern.config.ts` via the `builderPlugins` option. See [builderPlugins](/configure/app/builder-plugins.html) for details.
118
118
 
119
119
  :::info
120
- You can read [Rsbuild Official Website - Plugins](https://v2.rsbuild.dev/plugins/list/index) to learn more about the Rsbuild plugin system.
120
+ You can read [Rsbuild Official Website - Plugins](https://v2.rsbuild.rs/plugins/list/index) to learn more about the Rsbuild plugin system.
121
121
  :::
122
122
 
123
123
  ### Official Plugins
@@ -128,8 +128,8 @@ The following are official Rsbuild plugins that are already built into Modern.js
128
128
 
129
129
  | Plugin | Description | Modern.js Link |
130
130
  | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
131
- | [React Plugin](https://v2.rsbuild.dev/plugins/list/plugin-react) | Provides support for React | - |
132
- | [SVGR Plugin](https://v2.rsbuild.dev/plugins/list/plugin-svgr) | Supports converting SVG images into React components | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export) |
131
+ | [React Plugin](https://v2.rsbuild.rs/plugins/list/plugin-react) | Provides support for React | - |
132
+ | [SVGR Plugin](https://v2.rsbuild.rs/plugins/list/plugin-svgr) | Supports converting SVG images into React components | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export) |
133
133
  | [Assets Retry Plugin](https://github.com/rstackjs/rsbuild-plugin-assets-retry) | Automatically retries requests when static asset loading fails | [output.assetsRetry](/configure/app/output/assets-retry.html) |
134
134
  | [Type Check Plugin](https://github.com/rspack-contrib/rsbuild-plugin-type-check) | Runs TypeScript type checking in a separate process | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
135
135
  | [Source Build Plugin](https://github.com/rspack-contrib/rsbuild-plugin-source-build) | For monorepo scenarios, supports referencing source code from other subdirectories and completing builds and hot updates | [experiments.sourceBuild](/configure/app/experiments/source-build.html) |
@@ -142,7 +142,7 @@ The following are official Rsbuild plugins that are already built into Modern.js
142
142
  The following are official Rsbuild plugins that are not built into Modern.js:
143
143
 
144
144
  - [Image Compress Plugin](https://github.com/rspack-contrib/rsbuild-plugin-image-compress): Compresses image resources used in the project.
145
- - [Stylus Plugin](https://v2.rsbuild.dev/plugins/list/plugin-stylus): Uses Stylus as the CSS preprocessor.
145
+ - [Stylus Plugin](https://v2.rsbuild.rs/plugins/list/plugin-stylus): Uses Stylus as the CSS preprocessor.
146
146
  - [UMD Plugin](https://github.com/rspack-contrib/rsbuild-plugin-umd): Used to build UMD format artifacts.
147
147
  - [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml): Used to reference YAML files and convert them to JavaScript objects.
148
148
  - [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml): Used to reference TOML files and convert them to JavaScript objects.
@@ -150,7 +150,7 @@ Options:
150
150
 
151
151
  ## modern inspect
152
152
 
153
- `modern inspect` 命令用于查看项目的 Modern.js 配置、[Rsbuild 配置](https://v2.rsbuild.dev/zh/config/index) 以及 Rspack 配置。
153
+ `modern inspect` 命令用于查看项目的 Modern.js 配置、[Rsbuild 配置](https://v2.rsbuild.rs/zh/config/index) 以及 Rspack 配置。
154
154
 
155
155
  ```bash
156
156
  Usage: modern inspect [options]
@@ -2,7 +2,7 @@
2
2
  title: Modern.js v3 发布
3
3
  ---
4
4
 
5
- # Modern.js v3 发布:全面拥抱 Rspack
5
+ # Modern.js v3 发布:聚焦 Web 框架,拥抱生态发展
6
6
 
7
7
  > 发表于 2025.02.06
8
8
 
@@ -10,6 +10,8 @@ title: Modern.js v3 发布
10
10
 
11
11
  [Modern.js 2.0 发布](./v2-release-note.mdx) 至今,已过去三年时间,感谢社区开发者们对 Modern.js 的使用和信任。Modern.js 一直保持稳定的迭代,累计发布了超过 100 个版本。
12
12
 
13
+ 在字节内部,基于 Modern.js 开发的 Web 开发框架已经成为主流。在全公司活跃的 Web 项目中,占比从 2025 年初的 43% 增长到目前近 70%。
14
+
13
15
  在这三年中,我们不断扩充新特性,持续进行代码重构与优化,也收到了非常多的社区反馈,这些经验成为了 3.0 版本改进的重要参考。经过慎重考虑,我们决定发布 Modern.js 3.0,对框架进行一次全面的升级。
14
16
 
15
17
  ## Modern.js 2.0 到 3.0 的演变
@@ -122,7 +124,7 @@ Modern.js 3.0 将底层依赖的 Rspack 和 Rsbuild 升级至 2.0 版本,并
122
124
 
123
125
  参考以下文档了解底层行为变化:
124
126
 
125
- - [Rsbuild 2.0 升级指南](https://rsbuild.dev/zh/guide/upgrade/v1-to-v2)
127
+ - [Rsbuild 2.0 升级指南](https://v2.rsbuild.rs/zh/guide/upgrade/v1-to-v2)
126
128
  - [Rspack 2.0 不兼容更新](https://github.com/web-infra-dev/rspack/discussions/9270)
127
129
 
128
130
  **更快的构建速度**
@@ -1,3 +1,3 @@
1
- [Rsbuild](https://v2.rsbuild.dev/) 是一个基于 Rspack 的 web 构建工具,它的目标是为 Rspack 用户提供开箱即用的构建能力,使开发者能够在零配置的情况下启动一个 web 项目。
1
+ [Rsbuild](https://v2.rsbuild.rs/) 是一个基于 Rspack 的 web 构建工具,它的目标是为 Rspack 用户提供开箱即用的构建能力,使开发者能够在零配置的情况下启动一个 web 项目。
2
2
 
3
3
  Rsbuild 集成了社区中基于 Rust 的高性能工具,包括 Rspack 和 SWC,以提供一流的构建速度和开发体验。
@@ -11,7 +11,7 @@ sidebar_position: 21
11
11
 
12
12
  Rsbuild 是 Modern.js 底层的构建工具,请阅读 [构建能力](/guides/concept/builder) 了解相关背景。
13
13
 
14
- 如果你想了解 Rsbuild 插件的编写方式,可以参考 [Rsbuild - 插件系统](https://v2.rsbuild.dev/zh/plugins/dev/index)。
14
+ 如果你想了解 Rsbuild 插件的编写方式,可以参考 [Rsbuild - 插件系统](https://v2.rsbuild.rs/zh/plugins/dev/index)。
15
15
 
16
16
  ## 注意事项
17
17
 
@@ -28,7 +28,7 @@ export default {
28
28
  };
29
29
  ```
30
30
 
31
- 更多详细信息请参考 [Rsbuild - server.compress](https://v2.rsbuild.dev/zh/config/server/compress) 文档。
31
+ 更多详细信息请参考 [Rsbuild - server.compress](https://v2.rsbuild.rs/zh/config/server/compress) 文档。
32
32
 
33
33
  ### headers
34
34
 
@@ -49,7 +49,7 @@ export default {
49
49
  };
50
50
  ```
51
51
 
52
- 更多详细信息请参考 [Rsbuild - server.headers](https://v2.rsbuild.dev/zh/config/server/headers) 文档。
52
+ 更多详细信息请参考 [Rsbuild - server.headers](https://v2.rsbuild.rs/zh/config/server/headers) 文档。
53
53
 
54
54
  ### historyApiFallback
55
55
 
@@ -68,7 +68,7 @@ export default {
68
68
  };
69
69
  ```
70
70
 
71
- 更多配置选项请参考 [Rsbuild - server.historyApiFallback](https://v2.rsbuild.dev/zh/config/server/history-api-fallback) 文档。
71
+ 更多配置选项请参考 [Rsbuild - server.historyApiFallback](https://v2.rsbuild.rs/zh/config/server/history-api-fallback) 文档。
72
72
 
73
73
  ### watch
74
74
 
@@ -77,7 +77,7 @@ export default {
77
77
 
78
78
  是否监听 `mock/`、`server/`、`api/` 等目录的文件变化。
79
79
 
80
- 更多详细信息请参考 [Rsbuild - dev.watchFiles](https://v2.rsbuild.dev/zh/config/dev/watch-files) 文档。
80
+ 更多详细信息请参考 [Rsbuild - dev.watchFiles](https://v2.rsbuild.rs/zh/config/dev/watch-files) 文档。
81
81
 
82
82
  ### cors
83
83
 
@@ -100,7 +100,7 @@ const defaultOptions = {
100
100
  };
101
101
  ```
102
102
 
103
- 更多配置选项和详细用法请参考 [Rsbuild - server.cors](https://v2.rsbuild.dev/zh/config/server/cors) 文档。
103
+ 更多配置选项和详细用法请参考 [Rsbuild - server.cors](https://v2.rsbuild.rs/zh/config/server/cors) 文档。
104
104
 
105
105
  ### proxy
106
106
 
@@ -124,5 +124,5 @@ export default {
124
124
  ```
125
125
 
126
126
  :::tip
127
- 该选项与 Rsbuild 的 `server.proxy` 选项一致,更多用法请参考 [Rsbuild - server.proxy](https://v2.rsbuild.dev/zh/config/server/proxy)。
127
+ 该选项与 Rsbuild 的 `server.proxy` 选项一致,更多用法请参考 [Rsbuild - server.proxy](https://v2.rsbuild.rs/zh/config/server/proxy)。
128
128
  :::