@modern-js/main-doc 2.25.2 → 2.27.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 +16 -0
- package/docs/en/components/prerequisites.mdx +1 -1
- package/docs/en/configure/app/experiments/source-build.mdx +13 -0
- package/docs/en/configure/app/server/ssr.mdx +6 -5
- package/docs/en/configure/app/source/alias-strategy.mdx +13 -0
- package/docs/en/configure/app/tools/swc.mdx +3 -1
- package/docs/en/guides/advanced-features/rspack-start.mdx +1 -1
- package/docs/en/guides/get-started/quick-start.mdx +23 -3
- package/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx +222 -144
- package/docs/en/guides/topic-detail/generator/plugin/api/onForged.md +1 -1
- package/docs/en/tutorials/first-app/c03-css.mdx +3 -2
- package/docs/zh/components/prerequisites.mdx +1 -1
- package/docs/zh/configure/app/deploy/microFrontend.mdx +1 -1
- package/docs/zh/configure/app/experiments/source-build.mdx +13 -0
- package/docs/zh/configure/app/server/ssr.mdx +6 -5
- package/docs/zh/configure/app/source/alias-strategy.mdx +13 -0
- package/docs/zh/configure/app/tools/swc.mdx +3 -1
- package/docs/zh/guides/advanced-features/rspack-start.mdx +1 -1
- package/docs/zh/guides/advanced-features/using-storybook.mdx +1 -1
- package/docs/zh/guides/get-started/quick-start.mdx +28 -7
- package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx +179 -101
- package/package.json +5 -5
@@ -5,15 +5,19 @@ sidebar_position: 8
|
|
5
5
|
|
6
6
|
# Hook 列表
|
7
7
|
|
8
|
-
|
8
|
+
Modern.js 工程体系中包含三类插件:CLI、Runtime、Server,每一类插件可以使用不同的 Hooks。
|
9
9
|
|
10
|
-
|
10
|
+
在本章节中,罗列了所有可用的 Hooks,你可以根据自己的需求来使用对应的 Hook。
|
11
|
+
|
12
|
+
## CLI Common Hooks
|
13
|
+
|
14
|
+
以下是通用的 CLI Hooks,可以在 Modern.js Framework 以及 Modern.js Module 中使用。
|
11
15
|
|
12
16
|
### `beforeConfig`
|
13
17
|
|
14
18
|
- 功能:运行收集配置前的任务
|
15
19
|
- 执行阶段:收集配置前
|
16
|
-
- Hook
|
20
|
+
- Hook 模型:`AsyncWorkflow`
|
17
21
|
- 类型:`AsyncWorkflow<void, void>`
|
18
22
|
- 使用示例:
|
19
23
|
|
@@ -35,7 +39,7 @@ export const myPlugin = (): CliPlugin => ({
|
|
35
39
|
|
36
40
|
- 功能:收集配置
|
37
41
|
- 执行阶段:解析完 `modern.config.ts` 中的配置之后
|
38
|
-
- Hook
|
42
|
+
- Hook 模型:`ParallelWorkflow`
|
39
43
|
- 类型:`ParallelWorkflow<void, unknown>`
|
40
44
|
- 使用示例:
|
41
45
|
|
@@ -55,13 +59,37 @@ export const myPlugin = (): CliPlugin => ({
|
|
55
59
|
});
|
56
60
|
```
|
57
61
|
|
58
|
-
|
62
|
+
如果你需要设置 Modern.js Framework 的配置,请使用 `@modern-js/app-tools` 导出的 `CliPlugin<AppTools>` 类型:
|
63
|
+
|
64
|
+
```ts
|
65
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
66
|
+
|
67
|
+
export const myPlugin = (): CliPlugin => ({
|
68
|
+
setup(api) {
|
69
|
+
return {
|
70
|
+
config: () => {
|
71
|
+
return {
|
72
|
+
output: {
|
73
|
+
polyfill: 'usage',
|
74
|
+
},
|
75
|
+
};
|
76
|
+
},
|
77
|
+
};
|
78
|
+
},
|
79
|
+
});
|
80
|
+
```
|
81
|
+
|
82
|
+
插件在 `config` hook 中返回的配置信息,会被 Modern.js 统一收集与合并,最终生成一份 `NormalizedConfig`。在进行配置合并时,优先级由高到低依次为:
|
83
|
+
|
84
|
+
1. 用户在 `modern.config.*` 文件里定义的配置
|
85
|
+
2. 插件通过 `config` hook 定义的配置
|
86
|
+
3. Modern.js 默认配置。
|
59
87
|
|
60
88
|
### `validateSchema`
|
61
89
|
|
62
90
|
- 功能:收集各个插件中配置的用来校验用户配置的 [JSON Schema](https://json-schema.org/)
|
63
|
-
- 执行阶段:`config` Hook
|
64
|
-
- Hook
|
91
|
+
- 执行阶段:`config` Hook 运行完成之后。
|
92
|
+
- Hook 模型:`ParallelWorkflow`
|
65
93
|
- 类型:`ParallelWorkflow<void, unknown>`
|
66
94
|
- 使用示例:
|
67
95
|
|
@@ -116,7 +144,7 @@ export const myPlugin = defineConfig({
|
|
116
144
|
|
117
145
|
就会报错:
|
118
146
|
|
119
|
-
```
|
147
|
+
```
|
120
148
|
$ modern dev
|
121
149
|
1 | {
|
122
150
|
> 2 | "foo": {},
|
@@ -127,7 +155,7 @@ $ modern dev
|
|
127
155
|
|
128
156
|
- 功能:运行主流程的前置准备流程
|
129
157
|
- 执行阶段:校验完配置之后
|
130
|
-
- Hook
|
158
|
+
- Hook 模型:`AsyncWorkflow`
|
131
159
|
- 类型:`AsyncWorkflow<void, void>`
|
132
160
|
- 使用示例:
|
133
161
|
|
@@ -149,7 +177,7 @@ export const myPlugin = (): CliPlugin => ({
|
|
149
177
|
|
150
178
|
- 功能:运行前置准备流程的之后的任务
|
151
179
|
- 执行阶段:前置准备流程之后
|
152
|
-
- Hook
|
180
|
+
- Hook 模型:`AsyncWorkflow`
|
153
181
|
- 类型:`AsyncWorkflow<void, void>`
|
154
182
|
- 使用示例:
|
155
183
|
|
@@ -169,9 +197,9 @@ export const myPlugin = (): CliPlugin => ({
|
|
169
197
|
|
170
198
|
### `commands`
|
171
199
|
|
172
|
-
- 功能:为
|
173
|
-
- 执行阶段:`prepare` Hook
|
174
|
-
- Hook
|
200
|
+
- 功能:为 commander 添加新的 CLI 命令
|
201
|
+
- 执行阶段:`prepare` Hook 运行完成之后
|
202
|
+
- Hook 模型:`AsyncWorkflow`
|
175
203
|
- 类型:`AsyncWorkflow<{ program: Command; }, void>`
|
176
204
|
- 使用示例:
|
177
205
|
|
@@ -213,7 +241,7 @@ foo
|
|
213
241
|
|
214
242
|
- 功能:在退出进程前,重置一些文件状态
|
215
243
|
- 执行阶段:进程退出之前
|
216
|
-
- Hook
|
244
|
+
- Hook 模型:`Workflow`
|
217
245
|
- 类型:`Workflow<void, void>`
|
218
246
|
- 使用示例:
|
219
247
|
|
@@ -235,18 +263,24 @@ export const myPlugin = (): CliPlugin => ({
|
|
235
263
|
由于 Node.js 中退出进程时的回调函数是同步的,所以 `beforeExit` Hook 的类型是 `Workflow`,不能执行异步操作。
|
236
264
|
:::
|
237
265
|
|
266
|
+
## CLI Framework Hooks
|
267
|
+
|
268
|
+
以下是框架的 CLI Hooks,只能在 Modern.js Framework 中使用,不能在 Modern.js Module 中使用。
|
269
|
+
|
270
|
+
你需要从 `@modern-js/app-tools` 中导入 `CliPlugin` 和 `AppTools` 类型,以获得准确的 Hooks 类型提示。
|
271
|
+
|
238
272
|
### `beforeDev`
|
239
273
|
|
240
274
|
- 功能:运行 dev 主流程的之前的任务
|
241
275
|
- 执行阶段:`dev` 命令运行时,项目开始启动前执行
|
242
|
-
- Hook
|
276
|
+
- Hook 模型:`AsyncWorkflow`
|
243
277
|
- 类型:`AsyncWorkflow<void, unknown>`
|
244
278
|
- 使用示例:
|
245
279
|
|
246
280
|
```ts
|
247
|
-
import type { CliPlugin } from '@modern-js/
|
281
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
248
282
|
|
249
|
-
export const myPlugin = (): CliPlugin => ({
|
283
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
250
284
|
setup(api) {
|
251
285
|
return {
|
252
286
|
beforeDev: () => {
|
@@ -261,14 +295,14 @@ export const myPlugin = (): CliPlugin => ({
|
|
261
295
|
|
262
296
|
- 功能:运行 dev 主流程的之后的任务
|
263
297
|
- 执行阶段:运行 `dev` 命令时,每一次编译完成后执行
|
264
|
-
- Hook
|
298
|
+
- Hook 模型:`AsyncWorkflow`
|
265
299
|
- 类型:`AsyncWorkflow<{ isFirstCompile: boolean }, unknown>`
|
266
300
|
- 使用示例:
|
267
301
|
|
268
302
|
```ts
|
269
|
-
import type { CliPlugin } from '@modern-js/
|
303
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
270
304
|
|
271
|
-
export const myPlugin = (): CliPlugin => ({
|
305
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
272
306
|
setup(api) {
|
273
307
|
return {
|
274
308
|
afterDev: () => {
|
@@ -282,9 +316,9 @@ export const myPlugin = (): CliPlugin => ({
|
|
282
316
|
`afterDev` 会在每一次编译完成后执行,你可以通过 `isFirstCompile` 参数来判断是否为首次编译:
|
283
317
|
|
284
318
|
```ts
|
285
|
-
import type { CliPlugin } from '@modern-js/
|
319
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
286
320
|
|
287
|
-
export const myPlugin = (): CliPlugin => ({
|
321
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
288
322
|
setup(api) {
|
289
323
|
return {
|
290
324
|
afterDev: ({ isFirstCompile }) => {
|
@@ -297,113 +331,157 @@ export const myPlugin = (): CliPlugin => ({
|
|
297
331
|
});
|
298
332
|
```
|
299
333
|
|
300
|
-
### `
|
334
|
+
### `beforeBuild`
|
335
|
+
|
336
|
+
- 功能:在执行生产环境构建前触发的回调函数,你可以通过 `bundlerConfigs` 参数获取到底层打包工具的最终配置数组。
|
337
|
+
- 如果当前打包工具为 webpack,则获取到的是 webpack 配置数组。
|
338
|
+
- 如果当前打包工具为 Rspack,则获取到的是 Rspack 配置数组。
|
339
|
+
- 配置数组中可能包含一份或多份配置,这取决于你是否开启了 SSR 等功能。
|
340
|
+
- 执行阶段:运行 `build` 命令后,在开始构建前执行
|
341
|
+
- Hook 模型:`AsyncWorkflow`
|
342
|
+
- 类型:
|
343
|
+
|
344
|
+
```ts
|
345
|
+
type BeforeBuild = AsyncWorkflow<{
|
346
|
+
bundlerConfigs: WebpackConfig[] | RspackConfig[];
|
347
|
+
}>;
|
348
|
+
```
|
301
349
|
|
302
|
-
- 功能:在中间件函数中可以拿到创建 Webpack Compiler 的 Webpack 配置
|
303
|
-
- 执行阶段:创建 Webpack Compiler 之前执行
|
304
|
-
- Hook 模型:AsyncWorkflow
|
305
|
-
- 类型:`AsyncWorkflow<{ webpackConfigs: Configuration[];}, unknown>`
|
306
350
|
- 使用示例:
|
307
351
|
|
308
352
|
```ts
|
309
|
-
import type { CliPlugin } from '@modern-js/
|
353
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
310
354
|
|
311
|
-
export const myPlugin = (): CliPlugin => ({
|
355
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
312
356
|
setup(api) {
|
313
357
|
return {
|
314
|
-
|
315
|
-
|
358
|
+
beforeBuild: ({ bundlerConfigs }) => {
|
359
|
+
console.log('Before build.');
|
360
|
+
console.log(bundlerConfigs);
|
316
361
|
},
|
317
362
|
};
|
318
363
|
},
|
319
364
|
});
|
320
365
|
```
|
321
366
|
|
322
|
-
### `
|
367
|
+
### `afterBuild`
|
368
|
+
|
369
|
+
- 功能:在执行生产环境构建后触发的回调函数,你可以通过 `stats` 参数获取到构建结果信息。
|
370
|
+
- 如果当前打包工具为 webpack,则获取到的是 webpack Stats。
|
371
|
+
- 如果当前打包工具为 Rspack,则获取到的是 Rspack Stats。
|
372
|
+
- 执行阶段:运行 `build` 命令运行后,在项目构建完成之后执行
|
373
|
+
- Hook 模型:`AsyncWorkflow`
|
374
|
+
- 类型:
|
375
|
+
|
376
|
+
```ts
|
377
|
+
type AfterBuild = AsyncWorkflow<{
|
378
|
+
stats?: Stats | MultiStats;
|
379
|
+
}>;
|
380
|
+
```
|
323
381
|
|
324
|
-
- 功能:在中间件函数中可以拿到创建的 Webpack Compiler
|
325
|
-
- 执行阶段:创建 Webpack Compiler 之后执行
|
326
|
-
- Hook 模型:AsyncWorkflow
|
327
|
-
- 类型:`AsyncWorkflow<{ compiler: Compiler | MultiCompiler | undefined; }, unknown>`
|
328
382
|
- 使用示例:
|
329
383
|
|
330
384
|
```ts
|
331
|
-
import type { CliPlugin } from '@modern-js/
|
385
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
332
386
|
|
333
|
-
export const myPlugin = (): CliPlugin => ({
|
387
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
334
388
|
setup(api) {
|
335
389
|
return {
|
336
|
-
|
337
|
-
|
390
|
+
afterBuild: ({ stats }) => {
|
391
|
+
console.log('After build.');
|
392
|
+
console.log(stats);
|
338
393
|
},
|
339
394
|
};
|
340
395
|
},
|
341
396
|
});
|
342
397
|
```
|
343
398
|
|
344
|
-
### `
|
399
|
+
### `beforeCreateCompiler`
|
400
|
+
|
401
|
+
- 功能:在创建底层 Compiler 实例前触发的回调函数,并且你可以通过 `bundlerConfigs` 参数获取到底层打包工具的最终配置数组:
|
402
|
+
- 如果当前打包工具为 webpack,则获取到的是 webpack 配置数组。
|
403
|
+
- 如果当前打包工具为 Rspack,则获取到的是 Rspack 配置数组。
|
404
|
+
- 配置数组中可能包含一份或多份配置,这取决于你是否开启了 SSR 等功能。
|
405
|
+
- 执行阶段:在执行 dev 或 build 命令时,创建 Compiler 实例之前执行
|
406
|
+
- Hook 模型:`AsyncWorkflow`
|
407
|
+
- 类型:
|
408
|
+
|
409
|
+
```ts
|
410
|
+
type BeforeCreateCompiler = AsyncWorkflow<
|
411
|
+
{ bundlerConfigs: Configuration[] },
|
412
|
+
unknown
|
413
|
+
>;
|
414
|
+
```
|
345
415
|
|
346
|
-
- 功能:在中间件函数中可以拿到即将打印的日志信息,并对其进行修改
|
347
|
-
- 执行阶段:打印日志信息之前执行
|
348
|
-
- Hook 模型:AsyncWaterfall
|
349
|
-
- 类型:`AsyncWaterfall<{ instructions: string }>`
|
350
416
|
- 使用示例:
|
351
417
|
|
352
418
|
```ts
|
353
|
-
import type { CliPlugin } from '@modern-js/
|
419
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
354
420
|
|
355
|
-
export const myPlugin = (): CliPlugin => ({
|
421
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
356
422
|
setup(api) {
|
357
423
|
return {
|
358
|
-
|
359
|
-
|
360
|
-
|
361
|
-
instructions: [...instructions, 'some new message'],
|
362
|
-
};
|
424
|
+
beforeCreateCompiler: ({ bundlerConfigs }) => {
|
425
|
+
console.log('Before create compiler.');
|
426
|
+
console.log(bundlerConfigs);
|
363
427
|
},
|
364
428
|
};
|
365
429
|
},
|
366
430
|
});
|
367
431
|
```
|
368
432
|
|
369
|
-
### `
|
433
|
+
### `afterCreateCompiler`
|
434
|
+
|
435
|
+
- 功能:在创建 Compiler 实例后、执行构建前触发的回调函数,并且你可以通过 `compiler` 参数获取到 Compiler 实例对象:
|
436
|
+
- 如果当前打包工具为 webpack,则获取到的是 webpack Compiler 对象。
|
437
|
+
- 如果当前打包工具为 Rspack,则获取到的是 Rspack Compiler 对象。
|
438
|
+
- 执行阶段:创建 Compiler 对象之后执行
|
439
|
+
- Hook 模型:`AsyncWorkflow`
|
440
|
+
- 类型:
|
441
|
+
|
442
|
+
```ts
|
443
|
+
type AfterCreateCompiler = AsyncWorkflow<
|
444
|
+
{ compiler: Compiler | MultiCompiler | undefined },
|
445
|
+
unknown
|
446
|
+
>;
|
447
|
+
```
|
370
448
|
|
371
|
-
- 功能:运行 build 主流程的之前的任务,可以拿到构建的 Webpack 配置
|
372
|
-
- 执行阶段:`build` 命令运行时,项目构建启动前执行
|
373
|
-
- Hook 模型:AsyncWorkflow
|
374
|
-
- 类型:`AsyncWorkflow<{ webpackConfigs: Configuration[]; }>`
|
375
449
|
- 使用示例:
|
376
450
|
|
377
451
|
```ts
|
378
|
-
import type { CliPlugin } from '@modern-js/
|
452
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
379
453
|
|
380
|
-
export const myPlugin = (): CliPlugin => ({
|
454
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
381
455
|
setup(api) {
|
382
456
|
return {
|
383
|
-
|
384
|
-
|
457
|
+
afterCreateCompiler: ({ compiler }) => {
|
458
|
+
console.log('After create compiler.');
|
459
|
+
console.log(compiler);
|
385
460
|
},
|
386
461
|
};
|
387
462
|
},
|
388
463
|
});
|
389
464
|
```
|
390
465
|
|
391
|
-
### `
|
466
|
+
### `beforePrintInstructions`
|
392
467
|
|
393
|
-
-
|
394
|
-
-
|
395
|
-
- Hook
|
396
|
-
- 类型:`
|
468
|
+
- 功能:在中间件函数中可以拿到即将打印的日志信息,并对其进行修改
|
469
|
+
- 执行阶段:打印日志信息之前执行
|
470
|
+
- Hook 模型:`AsyncWaterfall`
|
471
|
+
- 类型:`AsyncWaterfall<{ instructions: string }>`
|
397
472
|
- 使用示例:
|
398
473
|
|
399
474
|
```ts
|
400
|
-
import type { CliPlugin } from '@modern-js/
|
475
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
401
476
|
|
402
|
-
export const myPlugin = (): CliPlugin => ({
|
477
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
403
478
|
setup(api) {
|
404
479
|
return {
|
405
|
-
|
480
|
+
beforePrintInstructions: ({ instructions }) => {
|
406
481
|
// do something
|
482
|
+
return {
|
483
|
+
instructions: [...instructions, 'some new message'],
|
484
|
+
};
|
407
485
|
},
|
408
486
|
};
|
409
487
|
},
|
@@ -414,14 +492,14 @@ export const myPlugin = (): CliPlugin => ({
|
|
414
492
|
|
415
493
|
- 功能:用于修改、添加生成入口文件中的 `import` 语句
|
416
494
|
- 执行阶段:生成入口文件之前,[`prepare`](#prepare) 阶段触发
|
417
|
-
- Hook
|
495
|
+
- Hook 模型:`AsyncWaterfall`
|
418
496
|
- 类型:`AsyncWaterfall<{ imports: ImportStatement[]; entrypoint: Entrypoint; }>`
|
419
497
|
- 使用示例:
|
420
498
|
|
421
499
|
```ts
|
422
|
-
import type { CliPlugin } from '@modern-js/
|
500
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
423
501
|
|
424
|
-
export const myPlugin = (): CliPlugin => ({
|
502
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
425
503
|
setup(api) {
|
426
504
|
return {
|
427
505
|
modifyEntryImports({ entrypoint, imports }) {
|
@@ -446,14 +524,14 @@ export const myPlugin = (): CliPlugin => ({
|
|
446
524
|
|
447
525
|
- 功能:用于修改生成入口文件中的 `export` 语句
|
448
526
|
- 执行阶段:生成入口文件之前,[`prepare`](#prepare) 阶段触发
|
449
|
-
- Hook
|
527
|
+
- Hook 模型:`AsyncWaterfall`
|
450
528
|
- 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; exportStatement: string; }>`
|
451
529
|
- 使用示例:
|
452
530
|
|
453
531
|
```ts
|
454
|
-
import type { CliPlugin } from '@modern-js/
|
532
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
455
533
|
|
456
|
-
export const myPlugin = (): CliPlugin => ({
|
534
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
457
535
|
setup(api) {
|
458
536
|
return {
|
459
537
|
modifyEntryExport({ entrypoint, exportStatement }) {
|
@@ -473,14 +551,14 @@ export const myPlugin = (): CliPlugin => ({
|
|
473
551
|
|
474
552
|
- 功能:用于添加、修改生成入口文件中的 [Runtime 插件](#Runtime)
|
475
553
|
- 执行阶段:生成入口文件之前,[`prepare`](#prepare) 阶段触发
|
476
|
-
- Hook
|
554
|
+
- Hook 模型:`AsyncWaterfall`
|
477
555
|
- 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; plugins: RuntimePlugin[]; }>`
|
478
556
|
- 使用示例:
|
479
557
|
|
480
558
|
```ts
|
481
|
-
import type { CliPlugin } from '@modern-js/
|
559
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
482
560
|
|
483
|
-
export const myPlugin = (): CliPlugin => ({
|
561
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
484
562
|
setup(api) {
|
485
563
|
return {
|
486
564
|
modifyEntryRuntimePlugins({ entrypoint, plugins }) {
|
@@ -508,14 +586,14 @@ export const myPlugin = (): CliPlugin => ({
|
|
508
586
|
|
509
587
|
- 功能:用于修改生成入口文件中 `render` 函数
|
510
588
|
- 执行阶段:生成入口文件之前,[`prepare`](#prepare) 阶段触发
|
511
|
-
- Hook
|
589
|
+
- Hook 模型:`AsyncWaterfall`
|
512
590
|
- 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; code: string; }>`
|
513
591
|
- 使用示例:
|
514
592
|
|
515
593
|
```ts
|
516
|
-
import type { CliPlugin } from '@modern-js/
|
594
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
517
595
|
|
518
|
-
export const myPlugin = (): CliPlugin => ({
|
596
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
519
597
|
setup(api) {
|
520
598
|
return {
|
521
599
|
modifyEntryRenderFunction({ entrypoint, code }) {
|
@@ -534,14 +612,14 @@ export const myPlugin = (): CliPlugin => ({
|
|
534
612
|
|
535
613
|
- 功能:用于修改生成前端页面路由文件中的内容,内容都是需要可序列化的
|
536
614
|
- 执行阶段:生成前端路由文件之前,[`prepare`](#prepare) 阶段触发
|
537
|
-
- Hook
|
615
|
+
- Hook 模型:`AsyncWaterfall`
|
538
616
|
- 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; routes: Route[]; }>`
|
539
617
|
- 使用示例:
|
540
618
|
|
541
619
|
```tsx
|
542
|
-
import type { CliPlugin } from '@modern-js/
|
620
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
543
621
|
|
544
|
-
export const myPlugin = (): CliPlugin => ({
|
622
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
545
623
|
setup(api) {
|
546
624
|
return {
|
547
625
|
modifyFileSystemRoutes({ entrypoint, routes }) {
|
@@ -568,14 +646,14 @@ export const myPlugin = (): CliPlugin => ({
|
|
568
646
|
|
569
647
|
- 功能:用于修改生成服务器路由中的内容
|
570
648
|
- 执行阶段:生成 Server 路由文件之前,[`prepare`](#prepare) 阶段触发
|
571
|
-
- Hook
|
649
|
+
- Hook 模型:`AsyncWaterfall`
|
572
650
|
- 类型:`AsyncWaterfall<{ routes: ServerRoute[]; }>`
|
573
651
|
- 使用示例:
|
574
652
|
|
575
653
|
```ts
|
576
|
-
import type { CliPlugin } from '@modern-js/
|
654
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
577
655
|
|
578
|
-
export const myPlugin = (): CliPlugin => ({
|
656
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
579
657
|
setup(api) {
|
580
658
|
return {
|
581
659
|
modifyServerRoutes({ routes }) {
|
@@ -601,14 +679,14 @@ export const myPlugin = (): CliPlugin => ({
|
|
601
679
|
|
602
680
|
- 功能:用于修改包裹入口文件的异步模块,参见 [source.enableAsyncEntry](/configure/app/source/enable-async-entry)
|
603
681
|
- 执行阶段:生成入口文件之前,[`prepare`](#prepare) 阶段触发
|
604
|
-
- Hook
|
682
|
+
- Hook 模型:`AsyncWaterfall`
|
605
683
|
- 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; code: string; }>`
|
606
684
|
- 使用示例:
|
607
685
|
|
608
686
|
```ts
|
609
|
-
import type { CliPlugin } from '@modern-js/
|
687
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
610
688
|
|
611
|
-
export const myPlugin = (): CliPlugin => ({
|
689
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
612
690
|
setup(api) {
|
613
691
|
return {
|
614
692
|
modifyAsyncEntry({ entrypoint, code }) {
|
@@ -627,14 +705,14 @@ export const myPlugin = (): CliPlugin => ({
|
|
627
705
|
|
628
706
|
- 功能:用于定制生成的 HTML 页面模版
|
629
707
|
- 执行阶段:[`prepare`](#prepare) 阶段触发
|
630
|
-
- Hook
|
708
|
+
- Hook 模型:`AsyncWaterfall`
|
631
709
|
- 类型:`AsyncWaterfall<{ entrypoint: Entrypoint; partials: HtmlPartials; }>`
|
632
710
|
- 使用示例:
|
633
711
|
|
634
712
|
```ts
|
635
|
-
import type { CliPlugin } from '@modern-js/
|
713
|
+
import type { CliPlugin, AppTools } from '@modern-js/app-tools';
|
636
714
|
|
637
|
-
export const myPlugin = (): CliPlugin => ({
|
715
|
+
export const myPlugin = (): CliPlugin<AppTools> => ({
|
638
716
|
setup(api) {
|
639
717
|
return {
|
640
718
|
async htmlPartials({ entrypoint, partials }) {
|
@@ -664,7 +742,7 @@ export const myPlugin = (): CliPlugin => ({
|
|
664
742
|
|
665
743
|
- 功能:在中间件函数中会拿到 Server 初始化用到的指标测量工具配置 `measureOptions` 和日志工具配置 `loggerOptions`,并返回自定义的指标测量工具 `measure` 和日志工具配置 `logger`
|
666
744
|
- 执行阶段:Server 初始化
|
667
|
-
- Hook
|
745
|
+
- Hook 模型:`AsyncPipeline`
|
668
746
|
- 类型:`AsyncPipeline<ServerInitInput, InitExtension>`
|
669
747
|
- 使用示例:
|
670
748
|
|
@@ -686,7 +764,7 @@ export const myPlugin = (): ServerPlugin => ({
|
|
686
764
|
|
687
765
|
- 功能:设置 Web 路由的处理函数,在中间件函数中可以拿到 Web Server 的前置中间件
|
688
766
|
- 执行阶段:在请求到达的时候
|
689
|
-
- Hook
|
767
|
+
- Hook 模型:`AsyncPipeline`
|
690
768
|
- 类型:`AsyncPipeline<WebServerStartInput, Adapter>`
|
691
769
|
- 使用示例:
|
692
770
|
|
@@ -712,7 +790,7 @@ export const myPlugin = (): ServerPlugin => ({
|
|
712
790
|
|
713
791
|
- 功能:设置 API 路由的处理函数,在中间件函数中可以拿到 API Server 的前置中间件
|
714
792
|
- 执行阶段:请求到达并且 match bff basename 之后执行
|
715
|
-
- Hook
|
793
|
+
- Hook 模型:`AsyncPipeline`
|
716
794
|
- 类型:`AsyncPipeline<APIServerStartInput, Adapter>`
|
717
795
|
- 使用示例:
|
718
796
|
|
@@ -747,7 +825,7 @@ Runtime 插件主要用于开发者修改需要渲染的组件。
|
|
747
825
|
|
748
826
|
- 功能:执行 `App.init`
|
749
827
|
- 执行阶段:渲染(SSR/CSR)
|
750
|
-
- Hook
|
828
|
+
- Hook 模型:`AsyncPipeline`
|
751
829
|
- 类型:`AsyncPipeline<{ context: RuntimeContext; }, unknown>`
|
752
830
|
- 使用示例:
|
753
831
|
|
@@ -770,7 +848,7 @@ export const myPlugin = (): Plugin => ({
|
|
770
848
|
|
771
849
|
- 功能:修改需要渲染的组件
|
772
850
|
- 执行阶段:渲染(SSR/CSR)
|
773
|
-
- Hook
|
851
|
+
- Hook 模型:`Pipeline`
|
774
852
|
- 类型:`Pipeline<{ App: React.ComponentType<any>; }, React.ComponentType<any>>`
|
775
853
|
- 使用示例:
|
776
854
|
|
@@ -808,7 +886,7 @@ export const myPlugin = (): Plugin => ({
|
|
808
886
|
|
809
887
|
- 功能:修改需要渲染的 Element
|
810
888
|
- 执行阶段:渲染(SSR/CSR)
|
811
|
-
- Hook
|
889
|
+
- Hook 模型:`Pipeline`
|
812
890
|
- 类型:`Pipeline<{ element: JSX.Element; props: AppProps; context: RuntimeContext }, JSX.Element>`
|
813
891
|
- 使用示例:
|
814
892
|
|
@@ -831,7 +909,7 @@ export const myPlugin = (): Plugin => ({
|
|
831
909
|
|
832
910
|
- 功能:定制客户端渲染流程
|
833
911
|
- 执行阶段:在浏览器客户端渲染
|
834
|
-
- Hook
|
912
|
+
- Hook 模型:`AsyncPipeline`
|
835
913
|
- 类型:`AsyncPipeline<{ App: React.ComponentType<any>; context?: RuntimeContext; rootElement: HTMLElement; }, void>`
|
836
914
|
- 使用示例:
|
837
915
|
|
@@ -857,7 +935,7 @@ export const myPlugin = (): Plugin => ({
|
|
857
935
|
|
858
936
|
- 功能:定制服务器端渲染流程
|
859
937
|
- 执行阶段:SSR
|
860
|
-
- Hook
|
938
|
+
- Hook 模型:`AsyncPipeline`
|
861
939
|
- 类型:`AsyncPipeline<{ App: React.ComponentType<any>; context?: RuntimeContext; }, string>`
|
862
940
|
- 使用示例:
|
863
941
|
|
package/package.json
CHANGED
@@ -15,14 +15,14 @@
|
|
15
15
|
"modern",
|
16
16
|
"modern.js"
|
17
17
|
],
|
18
|
-
"version": "2.
|
18
|
+
"version": "2.27.0",
|
19
19
|
"publishConfig": {
|
20
20
|
"registry": "https://registry.npmjs.org/",
|
21
21
|
"access": "public",
|
22
22
|
"provenance": true
|
23
23
|
},
|
24
24
|
"peerDependencies": {
|
25
|
-
"@modern-js/builder-doc": "^2.
|
25
|
+
"@modern-js/builder-doc": "^2.27.0"
|
26
26
|
},
|
27
27
|
"devDependencies": {
|
28
28
|
"classnames": "^2",
|
@@ -34,9 +34,9 @@
|
|
34
34
|
"fs-extra": "^10",
|
35
35
|
"@types/node": "^16",
|
36
36
|
"@types/fs-extra": "^9",
|
37
|
-
"@modern-js/builder-doc": "2.
|
38
|
-
"@modern-js/doc-
|
39
|
-
"@modern-js/doc-
|
37
|
+
"@modern-js/builder-doc": "2.27.0",
|
38
|
+
"@modern-js/doc-tools": "2.27.0",
|
39
|
+
"@modern-js/doc-plugin-auto-sidebar": "2.27.0"
|
40
40
|
},
|
41
41
|
"scripts": {
|
42
42
|
"dev": "modern dev",
|