@modern-js/main-doc 0.0.0-nightly-20240304170717 → 0.0.0-nightly-20240306170726
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 +0 -1
- package/docs/en/apis/app/hooks/config/storybook.mdx +1 -2
- package/docs/en/apis/app/hooks/src/stories.mdx +1 -2
- package/docs/en/configure/app/output/filename-hash.mdx +39 -0
- package/docs/en/configure/app/source/decorators.mdx +41 -0
- package/docs/en/configure/app/tools/swc.mdx +22 -4
- package/docs/en/guides/advanced-features/rspack-start.mdx +12 -12
- package/docs/en/guides/topic-detail/framework-plugin/introduction.mdx +0 -1
- package/docs/en/guides/topic-detail/generator/new/config.md +0 -2
- package/docs/zh/apis/app/commands.mdx +0 -1
- package/docs/zh/apis/app/hooks/config/storybook.mdx +1 -1
- package/docs/zh/apis/app/hooks/src/stories.mdx +1 -1
- package/docs/zh/configure/app/output/filename-hash.mdx +38 -0
- package/docs/zh/configure/app/source/decorators.mdx +40 -0
- package/docs/zh/configure/app/tools/swc.mdx +22 -4
- package/docs/zh/guides/advanced-features/rspack-start.mdx +10 -12
- package/docs/zh/guides/topic-detail/framework-plugin/introduction.mdx +0 -1
- package/docs/zh/guides/topic-detail/generator/new/config.md +0 -1
- package/package.json +7 -7
|
@@ -10,8 +10,7 @@ Modern.js supports debugging using Storybook. When configuring Storybook, you ne
|
|
|
10
10
|
Please refer to [Storybook Configuration](https://storybook.js.org/docs/react/configure/overview) for Storybook configuration.
|
|
11
11
|
|
|
12
12
|
:::info
|
|
13
|
-
Enabling the
|
|
14
|
-
|
|
13
|
+
Enabling the Storybook function requires running the new command to enable it under the project first.
|
|
15
14
|
:::
|
|
16
15
|
|
|
17
16
|
#### Example
|
|
@@ -11,7 +11,6 @@ You can create files in the `*.stories.(js|jsx|ts|tsx|mdx)` format in the projec
|
|
|
11
11
|
Run the `npm run dev story` command in the project to use these files to debug relevant content in Storybook.
|
|
12
12
|
|
|
13
13
|
:::info
|
|
14
|
-
To use Storybook, you need to enable the "
|
|
15
|
-
|
|
14
|
+
To use Storybook, you need to enable the "Storybook" mode by running the `new` command in the project first.
|
|
16
15
|
:::
|
|
17
16
|
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_label: filenameHash
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# output.filenameHash
|
|
6
|
+
|
|
7
|
+
- **Type:** `boolean | string`
|
|
8
|
+
- **Default:** `true`
|
|
9
|
+
|
|
10
|
+
Whether to add a hash value to the filename after the production build.
|
|
11
|
+
|
|
12
|
+
### Example
|
|
13
|
+
|
|
14
|
+
By default, the filename of the output files will include a hash value:
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
dist/static/css/index.7879e19d.css
|
|
18
|
+
dist/static/js/index.18a568e5.js
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
You can set `output.filenameHash` to false to disable this behavior:
|
|
22
|
+
|
|
23
|
+
```js
|
|
24
|
+
export default {
|
|
25
|
+
output: {
|
|
26
|
+
filenameHash: false,
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
After rebuilding, the output filenames becomes:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
dist/static/css/index.css
|
|
35
|
+
dist/static/js/index.js
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
For detailed usage, please refer to [Rsbuild - output.filenameHash](https://rsbuild.dev/config/output/filename-hash).
|
|
39
|
+
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_label: decorators
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# source.decorators
|
|
6
|
+
|
|
7
|
+
- **Type:**
|
|
8
|
+
```
|
|
9
|
+
type Decorators = {
|
|
10
|
+
version?: 'legacy' | '2022-03';
|
|
11
|
+
};
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
- **Default:**
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
type Decorators = {
|
|
18
|
+
version: 'legacy',
|
|
19
|
+
};
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Used to configure the decorators syntax.
|
|
23
|
+
|
|
24
|
+
### Example
|
|
25
|
+
|
|
26
|
+
Modern.js uses `legacy` syntax by default (Stage 1 proposal), equivalent to TypeScript's `experimentalDecorators: true`.
|
|
27
|
+
|
|
28
|
+
You can adjust the decorator syntax to the Stage 3 decorator proposal by setting `decorators.version` to `2022-03`.
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
export default {
|
|
32
|
+
source: {
|
|
33
|
+
decorators: {
|
|
34
|
+
version: '2022-03',
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
For detailed usage, please refer to [Rsbuild - source.decorators](https://rsbuild.dev/config/source/decorators).
|
|
41
|
+
|
|
@@ -15,17 +15,35 @@ import SWC from '@modern-js/builder-doc/docs/en/shared/swc.md';
|
|
|
15
15
|
|
|
16
16
|
:::tip
|
|
17
17
|
When using Rspack as the bundler, SWC will be used for transpiling and compression by default, so you don't need to install or configure the SWC plugin.
|
|
18
|
-
|
|
19
|
-
If you have configured the current SWC plugin when using Rspack, it will not have any effect.
|
|
20
18
|
:::
|
|
21
19
|
|
|
22
|
-
##
|
|
20
|
+
## Used in Rspack mode
|
|
21
|
+
|
|
22
|
+
You can set the options of [builtin:swc-loader](https://www.rspack.dev/guide/builtin-swc-loader) through `tools.swc`.
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
import { defineConfig } from '@modern-js/app-tools';
|
|
26
|
+
|
|
27
|
+
export default defineConfig<'rspack'>({
|
|
28
|
+
tools: {
|
|
29
|
+
swc: {
|
|
30
|
+
jsc: {
|
|
31
|
+
externalHelpers: false,
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
});
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
For more usage, please refer to [Rsbuild - tools.swc](https://rsbuild.dev/config/tools/swc).
|
|
39
|
+
|
|
40
|
+
## Used in Webpack mode
|
|
23
41
|
|
|
24
42
|
import EnableSWC from '@modern-js/builder-doc/docs/en/shared/enableSwc.md';
|
|
25
43
|
|
|
26
44
|
<EnableSWC />
|
|
27
45
|
|
|
28
|
-
|
|
46
|
+
### Config
|
|
29
47
|
|
|
30
48
|
You can set the SWC compilation behavior through the `tools.swc` config.
|
|
31
49
|
|
|
@@ -87,22 +87,22 @@ For unsupported configurations, we have marked `Bundler: only support webpack` o
|
|
|
87
87
|
|
|
88
88
|
Modern.js uses Rspack [builtin:swc-loader](https://www.rspack.dev/guide/builtin-swc-loader.html) for code translation in Rspack mode.
|
|
89
89
|
|
|
90
|
-
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).
|
|
90
|
+
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).
|
|
91
|
+
|
|
92
|
+
If you have custom configuration requirements for `builtin:swc-loader`, you can set the options of builtin:swc-loader through [tools.swc](/configure/app/tools/swc):
|
|
91
93
|
|
|
92
94
|
```ts
|
|
93
|
-
|
|
95
|
+
import { defineConfig } from '@modern-js/app-tools';
|
|
96
|
+
|
|
97
|
+
export default defineConfig<'rspack'>({
|
|
94
98
|
tools: {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
.tap(options => {
|
|
100
|
-
options.xxx = '';
|
|
101
|
-
return options;
|
|
102
|
-
});
|
|
99
|
+
swc: {
|
|
100
|
+
jsc: {
|
|
101
|
+
externalHelpers: false,
|
|
102
|
+
},
|
|
103
103
|
},
|
|
104
|
-
}
|
|
105
|
-
};
|
|
104
|
+
},
|
|
105
|
+
});
|
|
106
106
|
```
|
|
107
107
|
|
|
108
108
|
:::tip
|
|
@@ -39,7 +39,6 @@ $ npx modern new
|
|
|
39
39
|
Enable SSG
|
|
40
40
|
Enable Micro Frontend
|
|
41
41
|
Enable Unit Test / Integration Test
|
|
42
|
-
Enable Visual Testing (Storybook)
|
|
43
42
|
```
|
|
44
43
|
|
|
45
44
|
After the selection is completed, the Modern.js generator will automatically install the corresponding plugins and third-party dependencies. Upon completion of the installation, you will see:
|
|
@@ -10,7 +10,7 @@ Modern.js 支持使用 Storybook 进行调试，当需要对 Storybook 进行配
|
|
|
10
10
|
Storybook 配置请查看：[Storybook 配置](https://storybook.js.org/docs/react/configure/overview)
|
|
11
11
|
|
|
12
12
|
:::info
|
|
13
|
-
使用 Storybook 进行调试需要提前在项目下执行 new 命令启用「
|
|
13
|
+
使用 Storybook 进行调试需要提前在项目下执行 new 命令启用「Storybook」模式功能。
|
|
14
14
|
|
|
15
15
|
:::
|
|
16
16
|
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_label: filenameHash
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# output.filenameHash
|
|
6
|
+
|
|
7
|
+
- **类型：** `boolean | string`
|
|
8
|
+
- **默认值：** `true`
|
|
9
|
+
|
|
10
|
+
在生产环境构建后，是否在产物的文件名中添加 hash 值。
|
|
11
|
+
|
|
12
|
+
### 示例
|
|
13
|
+
|
|
14
|
+
默认情况下，构建后的产物名称会包含 hash 值：
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
dist/static/css/index.7879e19d.css
|
|
18
|
+
dist/static/js/index.18a568e5.js
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
你可以将 `output.filenameHash` 设置为 false 来禁用这个行为：
|
|
22
|
+
|
|
23
|
+
```js
|
|
24
|
+
export default {
|
|
25
|
+
output: {
|
|
26
|
+
filenameHash: false,
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
重新构建，产物的名称变为：
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
dist/static/css/index.css
|
|
35
|
+
dist/static/js/index.js
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
详细用法可参考 [Rsbuild - output.filenameHash](https://rsbuild.dev/zh/config/output/filename-hash)。
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_label: decorators
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# source.decorators
|
|
6
|
+
|
|
7
|
+
- **类型：**
|
|
8
|
+
```
|
|
9
|
+
type Decorators = {
|
|
10
|
+
version?: 'legacy' | '2022-03';
|
|
11
|
+
};
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
- **默认值：**
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
type Decorators = {
|
|
18
|
+
version: 'legacy',
|
|
19
|
+
};
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
用于配置装饰器语法。
|
|
23
|
+
|
|
24
|
+
### 示例
|
|
25
|
+
|
|
26
|
+
Modern.js 默认使用 `legacy` 语法（Stage 1 提案），等价于 TypeScript 的 `experimentalDecorators: true`。
|
|
27
|
+
|
|
28
|
+
如果希望将装饰器语法调整成 Stage 3 提案，可以将 decorators.version 设置成 `2022-03`：
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
export default {
|
|
32
|
+
source: {
|
|
33
|
+
decorators: {
|
|
34
|
+
version: '2022-03',
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
详细用法可参考 [Rsbuild - source.decorators](https://rsbuild.dev/zh/config/source/decorators)。
|
|
@@ -15,17 +15,35 @@ import SWC from '@modern-js/builder-doc/docs/zh/shared/swc.md';
|
|
|
15
15
|
|
|
16
16
|
:::tip
|
|
17
17
|
在使用 Rspack 作为打包工具时，默认会使用 SWC 进行转译和压缩，因此你不需要再安装和配置 SWC 插件。
|
|
18
|
-
|
|
19
|
-
如果你使用 Rspack 时配置了当前的 SWC 插件，它将不会产生任何效果。
|
|
20
18
|
:::
|
|
21
19
|
|
|
22
|
-
##
|
|
20
|
+
## 在 Rspack 模式下使用
|
|
21
|
+
|
|
22
|
+
通过 `tools.swc` 可以设置 Rspack [builtin:swc-loader](https://www.rspack.dev/guide/builtin-swc-loader) 的选项。
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
import { defineConfig } from '@modern-js/app-tools';
|
|
26
|
+
|
|
27
|
+
export default defineConfig<'rspack'>({
|
|
28
|
+
tools: {
|
|
29
|
+
swc: {
|
|
30
|
+
jsc: {
|
|
31
|
+
externalHelpers: false,
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
});
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
更多用法可参考 [Rsbuild - tools.swc](https://rsbuild.dev/zh/config/tools/swc)。
|
|
39
|
+
|
|
40
|
+
## 在 Webpack 模式下使用
|
|
23
41
|
|
|
24
42
|
import EnableSWC from '@modern-js/builder-doc/docs/zh/shared/enableSwc.md';
|
|
25
43
|
|
|
26
44
|
<EnableSWC />
|
|
27
45
|
|
|
28
|
-
|
|
46
|
+
### 配置项
|
|
29
47
|
|
|
30
48
|
你可以通过 `tools.swc` 配置项来设置 SWC 编译行为。
|
|
31
49
|
|
|
@@ -88,22 +88,20 @@ export default {
|
|
|
88
88
|
|
|
89
89
|
Modern.js 在 Rspack 模式下使用 Rspack [builtin:swc-loader](https://www.rspack.dev/zh/guide/builtin-swc-loader.html) 进行代码转译。
|
|
90
90
|
|
|
91
|
-
Modern.js 已对 `builtin:swc-loader` 的常见配置提供了更方便的配置方式，如：通过 [source.transformImport](/configure/app/source/transform-import) 配置组件库按需引入。如果对 `builtin:swc-loader`
|
|
91
|
+
Modern.js 已对 `builtin:swc-loader` 的常见配置提供了更方便的配置方式，如：通过 [source.transformImport](/configure/app/source/transform-import) 配置组件库按需引入。如果对 `builtin:swc-loader` 有自定义配置的需求，可通过 [tools.swc](/configure/app/tools/swc) 进行配置：
|
|
92
92
|
|
|
93
93
|
```ts
|
|
94
|
-
|
|
94
|
+
import { defineConfig } from '@modern-js/app-tools';
|
|
95
|
+
|
|
96
|
+
export default defineConfig<'rspack'>({
|
|
95
97
|
tools: {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
.tap(options => {
|
|
101
|
-
options.xxx = '';
|
|
102
|
-
return options;
|
|
103
|
-
});
|
|
98
|
+
swc: {
|
|
99
|
+
jsc: {
|
|
100
|
+
externalHelpers: false,
|
|
101
|
+
},
|
|
104
102
|
},
|
|
105
|
-
}
|
|
106
|
-
};
|
|
103
|
+
},
|
|
104
|
+
});
|
|
107
105
|
```
|
|
108
106
|
|
|
109
107
|
:::tip
|
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-20240306170726",
|
|
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-20240306170726"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@modern-js/builder-doc": "0.0.0-nightly-
|
|
28
|
+
"@modern-js/builder-doc": "0.0.0-nightly-20240306170726"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"classnames": "^2",
|
|
@@ -35,12 +35,12 @@
|
|
|
35
35
|
"ts-node": "^10.9.1",
|
|
36
36
|
"typescript": "^5",
|
|
37
37
|
"fs-extra": "^10",
|
|
38
|
-
"rspress": "1.13.
|
|
39
|
-
"@rspress/shared": "1.13.
|
|
38
|
+
"rspress": "1.13.2",
|
|
39
|
+
"@rspress/shared": "1.13.2",
|
|
40
40
|
"@types/node": "^16",
|
|
41
41
|
"@types/fs-extra": "9.0.13",
|
|
42
|
-
"@modern-js/doc
|
|
43
|
-
"@modern-js/
|
|
42
|
+
"@modern-js/builder-doc": "0.0.0-nightly-20240306170726",
|
|
43
|
+
"@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20240306170726"
|
|
44
44
|
},
|
|
45
45
|
"scripts": {
|
|
46
46
|
"dev": "rspress dev",
|