@modern-js/main-doc 2.60.5 → 2.61.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (71) hide show
  1. package/docs/en/apis/app/runtime/core/use-runtime-context.mdx +86 -33
  2. package/docs/en/components/bff-upload.mdx +95 -0
  3. package/docs/en/components/init-app.mdx +0 -1
  4. package/docs/en/components/init-rspack-app.mdx +0 -1
  5. package/docs/en/configure/app/dev/https.mdx +3 -0
  6. package/docs/en/configure/app/tools/html-plugin.mdx +13 -0
  7. package/docs/en/configure/app/tools/terser.mdx +1 -1
  8. package/docs/en/configure/app/tools/ts-loader.mdx +6 -3
  9. package/docs/en/configure/app/tools/webpack-chain.mdx +3 -3
  10. package/docs/en/guides/advanced-features/bff/_meta.json +1 -1
  11. package/docs/en/guides/advanced-features/bff/upload.mdx +5 -0
  12. package/docs/en/guides/advanced-features/source-build.mdx +11 -4
  13. package/docs/en/guides/basic-features/deploy.mdx +104 -2
  14. package/docs/en/guides/concept/entries.mdx +58 -5
  15. package/docs/en/guides/get-started/introduction.mdx +1 -38
  16. package/docs/zh/apis/app/runtime/core/use-runtime-context.mdx +86 -33
  17. package/docs/zh/components/bff-upload.mdx +97 -0
  18. package/docs/zh/components/default-mwa-generate.mdx +0 -1
  19. package/docs/zh/components/init-app.mdx +0 -1
  20. package/docs/zh/components/init-rspack-app.mdx +0 -1
  21. package/docs/zh/configure/app/dev/https.mdx +3 -0
  22. package/docs/zh/configure/app/tools/html-plugin.mdx +13 -0
  23. package/docs/zh/configure/app/tools/terser.mdx +1 -1
  24. package/docs/zh/configure/app/tools/ts-loader.mdx +6 -3
  25. package/docs/zh/configure/app/tools/webpack-chain.mdx +3 -3
  26. package/docs/zh/guides/advanced-features/bff/_meta.json +1 -1
  27. package/docs/zh/guides/advanced-features/bff/upload.mdx +5 -0
  28. package/docs/zh/guides/advanced-features/source-build.mdx +11 -4
  29. package/docs/zh/guides/basic-features/deploy.mdx +103 -5
  30. package/docs/zh/guides/concept/entries.mdx +52 -4
  31. package/docs/zh/guides/get-started/introduction.mdx +1 -36
  32. package/package.json +4 -4
  33. package/src/i18n/enUS.ts +0 -7
  34. package/src/i18n/zhCN.ts +0 -7
  35. package/src/pages/index.tsx +3 -32
  36. package/docs/en/guides/topic-detail/generator/_meta.json +0 -17
  37. package/docs/en/guides/topic-detail/generator/create/_meta.json +0 -1
  38. package/docs/en/guides/topic-detail/generator/create/config.mdx +0 -59
  39. package/docs/en/guides/topic-detail/generator/create/option.md +0 -146
  40. package/docs/en/guides/topic-detail/generator/create/use.mdx +0 -48
  41. package/docs/en/guides/topic-detail/generator/new/_meta.json +0 -1
  42. package/docs/en/guides/topic-detail/generator/new/config.md +0 -115
  43. package/docs/en/guides/topic-detail/generator/new/option.md +0 -67
  44. package/docs/en/guides/topic-detail/generator/new/use.md +0 -75
  45. package/docs/en/guides/topic-detail/generator/plugin/_meta.json +0 -11
  46. package/docs/en/guides/topic-detail/generator/plugin/api/afterForged.md +0 -49
  47. package/docs/en/guides/topic-detail/generator/plugin/api/context.md +0 -184
  48. package/docs/en/guides/topic-detail/generator/plugin/api/input.md +0 -124
  49. package/docs/en/guides/topic-detail/generator/plugin/api/onForged.md +0 -310
  50. package/docs/en/guides/topic-detail/generator/plugin/category.md +0 -88
  51. package/docs/en/guides/topic-detail/generator/plugin/context.md +0 -104
  52. package/docs/en/guides/topic-detail/generator/plugin/structure.md +0 -106
  53. package/docs/en/guides/topic-detail/generator/plugin/use.md +0 -33
  54. package/docs/zh/guides/topic-detail/generator/_meta.json +0 -17
  55. package/docs/zh/guides/topic-detail/generator/create/_meta.json +0 -1
  56. package/docs/zh/guides/topic-detail/generator/create/config.mdx +0 -60
  57. package/docs/zh/guides/topic-detail/generator/create/option.md +0 -146
  58. package/docs/zh/guides/topic-detail/generator/create/use.mdx +0 -48
  59. package/docs/zh/guides/topic-detail/generator/new/_meta.json +0 -1
  60. package/docs/zh/guides/topic-detail/generator/new/config.md +0 -116
  61. package/docs/zh/guides/topic-detail/generator/new/option.md +0 -67
  62. package/docs/zh/guides/topic-detail/generator/new/use.md +0 -74
  63. package/docs/zh/guides/topic-detail/generator/plugin/_meta.json +0 -11
  64. package/docs/zh/guides/topic-detail/generator/plugin/api/afterForged.md +0 -50
  65. package/docs/zh/guides/topic-detail/generator/plugin/api/context.md +0 -184
  66. package/docs/zh/guides/topic-detail/generator/plugin/api/input.md +0 -124
  67. package/docs/zh/guides/topic-detail/generator/plugin/api/onForged.md +0 -310
  68. package/docs/zh/guides/topic-detail/generator/plugin/category.md +0 -93
  69. package/docs/zh/guides/topic-detail/generator/plugin/context.md +0 -105
  70. package/docs/zh/guides/topic-detail/generator/plugin/structure.md +0 -106
  71. package/docs/zh/guides/topic-detail/generator/plugin/use.md +0 -33
