@modern-js/main-doc 0.0.0-nightly-20240109170615 → 0.0.0-nightly-20240110170629
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.
|
@@ -25,27 +25,18 @@ After the project is created, you can experience the project by running `pnpm ru
|
|
|
25
25
|
:::tip
|
|
26
26
|
When using Rspack as the bundler, the following Features are temporarily unavailable as some of the capabilities are still under development and we will provide support in the future.
|
|
27
27
|
|
|
28
|
-
- Storybook Devtool
|
|
29
28
|
- The usage of [useLoader](/guides/basic-features/data/data-fetch.html) in Client Side Rendering
|
|
30
29
|
|
|
31
30
|
:::
|
|
32
31
|
|
|
33
32
|
## Enable Rspack build
|
|
34
33
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
```bash
|
|
38
|
-
$ pnpm run new
|
|
39
|
-
? Please select the operation you want: Enable features
|
|
40
|
-
? Please select the feature name: Enable Rspack Build
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
After executing the command, enable the Rspack build in `modern.config.ts`:
|
|
34
|
+
Since Modern.js MAJOR_VERSION.46.0, you can enable Rspack build by add the following configuration in `modern.config.ts`:
|
|
44
35
|
|
|
45
36
|
```diff title=modern.config.ts
|
|
46
37
|
import { appTools, defineConfig } from '@modern-js/app-tools';
|
|
47
38
|
|
|
48
|
-
|
|
39
|
+
export default defineConfig({
|
|
49
40
|
plugins: [
|
|
50
41
|
appTools({
|
|
51
42
|
+ bundler: 'experimental-rspack',
|
|
@@ -54,6 +45,10 @@ import { appTools, defineConfig } from '@modern-js/app-tools';
|
|
|
54
45
|
});
|
|
55
46
|
```
|
|
56
47
|
|
|
48
|
+
:::tip
|
|
49
|
+
If your current version is lower than MAJOR_VERSION.46.0, you can upgrade by executing `npx modern upgrade`.
|
|
50
|
+
:::
|
|
51
|
+
|
|
57
52
|
import RspackPrecautions from '@modern-js/builder-doc/docs/en/shared/rspackPrecautions.md';
|
|
58
53
|
|
|
59
54
|
<RspackPrecautions />
|
|
@@ -62,15 +57,43 @@ import RspackPrecautions from '@modern-js/builder-doc/docs/en/shared/rspackPreca
|
|
|
62
57
|
|
|
63
58
|
After enabling Rspack building capability, further configuration migration is needed by referring to the [Configuration Differences](https://modernjs.dev/builder/en/guide/advanced/rspack-start.html#migrating-from-webpack-to-rspack).
|
|
64
59
|
|
|
60
|
+
In Modern.js, the [tools.webpack](/configure/app/tools/webpack) and [tools.webpackChain](/configure/app/tools/webpack-chain) configurations only take effect in webpack mode, after turning on the Rspack build, you can modify it to [tools.rspack](/configure/app/tools/rspack) and [tools.bundlerChain](/configure/app/tools/bundler-chain).
|
|
61
|
+
|
|
62
|
+
```diff
|
|
63
|
+
export default {
|
|
64
|
+
tools: {
|
|
65
|
+
- webppack: (config, { env }) => {
|
|
66
|
+
+ rspack: (config, { env }) => {
|
|
67
|
+
if (env === 'development') {
|
|
68
|
+
config.devtool = 'cheap-module-eval-source-map';
|
|
69
|
+
}
|
|
70
|
+
return config;
|
|
71
|
+
},
|
|
72
|
+
- webpackChain: (chain, { env }) => {
|
|
73
|
+
+ bundlerChain: (chain, { env }) => {
|
|
74
|
+
if (env === 'development') {
|
|
75
|
+
chain.devtool('cheap-module-eval-source-map');
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
:::tip
|
|
83
|
+
After turning on the Rspack build capability, there are currently a small number of configurations that are not supported in Rspack, such as [source.moduleScopes](/configure/app/source/module-scopes), [security.sri](/configure/app/security/sri) etc.
|
|
84
|
+
|
|
85
|
+
For unsupported configurations, we have marked `Bundler: only support webpack` or `Bundler: only support Rspack` in the document. Please refer to the specific configuration introduction.
|
|
86
|
+
:::
|
|
87
|
+
|
|
65
88
|
## The relationship between Rspack and Modern.js versions
|
|
66
89
|
|
|
67
90
|
Usually, the latest version of Rspack will be integrated into Modern.js. You can update the Modern.js-related dependencies and built-in Rspack to the latest version by using `npx modern upgrade` in your project.
|
|
68
91
|
|
|
69
92
|
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.
|
|
70
93
|
|
|
71
|
-
When Rspack is enabled for building through dev / build, the current version of Rspack used in the framework will be printed automatically:
|
|
94
|
+
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 is turned on:
|
|
72
95
|
|
|
73
|
-
|
|
74
97
|
|
|
75
98
|
### Override the Built-in Rspack Version
|
|
76
99
|
|
|
@@ -25,27 +25,18 @@ import InitRspackApp from '@site-docs/components/init-rspack-app';
|
|
|
25
25
|
:::tip
|
|
26
26
|
在使用 Rspack 作为打包工具时，由于部分能力尚在开发中，以下 features 暂时无法使用，我们将在未来提供支持：
|
|
27
27
|
|
|
28
|
-
- Storybook 调试
|
|
29
28
|
- 客户端渲染（CSR）使用 [useLoader](/guides/basic-features/data/data-fetch.html)
|
|
30
29
|
|
|
31
30
|
:::
|
|
32
31
|
|
|
33
32
|
## 开启 Rspack 构建
|
|
34
33
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
```bash
|
|
38
|
-
$ pnpm run new
|
|
39
|
-
? 请选择你想要的操作 启用可选功能
|
|
40
|
-
? 请选择功能名称 启用「Rspack 构建」
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
执行以上命令后，在 `modern.config.ts` 中添加 Rspack 相关配置即可：
|
|
34
|
+
从 Modern.js MAJOR_VERSION.46.0 版本起，在一个已有的 Modern.js 项目中，你仅需在 `modern.config.ts` 中添加以下配置，即可启用 Rspack 构建：
|
|
44
35
|
|
|
45
36
|
```diff title=modern.config.ts
|
|
46
37
|
import { appTools, defineConfig } from '@modern-js/app-tools';
|
|
47
38
|
|
|
48
|
-
|
|
39
|
+
export default defineConfig({
|
|
49
40
|
plugins: [
|
|
50
41
|
appTools({
|
|
51
42
|
+ bundler: 'experimental-rspack',
|
|
@@ -54,13 +45,44 @@ import { appTools, defineConfig } from '@modern-js/app-tools';
|
|
|
54
45
|
});
|
|
55
46
|
```
|
|
56
47
|
|
|
48
|
+
:::tip
|
|
49
|
+
如果你当前版本低于 MAJOR_VERSION.46.0, 可通过执行 `npx modern upgrade` 进行升级。
|
|
50
|
+
:::
|
|
51
|
+
|
|
57
52
|
import RspackPrecautions from '@modern-js/builder-doc/docs/zh/shared/rspackPrecautions.md';
|
|
58
53
|
|
|
59
54
|
<RspackPrecautions />
|
|
60
55
|
|
|
61
56
|
## 配置迁移
|
|
62
57
|
|
|
63
|
-
|
|
58
|
+
Modern.js 中 [tools.webpack](/configure/app/tools/webpack) 和 [tools.webpackChain](/configure/app/tools/webpack-chain) 配置仅在 webpack 模式下生效，开启 Rspack 构建能力后，可根据实际使用场景决定是否修改为 [tools.rspack](/configure/app/tools/rspack) 或 [tools.bundlerChain](/configure/app/tools/bundler-chain)。
|
|
59
|
+
|
|
60
|
+
```diff
|
|
61
|
+
export default {
|
|
62
|
+
tools: {
|
|
63
|
+
- webppack: (config, { env }) => {
|
|
64
|
+
+ rspack: (config, { env }) => {
|
|
65
|
+
if (env === 'development') {
|
|
66
|
+
config.devtool = 'cheap-module-eval-source-map';
|
|
67
|
+
}
|
|
68
|
+
return config;
|
|
69
|
+
},
|
|
70
|
+
- webpackChain: (chain, { env }) => {
|
|
71
|
+
+ bundlerChain: (chain, { env }) => {
|
|
72
|
+
if (env === 'development') {
|
|
73
|
+
chain.devtool('cheap-module-eval-source-map');
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
};
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
:::tip
|
|
82
|
+
开启 Rspack 构建能力后，目前有小部分配置在 Rspack 中还不支持使用，如 [source.moduleScopes](/configure/app/source/module-scopes)、[security.sri](/configure/app/security/sri) 等。
|
|
83
|
+
|
|
84
|
+
对于不支持的配置，我们在文档中有标注 `打包工具： 仅支持 webpack` 或 `打包工具： 仅支持 rspack`，可参考具体配置介绍。
|
|
85
|
+
:::
|
|
64
86
|
|
|
65
87
|
## Rspack 和 Modern.js 的版本关系
|
|
66
88
|
|
|
@@ -68,9 +90,9 @@ import RspackPrecautions from '@modern-js/builder-doc/docs/zh/shared/rspackPreca
|
|
|
68
90
|
|
|
69
91
|
但 Modern.js 对于 Rspack 的依赖方式为锁版本方式(非自动升级)，由于发版周期不同步等原因，可能会出现 Modern.js 内集成的 Rspack 版本落后于 Rspack 最新版本的情况。
|
|
70
92
|
|
|
71
|
-
当你执行 dev / build 命令时，Modern.js
|
|
93
|
+
当你执行 dev / build 命令时，Modern.js 会在开启调试模式时自动打印当前使用的 Rspack 版本：
|
|
72
94
|
|
|
73
|
-
|
|
74
96
|
|
|
75
97
|
#### 修改内置 Rspack 版本
|
|
76
98
|
|
|
@@ -6,7 +6,7 @@ sidebar_position: 14
|
|
|
6
6
|
|
|
7
7
|
[CSS Modules](https://github.com/css-modules/css-modules) 让我们能以模块化的方式编写 CSS 代码，并且可以在 JavaScript 文件中导入和使用这些样式。使用 CSS Modules 可以自动生成唯一的类名，隔离不同模块之间的样式，避免类名冲突。
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Modern.js 默认支持使用 CSS Modules，无需添加额外的配置。我们约定使用 `[name].module.css` 文件名来启用 CSS Modules。
|
|
10
10
|
|
|
11
11
|
以下样式文件会被视为 CSS Modules：
|
|
12
12
|
|
package/package.json
CHANGED
|
@@ -15,17 +15,17 @@
|
|
|
15
15
|
"modern",
|
|
16
16
|
"modern.js"
|
|
17
17
|
],
|
|
18
|
-
"version": "0.0.0-nightly-
|
|
18
|
+
"version": "0.0.0-nightly-20240110170629",
|
|
19
19
|
"publishConfig": {
|
|
20
20
|
"registry": "https://registry.npmjs.org/",
|
|
21
21
|
"access": "public",
|
|
22
22
|
"provenance": true
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@modern-js/sandpack-react": "0.0.0-nightly-
|
|
25
|
+
"@modern-js/sandpack-react": "0.0.0-nightly-20240110170629"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@modern-js/builder-doc": "0.0.0-nightly-
|
|
28
|
+
"@modern-js/builder-doc": "0.0.0-nightly-20240110170629"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"classnames": "^2",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"@rspress/shared": "1.9.3",
|
|
40
40
|
"@types/node": "^16",
|
|
41
41
|
"@types/fs-extra": "9.0.13",
|
|
42
|
-
"@modern-js/builder-doc": "0.0.0-nightly-
|
|
43
|
-
"@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-
|
|
42
|
+
"@modern-js/builder-doc": "0.0.0-nightly-20240110170629",
|
|
43
|
+
"@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20240110170629"
|
|
44
44
|
},
|
|
45
45
|
"scripts": {
|
|
46
46
|
"dev": "rspress dev",
|