@modern-js/main-doc 2.19.2-alpha.0 → 2.21.0
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/CHANGELOG.md +25 -0
- package/docs/en/apis/app/runtime/router/router.mdx +22 -0
- package/docs/en/components/init-rspack-app.mdx +1 -1
- package/docs/en/components/ua-polyfill.mdx +40 -0
- package/docs/en/configure/app/output/temp-dir.mdx +24 -0
- package/docs/en/configure/app/security/nonce.mdx +13 -0
- package/docs/en/guides/advanced-features/compatibility.mdx +22 -40
- package/docs/en/guides/advanced-features/rspack-start.mdx +38 -0
- package/docs/en/guides/basic-features/css.mdx +37 -27
- package/docs/en/guides/basic-features/data-fetch.mdx +56 -69
- package/docs/en/guides/basic-features/routes.mdx +189 -93
- package/docs/en/guides/get-started/quick-start.mdx +2 -2
- package/docs/en/guides/topic-detail/framework-plugin/extend.mdx +1 -1
- package/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx +44 -4
- package/docs/en/guides/topic-detail/generator/codesmith/develop.mdx +1 -1
- package/docs/en/guides/topic-detail/generator/plugin/abstract.mdx +1 -1
- package/docs/en/guides/topic-detail/generator/plugin/develop.mdx +1 -1
- package/docs/en/guides/topic-detail/generator/plugin/use.mdx +1 -1
- package/docs/en/guides/topic-detail/generator/project.mdx +4 -4
- package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx +4 -4
- package/docs/en/tutorials/first-app/c01-start.mdx +1 -1
- package/docs/zh/apis/app/runtime/router/router.mdx +22 -0
- package/docs/zh/components/init-rspack-app.mdx +1 -1
- package/docs/zh/components/ua-polyfill.mdx +39 -0
- package/docs/zh/configure/app/output/temp-dir.mdx +22 -0
- package/docs/zh/configure/app/security/nonce.mdx +13 -0
- package/docs/zh/guides/advanced-features/compatibility.mdx +14 -51
- package/docs/zh/guides/advanced-features/rspack-start.mdx +37 -0
- package/docs/zh/guides/basic-features/data-fetch.mdx +14 -14
- package/docs/zh/guides/basic-features/routes.mdx +22 -22
- package/docs/zh/guides/get-started/quick-start.mdx +2 -2
- package/docs/zh/guides/topic-detail/changesets/changelog.mdx +1 -1
- package/docs/zh/guides/topic-detail/changesets/commit.mdx +1 -1
- package/docs/zh/guides/topic-detail/changesets/release-note.mdx +1 -1
- package/docs/zh/guides/topic-detail/framework-plugin/extend.mdx +1 -1
- package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx +45 -5
- package/docs/zh/guides/topic-detail/generator/codesmith/develop.mdx +1 -1
- package/docs/zh/guides/topic-detail/generator/plugin/abstract.mdx +1 -1
- package/docs/zh/guides/topic-detail/generator/plugin/develop.mdx +1 -1
- package/docs/zh/guides/topic-detail/generator/plugin/use.mdx +1 -1
- package/docs/zh/guides/topic-detail/generator/project.mdx +4 -4
- package/docs/zh/guides/topic-detail/micro-frontend/c02-development.mdx +4 -4
- package/docs/zh/tutorials/first-app/c01-start.mdx +1 -1
- package/package.json +7 -7
- package/src/components/ShowcaseList/index.tsx +4 -4
@@ -2,12 +2,35 @@
|
|
2
2
|
title: Hook 列表
|
3
3
|
sidebar_position: 8
|
4
4
|
---
|
5
|
+
|
5
6
|
# Hook 列表
|
6
7
|
|
7
8
|
在 Modern.js 中暴露了三类插件:CLI、Runtime、Server。下面列举下各类中的 Hook:
|
8
9
|
|
9
10
|
## CLI
|
10
11
|
|
12
|
+
### `beforeConfig`
|
13
|
+
|
14
|
+
- 功能:运行收集配置前的任务
|
15
|
+
- 执行阶段:收集配置前
|
16
|
+
- Hook 模型:AsyncWorkflow
|
17
|
+
- 类型:`AsyncWorkflow<void, void>`
|
18
|
+
- 使用示例:
|
19
|
+
|
20
|
+
```ts
|
21
|
+
import type { CliPlugin } from '@modern-js/core';
|
22
|
+
|
23
|
+
export default (): CliPlugin => ({
|
24
|
+
setup(api) {
|
25
|
+
return {
|
26
|
+
beforeConfig: () => {
|
27
|
+
// do something
|
28
|
+
},
|
29
|
+
};
|
30
|
+
},
|
31
|
+
});
|
32
|
+
```
|
33
|
+
|
11
34
|
### `config`
|
12
35
|
|
13
36
|
- 功能:收集配置
|
@@ -144,7 +167,6 @@ export default (): CliPlugin => ({
|
|
144
167
|
});
|
145
168
|
```
|
146
169
|
|
147
|
-
|
148
170
|
### `commands`
|
149
171
|
|
150
172
|
- 功能:为 command 添加新的命令
|
@@ -238,9 +260,9 @@ export default (): CliPlugin => ({
|
|
238
260
|
### `afterDev`
|
239
261
|
|
240
262
|
- 功能:运行 dev 主流程的之后的任务
|
241
|
-
-
|
263
|
+
- 执行阶段:运行 `dev` 命令时,每一次编译完成后执行
|
242
264
|
- Hook 模型:AsyncWorkflow
|
243
|
-
- 类型:`AsyncWorkflow<
|
265
|
+
- 类型:`AsyncWorkflow<{ isFirstCompile: boolean }, unknown>`
|
244
266
|
- 使用示例:
|
245
267
|
|
246
268
|
```ts
|
@@ -257,6 +279,24 @@ export default (): CliPlugin => ({
|
|
257
279
|
});
|
258
280
|
```
|
259
281
|
|
282
|
+
`afterDev` 会在每一次编译完成后执行,你可以通过 `isFirstCompile` 参数来判断是否为首次编译:
|
283
|
+
|
284
|
+
```ts
|
285
|
+
import type { CliPlugin } from '@modern-js/core';
|
286
|
+
|
287
|
+
export default (): CliPlugin => ({
|
288
|
+
setup(api) {
|
289
|
+
return {
|
290
|
+
afterDev: ({ isFirstCompile }) => {
|
291
|
+
if (isFirstCompile) {
|
292
|
+
// do something
|
293
|
+
}
|
294
|
+
},
|
295
|
+
};
|
296
|
+
},
|
297
|
+
});
|
298
|
+
```
|
299
|
+
|
260
300
|
### `beforeCreateCompiler`
|
261
301
|
|
262
302
|
- 功能:在中间件函数中可以拿到创建 Webpack Compiler 的 Webpack 配置
|
@@ -416,7 +456,7 @@ import type { CliPlugin } from '@modern-js/core';
|
|
416
456
|
export default (): CliPlugin => ({
|
417
457
|
setup(api) {
|
418
458
|
return {
|
419
|
-
|
459
|
+
modifyEntryExport({ entrypoint, exportStatement }) {
|
420
460
|
return {
|
421
461
|
entrypoint,
|
422
462
|
exportStatement: [`export const foo = 'test'`, exportStatement].join(
|
@@ -756,7 +796,7 @@ export default (): Plugin => ({
|
|
756
796
|
);
|
757
797
|
};
|
758
798
|
return next({
|
759
|
-
App: hoistNonReactStatics(AppWrapper, App)
|
799
|
+
App: hoistNonReactStatics(AppWrapper, App),
|
760
800
|
});
|
761
801
|
},
|
762
802
|
};
|
@@ -48,6 +48,6 @@ npx @modern-js/codesmith-cli <generatorName>
|
|
48
48
|
其中 generatorName 为生成器包名。
|
49
49
|
|
50
50
|
:::info
|
51
|
-
`@modern-js/create` 也支持运行微生成器,可以使用 `npx @modern-js/create --generator <generatorName>` 运行自定义的微生成器。
|
51
|
+
`@modern-js/create` 也支持运行微生成器,可以使用 `npx @modern-js/create@latest --generator <generatorName>` 运行自定义的微生成器。
|
52
52
|
|
53
53
|
:::
|
@@ -10,7 +10,7 @@ Modern.js 提供的初始化模板具有通用性,能满足一些通用的项
|
|
10
10
|
|
11
11
|
当你深度使用 Modern.js 时,必然会发现每次创建的项目都会进行一些针对自身项目的特定的相似改动,比如修改示例代码、增加一些配置、开启某些功能等。
|
12
12
|
|
13
|
-
生成器插件可以帮你将这些针对个人或团队特定的改动沉淀下来,在执行 `npx @modern-js/create` 只需简单的带上 `--plugin` 参数即可避免每次创建完项目都需重复性修改项目的工作。
|
13
|
+
生成器插件可以帮你将这些针对个人或团队特定的改动沉淀下来,在执行 `npx @modern-js/create@latest` 只需简单的带上 `--plugin` 参数即可避免每次创建完项目都需重复性修改项目的工作。
|
14
14
|
|
15
15
|
生成器插件是在 Modern.js 提供的初始化模板项目的基础上,提供对模板进行增加、删除、修改的方法,并通过快捷的方式修改 `package.json`、`modernConfig` 配置和开启功能等操作。
|
16
16
|
|
@@ -9,7 +9,7 @@ sidebar_position: 3
|
|
9
9
|
Modern.js 提供了生成器插件用于创建开发项目,可直接执行以下命令创建:
|
10
10
|
|
11
11
|
```bash
|
12
|
-
npx @modern-js/create plugin --plugin @modern-js/generator-plugin-plugin
|
12
|
+
npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
|
13
13
|
```
|
14
14
|
|
15
15
|
插件类型不同,会提问不同的问题,可根据需求选择插件类型
|
@@ -11,7 +11,7 @@ Modern.js 提供了 `@modern-js/create` 作为项目生成器用于进行 Modern
|
|
11
11
|
不需要全局安装 `@modern-js/create`,直接使用 npx 执行该工具即可:
|
12
12
|
|
13
13
|
```bash
|
14
|
-
npx @modern-js/create [projectDir]
|
14
|
+
npx @modern-js/create@latest [projectDir]
|
15
15
|
```
|
16
16
|
|
17
17
|
:::info
|
@@ -32,7 +32,7 @@ npx @modern-js/create [projectDir]
|
|
32
32
|
获取 `@modern-js/create` 工具版本。
|
33
33
|
|
34
34
|
```bash
|
35
|
-
$ npx @modern-js/create --version
|
35
|
+
$ npx @modern-js/create@latest --version
|
36
36
|
|
37
37
|
[INFO] @modern-js/create v2.0.0
|
38
38
|
```
|
@@ -52,7 +52,7 @@ $ npx @modern-js/create --version
|
|
52
52
|
该字段为 JSON 字符串,例如需执行包管理工具时:
|
53
53
|
|
54
54
|
```bash
|
55
|
-
npx @modern-js/create --config '{"packageManager": "pnpm"}'
|
55
|
+
npx @modern-js/create@latest --config '{"packageManager": "pnpm"}'
|
56
56
|
```
|
57
57
|
|
58
58
|
具体配置信息可查看[工程方案配置](/guides/topic-detail/generator/config/common)。
|
@@ -105,7 +105,7 @@ Modern.js 支持使用生成器插件定制 Modern.js 默认的工程方案类
|
|
105
105
|
|
106
106
|
指定微生成器。
|
107
107
|
|
108
|
-
默认情况下 `@modern-js/create` 会执行 Modern.js 框架内置的微生成器,如果你需要执行定制的微生成器,又需要使用 `npx @modern-js/create` 的姿势,可直接使用该参数。
|
108
|
+
默认情况下 `@modern-js/create` 会执行 Modern.js 框架内置的微生成器,如果你需要执行定制的微生成器,又需要使用 `npx @modern-js/create@latest` 的姿势,可直接使用该参数。
|
109
109
|
|
110
110
|
关于定制微生成器可以参考[开发微生成器](/guides/topic-detail/generator/codesmith/introduce)。
|
111
111
|
|
@@ -24,7 +24,7 @@ title: 体验微前端
|
|
24
24
|
|
25
25
|
```bash
|
26
26
|
mkdir masterApp && cd masterApp
|
27
|
-
npx @modern-js/create
|
27
|
+
npx @modern-js/create@latest
|
28
28
|
```
|
29
29
|
|
30
30
|
import DefaultMWAGenerate from "@site-docs/components/default-mwa-generate";
|
@@ -106,7 +106,7 @@ export default Layout;
|
|
106
106
|
|
107
107
|
```bash
|
108
108
|
mkdir masterApp && cd masterApp
|
109
|
-
npx @modern-js/create
|
109
|
+
npx @modern-js/create@latest
|
110
110
|
```
|
111
111
|
|
112
112
|
<DefaultMWAGenerate />
|
@@ -134,7 +134,7 @@ import CustomRouterMicroFrontend from "@site-docs/components/custom-router-micro
|
|
134
134
|
|
135
135
|
```bash
|
136
136
|
mkdir table && cd table
|
137
|
-
npx @modern-js/create
|
137
|
+
npx @modern-js/create@latest
|
138
138
|
```
|
139
139
|
|
140
140
|
按照如下选择,生成项目:
|
@@ -186,7 +186,7 @@ export default Index;
|
|
186
186
|
|
187
187
|
```bash
|
188
188
|
mkdir dashboard && cd dashboard
|
189
|
-
npx @modern-js/create
|
189
|
+
npx @modern-js/create@latest
|
190
190
|
```
|
191
191
|
|
192
192
|
按照如下选择,生成项目:
|
package/package.json
CHANGED
@@ -15,27 +15,27 @@
|
|
15
15
|
"modern",
|
16
16
|
"modern.js"
|
17
17
|
],
|
18
|
-
"version": "2.
|
18
|
+
"version": "2.21.0",
|
19
19
|
"publishConfig": {
|
20
20
|
"registry": "https://registry.npmjs.org/",
|
21
21
|
"access": "public"
|
22
22
|
},
|
23
23
|
"peerDependencies": {
|
24
|
-
"@modern-js/builder-doc": "^2.
|
24
|
+
"@modern-js/builder-doc": "^2.21.0"
|
25
25
|
},
|
26
26
|
"devDependencies": {
|
27
27
|
"classnames": "^2",
|
28
28
|
"clsx": "^1.2.1",
|
29
29
|
"react": "^18",
|
30
30
|
"react-dom": "^18",
|
31
|
-
"ts-node": "^10",
|
32
|
-
"typescript": "^
|
31
|
+
"ts-node": "^10.9.1",
|
32
|
+
"typescript": "^5",
|
33
33
|
"fs-extra": "^10",
|
34
34
|
"@types/node": "^16",
|
35
35
|
"@types/fs-extra": "^9",
|
36
|
-
"@modern-js/doc
|
37
|
-
"@modern-js/doc-tools": "2.
|
38
|
-
"@modern-js/
|
36
|
+
"@modern-js/builder-doc": "2.21.0",
|
37
|
+
"@modern-js/doc-tools": "2.21.0",
|
38
|
+
"@modern-js/doc-plugin-auto-sidebar": "2.21.0"
|
39
39
|
},
|
40
40
|
"scripts": {
|
41
41
|
"dev": "modern dev",
|
@@ -4,10 +4,10 @@ import styles from './index.module.scss';
|
|
4
4
|
const getDomain = (url: string) => new URL(url).hostname;
|
5
5
|
|
6
6
|
const TYPE_MAP = {
|
7
|
-
doc: '
|
8
|
-
module: '
|
9
|
-
builder: '
|
10
|
-
framework: '
|
7
|
+
doc: 'Doc',
|
8
|
+
module: 'Module',
|
9
|
+
builder: 'Builder',
|
10
|
+
framework: 'Framework',
|
11
11
|
};
|
12
12
|
|
13
13
|
export const ShowcaseList = () => {
|