@@ -1,67 +0,0 @@
1
- ---
2
- sidebar_position: 2
3
- ---
4
-
5
- # CLI 参数
6
-
7
- `new` 命令提供了很多配置参数用于配置其执行过程中的行为,可以通过 `--help` 参数进行查看:
8
-
9
- ```bash
10
- npm run new --help
11
-
12
- Usage: modern new [options]
13
-
14
- 启用可选功能
15
-
16
- Options:
17
- --lang <lang> 设置 new 命令执行语言(zh 或者 en)
18
- -c, --config <config> 生成器运行默认配置(JSON 字符串)
19
- -d, --debug 开启 Debug 模式,打印调试日志信息 (default: false)
20
- --dist-tag <tag> 生成器使用特殊的 npm Tag 版本
21
- --registry <registry> 生成器运行过程中定制 npm Registry
22
- -h, --help display help for command
23
- ```
24
-
25
- 下面将针对这些参数做详细介绍:
26
-
27
- ## --lang \<lang>
28
-
29
- 执行执行语言,支持 `zh` 和 `en`。
30
-
31
- 默认情况下,`new` 命令会自动识别用户的系统语言,选择使用中文或者英文,如果识别失败或者不符合使用习惯,可以使用该参数手动指定。
32
-
33
- ## -c, --config \<config>
34
-
35
- 指定项目默认配置。
36
-
37
- 默认情况下,new 命令在执行过程中会出现选择操作类型、开启功能等交互问题,当需要提前指定这些配置内容时,可以通过该字段传入。
38
-
39
- 该字段为 JSON 字符串,例如需指定 BFF 框架时:
40
-
41
- ```bash
42
- npm run new --config '{"framework": "express"}'
43
- ```
44
-
45
- `config` 支持的参数可查看[配置参数](/guides/topic-detail/generator/new/config.html)。
46
-
47
- ## -d,--debug
48
-
49
- 展示调试日志。
50
-
51
- 当在使用过程中遇到问题时,可以使用该参数显示调试日志,方便快速定位问题位置及对问题进行排查。
52
-
53
- ## --registry \<registry>
54
-
55
- 指定执行子生成器和获取项目依赖版本的 npm registry。
56
-
57
- ## --dist-tag \<distTag>
58
-
59
- 指定生成器版本。
60
-
61
- `new` 命令执行过程中会执行更小的微生成器,默认会使用 `latest` 的微生成器版本,使用该参数可以指定执行的微生成器的版本号的版本。
62
-
63
- 比如使用 `next` 版本:
64
-
65
- ```bash
66
- npm run new --dist-tag next
67
- ```
@@ -1,74 +0,0 @@
1
- ---
2
- sidebar_position: 1
3
- ---
4
-
5
- # 使用
6
-
7
- 在 Web 应用、 Npm 模块中,我们提供了 `new` 命令用于创建项目元素、开启功能和创建子项目。
8
-
9
- ## Web 应用
10
-
11
- Web 应用项目通过 `@modern-js/app-tools` 提供 `new` 命令。
12
-
13
- new 命令提供了三种操作类型:
14
-
15
- - 创建工程元素
16
-
17
- - 启用可选功能
18
-
19
- - 自动重构
20
-
21
- 每种操作类型都提供了对应支持的列表,可根据项目情况进行选择。
22
-
23
- 例如:
24
-
25
- 创建新的应用入口:
26
-
27
- ```bash
28
- npm run new
29
- ? 请选择你想要的操作 创建工程元素
30
- ? 请选择创建元素类型 新建「应用入口」
31
- ? 请填写入口名称 entry
32
- ```
33
-
34
- 执行完成后将会在项目 `src` 目录创建新入口对应名称的文件夹及默认入口文件,并且自动帮忙整理之前 `src` 下入口文件到 `package.json` 中 `name` 字段对应的文件夹中。
35
-
36
- 开启 BFF 功能:
37
-
38
- ```bash
39
- npm run new
40
- ? 请选择你想要的操作 启用可选功能
41
- ? 请选择功能名称 启用「BFF」功能
42
- ? 请选择 BFF 类型 函数模式
43
- ? 请选择运行时框架 Express
44
- ```
45
-
46
- 执行完成后将会在项目安装 BFF 相关依赖,并创建 api 目录用于 BFF 模块的开发并提供提示信息用于注册 BFF 插件。
47
-
48
- :::info
49
- 这里未帮助用户自动注册插件,原因是由于 `modern.config.[tj]s` 在项目生命周期中变化比较复杂,可能存在模块之间互相引用问题,让用户手动注册能保证修改配置的正确性。
50
-
51
- 在后续定制化的开发中,如果有类似的需求,也可以通过提示的方式给到使用方操作指南,让用户对文件进行手动操作。
52
- :::
53
-
54
- :::warning
55
- 执行 new 命令时可能会出现需要开启的功能不在列表中,需要检查一下项目 `package.json` 中是否已经安装对应功能的插件,如果仍需使用 new 命令开启,需要先手动移除对应的插件依赖。
56
- :::
57
-
58
- ## Npm 模块
59
-
60
- Npm 模块项目通过 `@modern-js/module-tools` 提供 new 命令。
61
-
62
- new 命令提供了启用可选功能的能力。
63
-
64
- 例如:
65
-
66
- 开启 Storybook 能力:
67
-
68
- ```bash
69
- npm run new
70
- ? 请选择你想要的操作 启用可选功能
71
- ? 请选择功能名称 启用「Storybook」
72
- ```
73
-
74
- 执行完成后将会在项目安装 Storybook 插件相关依赖,增加 `storybook` 命令,创建 `stories` 目录用于 Storybook 模块的开发并提供提示信息用于注册 Storybook 插件。
@@ -1,11 +0,0 @@
1
- [
2
- "structure",
3
- "category",
4
- "use",
5
- "context",
6
- {
7
- "type": "dir",
8
- "name": "api",
9
- "label": "API"
10
- }
11
- ]
@@ -1,50 +0,0 @@
1
- ---
2
- sidebar_position: 3
3
- ---
4
-
5
- # afterForged
6
-
7
- `afterForged` 为生成器插件中用于文件操作后其他步骤操作的生命周期函数。
8
-
9
- ## 类型
10
-
11
- ```ts
12
- export type AfterForgedAPI = {
13
- isInGitRepo: () => Promise<boolean>;
14
- initGitRepo: () => Promise<void>;
15
- gitAddAndCommit: (commitMessage: string) => Promise<void>;
16
- install: () => Promise<void>;
17
- };
18
-
19
- export type PluginAfterForgedFunc = (api: AfterForgedAPI, inputData: Record<string, unknown>) => Promise<void>;
20
-
21
- export interface IPluginContext {
22
- afterForged: (func: PluginAfterForgedFunc) => void;
23
- ...
24
- }
25
- ```
26
-
27
- ## API
28
-
29
- 下面将分别介绍 api 参数提供的 API。
30
-
31
- ### isInGitRepo
32
-
33
- 判断当前项目是否为一个 Git 仓库。
34
-
35
- ### initGitRepo
36
-
37
- 初始化当前项目为 Git 仓库。
38
-
39
- ### gitAddAndCommit
40
-
41
- 提交当前仓库变更。
42
-
43
- 参数:
44
-
45
- - `commitMessage`: commit 信息。
46
-
47
-
48
- ### install
49
-
50
- 在项目根目录安装依赖。`install` 函数中将根据 `packageManager` 的值使用对应的包管理工具安装依赖。
@@ -1,184 +0,0 @@
1
- ---
2
- sidebar_position: 1
3
- ---
4
-
5
- # context
6
-
7
- 生成器插件在 `main` 文件中默认导出了一个函数,函数参数为 `context`,生成器插件提供的所有 API 都是由这个 `context` 提供的。
8
-
9
- ## 类型
10
-
11
- 我们先大概了解一下 `context` 的类型定义:
12
-
13
- ```ts
14
- export interface IPluginContext {
15
- locale?: string;
16
- addInputBefore: (key: string, input: Schema) => void;
17
- addInputAfter: (key: string, input: Schema) => void;
18
- setInput: (key: string, field: string, value: unknown) => void;
19
- setInputValue: (value: Record<string, unknown>) => void;
20
- setDefaultConfig: (value: Record<string, unknown>) => void;
21
- isFileExist: (fileName: string) => Promise<boolean>;
22
- readDir: (dir: string) => Promise<string[]>;
23
- setGitMessage: (gitMessage: string) => void;
24
- onForged: (func: PluginForgedFunc) => void;
25
- afterForged: (func: PluginAfterForgedFunc) => void;
26
- }
27
- ```
28
-
29
- `context` 提供的内容主要分为三类:
30
-
31
- - 获取当前生成器执行环境信息
32
-
33
- - 操作 input 输入
34
-
35
- - 生成器插件生命周期函数
36
-
37
- 下面将从这三个分类分别介绍生成器插件 API。
38
-
39
-
40
- ### 获取信息
41
-
42
- #### locale
43
-
44
- 获取生成器插件执行环境的语言。`@modern-js/create` 提供了 `zh` 和 `en` 两种语言,这里即为对应的这两种值。
45
-
46
- #### isFileExist
47
-
48
- 判断文件是否存在。我们很多时候需要在定义操作前确认目标项目文件是否已经存在,可以直接通过该 API 获取。
49
-
50
- 例如我们需要获取 `package.json` 文件是否存在,然后做相应的操作:
51
-
52
- ```ts
53
- const isExist = await context.isFileExist('package.json');
54
- if (isExist) {
55
- ...
56
- }
57
- ```
58
-
59
- #### readDir
60
-
61
- 获取文件夹内文件列表。我们很多时候需要在定义操作前获取目标项目文件夹下面文件列表,可以直接通过该 API 获取。
62
-
63
- 例如我们需要获取 src 文件夹下所有文件,然后进行相应操作:
64
-
65
- ```ts
66
- const files = await context.readDir('src');
67
-
68
- files.map(name => {
69
- ...
70
- });
71
- ```
72
-
73
- ### input 操作
74
-
75
- input 操作中使用的 key 参数可参考[配置参数](/guides/topic-detail/generator/create/config.html),需要在使用对应工程方案下的 key,即不支持在 `solution` 和 `scenes`。
76
-
77
- input 操作中的 input 参数对应的 Schema 类型可参考 [Input](/guides/topic-detail/generator/plugin/api/input.html)。
78
-
79
- #### addInputBefore
80
-
81
- 在指定的 input `key` 前添加问题。
82
-
83
- 例如:
84
-
85
- ```ts
86
- context.addInputBefore('packageManager', {
87
- type: 'object',
88
- properties: {
89
- language: {
90
- type: 'string',
91
- title: '开发语言',
92
- enum: [
93
- { label: 'TS', value: 'ts' },
94
- { label: 'ES6+', value: 'js' },
95
- ],
96
- },
97
- },
98
- });
99
- ```
100
-
101
- #### addInputAfter
102
-
103
- 在指定的 input `key` 后添加问题。
104
-
105
- 例如:
106
-
107
- ```ts
108
- context.addInputAfter('packageManager', {
109
- type: 'object',
110
- properties: {
111
- language: {
112
- type: 'string',
113
- title: '开发语言',
114
- enum: [
115
- { label: 'TS', value: 'ts' },
116
- { label: 'ES6+', value: 'js' },
117
- ],
118
- },
119
- },
120
- });
121
- ```
122
-
123
- :::info
124
- 1. 添加问题的 `key` 不能和 Modern.js 提供的工程方案自身的问题的 `key` 重复。
125
- 2. 添加问题 `addInputAfter` 的优先级高于 `addInputBefore`,当同时对一个 key 添加 After 问题和对其后一个key 添加 Before 问题时,After 问题会在 Before 之前。
126
- 3. 当需要在相同 `key` 前面或者后面添加多个问题时,可多次调用该方法,问题的顺序会按照调用顺序进行排列。
127
-
128
- :::
129
-
130
- #### setInput
131
-
132
- 设置指定 input `key` 的属性。
133
-
134
- 例如设置 `packageName` 的 `title` 属性:
135
-
136
- ```ts
137
- context.setInput('packageName', 'title', "展示名称");
138
- ```
139
-
140
- :::info
141
- 对于 Modern.js 工程方案提供的输入选项,只支持删除,不支持增加,增加会造成代码中的逻辑判断存在问题。
142
- :::
143
-
144
-
145
- #### setInputValue
146
-
147
- 设置指定 input `key` 的选项默认值。
148
-
149
- 例如设置 `packageManager` 的默认值:
150
-
151
- ```ts
152
- context.setInputValue({
153
- packageManager: 'npm',
154
- });
155
- ```
156
-
157
- :::info
158
- 设置完成后,该问题还是需要交互,只是会使用生成器插件配置的默认值。
159
- :::
160
-
161
- #### setDefaultConfig
162
-
163
- 设置指定 input `key` 的默认值。
164
-
165
- 例如设置 `packageManager` 的默认值:
166
-
167
- ```ts
168
- context.setDefaultConfig({
169
- packageManager: 'npm',
170
- });
171
- ```
172
-
173
- :::info
174
- 设置完成后,将不再展示对应问题,和 `@modern-js/create` 制定 `--config` 行为一致。不支持设置 `vertical` 和 `projectOrg`。
175
- :::
176
-
177
- #### setGitMessage
178
-
179
- 设置 Git 初始提交信息。Modern.js 默认 Git 初始化提交信息为 `feat: init`,通过该函数可以修改。
180
-
181
-
182
- ### 生命周期函数
183
-
184
- 生命周期函数比较复杂,将通过后面两节 [`onForged`](/guides/topic-detail/generator/plugin/api/onForged.html) 和 [`afterForged`](/guides/topic-detail/generator/plugin/api/afterForged.html) 分别介绍。
@@ -1,124 +0,0 @@
1
- ---
2
- sidebar_position: 4
3
- ---
4
-
5
- # Input
6
-
7
- 生成器插件提供了 Input 的方式完成与用户的问题交互,使用 JSON Schema 的方式进行定义:
8
-
9
- 例如:
10
-
11
- ```js
12
- const schema = {
13
- type: 'object',
14
- properties: {
15
- language: {
16
- type: 'string',
17
- title: '开发语言',
18
- enum: [
19
- { label: 'TS', value: 'ts' },
20
- { label: 'ES6+', value: 'js' },
21
- ],
22
- },
23
- },
24
- };
25
- ```
26
-
27
- JSON Schema 的格式参考了开源的 [Formily](https://formilyjs.org/) Schema 的格式,下面将对支持的字段进行介绍:
28
-
29
- ## type
30
-
31
- 定义当前 Schema 类型,当前支持的类型为 `string`、`number` 和 `object`。字符串输入和下拉选项都需要使用 `string` 类型。 `object` 类型用于实现 Schema 之间嵌套,需要配和 `properties` 属性使用。
32
-
33
- ## title
34
-
35
- 定义当前 Schema 展示名称。
36
-
37
- ## default
38
-
39
- 定义当前 Schema 的默认值。
40
-
41
- ## enum
42
-
43
- 当前 Schema 为下列选项时,定义选项内容。
44
-
45
- 子项支持 `string` 或者 `{ label: string; value: string}` 类型,当下拉选项中值和展示值相同时,可直接使用 `string` 定义。
46
-
47
- 当需要表示多选选项时,设置 `default` 字段为 `[]` 即可。
48
-
49
- ## x-validator
50
-
51
- 当前 Schema 的校验规则。当 Schema 为输入类型时,在输入完成后会自动完成校验。
52
-
53
- 这里校验规则支持[ Formily 提供的校验规则](https://formilyjs.org/zh-CN/guide/advanced/validate),例如最大值为 5:
54
-
55
- ```js
56
- const schema = {
57
- type: 'object',
58
- properties: {
59
- max_5: {
60
- type: 'number',
61
- title: '最大值(>5报错)',
62
- 'x-validator': {
63
- maximum: 5,
64
- },
65
- },
66
- },
67
- };
68
- ```
69
-
70
- 也支持直接使用验证函数:
71
-
72
- ```js
73
- const schema = {
74
- type: 'object',
75
- properties: {
76
- path: {
77
- type: 'string',
78
- title: '只能包含数字和字母',
79
- 'x-validator': value => {
80
- if (!/^[0-9a-zA-Z]*$/g.test(value)) {
81
- return '格式不正确';
82
- }
83
- return '';
84
- },
85
- },
86
- },
87
- };
88
- ```
89
-
90
- ## x-reactions
91
-
92
- 使用 Schema 之间的联动,这里和[ Formily 联动规则](https://formilyjs.org/zh-CN/guide/advanced/linkages)完全相同。
93
-
94
- 例如:
95
-
96
- ```js
97
- const schema = {
98
- type: 'object',
99
- properties: {
100
- name: {
101
- type: 'string',
102
- title: '名称',
103
- },
104
- path: {
105
- type: 'string',
106
- title: '路径',
107
- 'x-reactions': [
108
- {
109
- dependencies: ['name'],
110
- fulfill: {
111
- state: {
112
- value: '{{$deps[0]}}',
113
- },
114
- },
115
- },
116
- ],
117
- },
118
- },
119
- };
120
- ```
121
-
122
- ## properties
123
-
124
- 组织当前 Schema 的结构,定义子表单。`properties` 为对象,`key` 为 Schema 关键字,`value` 为上述描述的 Schema 对象。