@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.
- package/docs/en/apis/app/runtime/core/use-runtime-context.mdx +86 -33
- package/docs/en/components/bff-upload.mdx +95 -0
- package/docs/en/components/init-app.mdx +0 -1
- package/docs/en/components/init-rspack-app.mdx +0 -1
- package/docs/en/configure/app/dev/https.mdx +3 -0
- package/docs/en/configure/app/tools/html-plugin.mdx +13 -0
- package/docs/en/configure/app/tools/terser.mdx +1 -1
- package/docs/en/configure/app/tools/ts-loader.mdx +6 -3
- package/docs/en/configure/app/tools/webpack-chain.mdx +3 -3
- package/docs/en/guides/advanced-features/bff/_meta.json +1 -1
- package/docs/en/guides/advanced-features/bff/upload.mdx +5 -0
- package/docs/en/guides/advanced-features/source-build.mdx +11 -4
- package/docs/en/guides/basic-features/deploy.mdx +104 -2
- package/docs/en/guides/concept/entries.mdx +58 -5
- package/docs/en/guides/get-started/introduction.mdx +1 -38
- package/docs/zh/apis/app/runtime/core/use-runtime-context.mdx +86 -33
- package/docs/zh/components/bff-upload.mdx +97 -0
- package/docs/zh/components/default-mwa-generate.mdx +0 -1
- package/docs/zh/components/init-app.mdx +0 -1
- package/docs/zh/components/init-rspack-app.mdx +0 -1
- package/docs/zh/configure/app/dev/https.mdx +3 -0
- package/docs/zh/configure/app/tools/html-plugin.mdx +13 -0
- package/docs/zh/configure/app/tools/terser.mdx +1 -1
- package/docs/zh/configure/app/tools/ts-loader.mdx +6 -3
- package/docs/zh/configure/app/tools/webpack-chain.mdx +3 -3
- package/docs/zh/guides/advanced-features/bff/_meta.json +1 -1
- package/docs/zh/guides/advanced-features/bff/upload.mdx +5 -0
- package/docs/zh/guides/advanced-features/source-build.mdx +11 -4
- package/docs/zh/guides/basic-features/deploy.mdx +103 -5
- package/docs/zh/guides/concept/entries.mdx +52 -4
- package/docs/zh/guides/get-started/introduction.mdx +1 -36
- package/package.json +4 -4
- package/src/i18n/enUS.ts +0 -7
- package/src/i18n/zhCN.ts +0 -7
- package/src/pages/index.tsx +3 -32
- package/docs/en/guides/topic-detail/generator/_meta.json +0 -17
- package/docs/en/guides/topic-detail/generator/create/_meta.json +0 -1
- package/docs/en/guides/topic-detail/generator/create/config.mdx +0 -59
- package/docs/en/guides/topic-detail/generator/create/option.md +0 -146
- package/docs/en/guides/topic-detail/generator/create/use.mdx +0 -48
- package/docs/en/guides/topic-detail/generator/new/_meta.json +0 -1
- package/docs/en/guides/topic-detail/generator/new/config.md +0 -115
- package/docs/en/guides/topic-detail/generator/new/option.md +0 -67
- package/docs/en/guides/topic-detail/generator/new/use.md +0 -75
- package/docs/en/guides/topic-detail/generator/plugin/_meta.json +0 -11
- package/docs/en/guides/topic-detail/generator/plugin/api/afterForged.md +0 -49
- package/docs/en/guides/topic-detail/generator/plugin/api/context.md +0 -184
- package/docs/en/guides/topic-detail/generator/plugin/api/input.md +0 -124
- package/docs/en/guides/topic-detail/generator/plugin/api/onForged.md +0 -310
- package/docs/en/guides/topic-detail/generator/plugin/category.md +0 -88
- package/docs/en/guides/topic-detail/generator/plugin/context.md +0 -104
- package/docs/en/guides/topic-detail/generator/plugin/structure.md +0 -106
- package/docs/en/guides/topic-detail/generator/plugin/use.md +0 -33
- package/docs/zh/guides/topic-detail/generator/_meta.json +0 -17
- package/docs/zh/guides/topic-detail/generator/create/_meta.json +0 -1
- package/docs/zh/guides/topic-detail/generator/create/config.mdx +0 -60
- package/docs/zh/guides/topic-detail/generator/create/option.md +0 -146
- package/docs/zh/guides/topic-detail/generator/create/use.mdx +0 -48
- package/docs/zh/guides/topic-detail/generator/new/_meta.json +0 -1
- package/docs/zh/guides/topic-detail/generator/new/config.md +0 -116
- package/docs/zh/guides/topic-detail/generator/new/option.md +0 -67
- package/docs/zh/guides/topic-detail/generator/new/use.md +0 -74
- package/docs/zh/guides/topic-detail/generator/plugin/_meta.json +0 -11
- package/docs/zh/guides/topic-detail/generator/plugin/api/afterForged.md +0 -50
- package/docs/zh/guides/topic-detail/generator/plugin/api/context.md +0 -184
- package/docs/zh/guides/topic-detail/generator/plugin/api/input.md +0 -124
- package/docs/zh/guides/topic-detail/generator/plugin/api/onForged.md +0 -310
- package/docs/zh/guides/topic-detail/generator/plugin/category.md +0 -93
- package/docs/zh/guides/topic-detail/generator/plugin/context.md +0 -105
- package/docs/zh/guides/topic-detail/generator/plugin/structure.md +0 -106
- package/docs/zh/guides/topic-detail/generator/plugin/use.md +0 -33
@@ -1,310 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 2
|
3
|
-
---
|
4
|
-
|
5
|
-
# onForged
|
6
|
-
|
7
|
-
`onForged` 为生成器插件中用于文件操作的生命周期函数。
|
8
|
-
|
9
|
-
## 类型
|
10
|
-
|
11
|
-
```ts
|
12
|
-
export type ForgedAPI = {
|
13
|
-
addFile: (params: AddFileParams) => Promise<void>;
|
14
|
-
addManyFiles: (params: AddManyFilesParams) => Promise<void>;
|
15
|
-
updateJSONFile: (fileName: string, updateInfo: Record<string, unknown>) => Promise<void>;
|
16
|
-
updateTextRawFile: (fileName: string, update: (content: string[]) => string[]) => Promise<void>;
|
17
|
-
updateModernConfig: (updateInfo: Record<string, any>) => Promise<void>;
|
18
|
-
rmFile: (fileName: string) => Promise<void>;
|
19
|
-
rmDir: (dirName: string) => Promise<void>;
|
20
|
-
addHelper: (name: string, fn: Handlebars.HelperDelegate) => void;
|
21
|
-
addPartial: (name: string, str: Handlebars.Template) => void;
|
22
|
-
createElement: (element: ActionElement, params: Record<string, unknown>) => Promise<void>;
|
23
|
-
enableFunc: (func: ActionFunction, params?: Record<string, unknown> | undefined) => Promise<void>;
|
24
|
-
};
|
25
|
-
|
26
|
-
export type PluginForgedFunc = (
|
27
|
-
api: ForgedAPI,
|
28
|
-
inputData: Record<string, unknown>,
|
29
|
-
) => void | Promise<void>;
|
30
|
-
|
31
|
-
export interface IPluginContext {
|
32
|
-
onForged: (func: PluginForgedFunc) => void;
|
33
|
-
...
|
34
|
-
}
|
35
|
-
```
|
36
|
-
|
37
|
-
`onForged` 参数为一个回调函数,回调函数参数为 `api` 和 `input`,分别用于提供该生命周期函数提供的 API 及当前输入信息。
|
38
|
-
|
39
|
-
## 概念
|
40
|
-
|
41
|
-
### 文件类型
|
42
|
-
|
43
|
-
生成器插件将文件类型分为四类:
|
44
|
-
|
45
|
-
- 文本文件
|
46
|
-
|
47
|
-
纯文本内容文件,可使用 [Handlebars](https://handlebarsjs.com/) 或 [EJS](https://ejs.co/) 进行模板处理的文件。
|
48
|
-
|
49
|
-
- 二进制文件
|
50
|
-
|
51
|
-
图片、音频、视频等文件。
|
52
|
-
|
53
|
-
- JSON 文件
|
54
|
-
|
55
|
-
JSON 格式的文件。
|
56
|
-
|
57
|
-
- 文本列表文件
|
58
|
-
|
59
|
-
文件由行文本组成的文件,例如 `.gitignore`, `.editorconfig`, `.npmrc`。
|
60
|
-
|
61
|
-
对应四种文件的类型定义为:
|
62
|
-
|
63
|
-
```ts
|
64
|
-
export enum FileType {
|
65
|
-
Text = 'text',
|
66
|
-
Binary = 'binary',
|
67
|
-
Json = 'json',
|
68
|
-
TextRaw = 'textRaw',
|
69
|
-
}
|
70
|
-
```
|
71
|
-
|
72
|
-
## API
|
73
|
-
|
74
|
-
下面将分别介绍 api 参数提供的 API。
|
75
|
-
|
76
|
-
### addFile
|
77
|
-
|
78
|
-
添加单个文件。
|
79
|
-
|
80
|
-
参数类型:
|
81
|
-
|
82
|
-
```ts
|
83
|
-
export interface AddFileParams {
|
84
|
-
type: FileType;
|
85
|
-
file: string;
|
86
|
-
template?: string;
|
87
|
-
templateFile?: string;
|
88
|
-
force?: boolean;
|
89
|
-
data?: Record<string, string>;
|
90
|
-
}
|
91
|
-
```
|
92
|
-
|
93
|
-
- `type`: 文件类型。
|
94
|
-
- `file`:目标文件路径,相对于目标项目目录的相对路径。
|
95
|
-
- `template`:模板内容,该字段值可直接用于模板渲染文件。优先级低于 `templateFile`。
|
96
|
-
- `templateFile`:模板文件路径,相对于 templates 目录的相对路径即可。
|
97
|
-
- `force`:是否强制覆盖,当目标文件存在时是否强制覆盖,默认为 false。
|
98
|
-
- `data`:模板渲染数据。
|
99
|
-
|
100
|
-
:::info
|
101
|
-
文本类型文件默认使用 Handlebars 进行处理,当模板文件以 `.ejs` 结尾的话,会使用 [EJS](https://ejs.co/) 进行模板渲染。
|
102
|
-
:::
|
103
|
-
|
104
|
-
例如添加模板文件 `App.tsx.hanlebars` 到 `src/App.tsx` 中:
|
105
|
-
|
106
|
-
```ts
|
107
|
-
context.onForged(async (api: ForgedAPI, _input: Record<string, unknown>) => {
|
108
|
-
await api.addFile({
|
109
|
-
type: FileType.Text,
|
110
|
-
file: `src/App.tsx`,
|
111
|
-
templateFile: `App.tsx.handlebars`,
|
112
|
-
});
|
113
|
-
})
|
114
|
-
```
|
115
|
-
|
116
|
-
### addManyFiless
|
117
|
-
|
118
|
-
批量添加文件,一般用于添加多个文件到同一个目标目录。
|
119
|
-
|
120
|
-
参数类型:
|
121
|
-
|
122
|
-
```ts
|
123
|
-
export interface AddManyFilesParams {
|
124
|
-
type: FileType;
|
125
|
-
destination: string;
|
126
|
-
templateFiles: string[] | (() => string[]);
|
127
|
-
templateBase?: string;
|
128
|
-
fileNameFunc?: (name: string) => string;
|
129
|
-
data?: Record<string, string>;
|
130
|
-
}
|
131
|
-
```
|
132
|
-
|
133
|
-
- `type`: 文件类型。
|
134
|
-
- `destination`:目标文件夹,相对于目标项目目录的相对路径。
|
135
|
-
- `templateFiles`:模板文件列表,支持 [globby](https://www.npmjs.com/package/globby) 正则表达式
|
136
|
-
- `templateBase`:模板文件的公共路径,使用该参数时目标文件会自动删除该路径。
|
137
|
-
- `fileNameFunc`:重命名文件函数,添加文件过程中会依次将文件名传入到该函数,可以根据需要进行重命名。
|
138
|
-
- `data`:模板渲染数据。
|
139
|
-
|
140
|
-
例如将模板文件 `src-ts` 目录下所有文件渲染到 `src` 目录:
|
141
|
-
|
142
|
-
```ts
|
143
|
-
context.onForged(async (api: ForgedAPI, _input: Record<string, unknown>) => {
|
144
|
-
await api.addManyFiles({
|
145
|
-
type: FileType.Text,
|
146
|
-
destination: 'src',
|
147
|
-
templateFiles: ['src-ts/**/*'],
|
148
|
-
templateBase: 'src-ts',
|
149
|
-
fileNameFunc: name => name.replace('.handlebars', ''),
|
150
|
-
});
|
151
|
-
})
|
152
|
-
```
|
153
|
-
|
154
|
-
### updateJSONFile
|
155
|
-
|
156
|
-
更新 JSON 文件字段。
|
157
|
-
|
158
|
-
参数类型:
|
159
|
-
|
160
|
-
```ts
|
161
|
-
fileName: strings
|
162
|
-
updateInfo: Record<string, unknown>
|
163
|
-
```
|
164
|
-
|
165
|
-
- `fileName`:JSON 文件路径,相对于目标项目的路径。
|
166
|
-
- `updateInfo`:更新信息,嵌套字段更新需要平铺,不然会更新整体造成内容丢失。
|
167
|
-
|
168
|
-
例如更新 `package.json` 的 name 字段:
|
169
|
-
|
170
|
-
```ts
|
171
|
-
context.onForged(async (api: ForgedAPI, _input: Record<string, unknown>) => {
|
172
|
-
await api.updateJSONFile('package.json', { name: 'new_name' });
|
173
|
-
})
|
174
|
-
```
|
175
|
-
|
176
|
-
例如更新 `dependencies` 的 `react-dom` 版本:
|
177
|
-
|
178
|
-
```ts
|
179
|
-
context.onForged(async (api: ForgedAPI, _input: Record<string, unknown>) => {
|
180
|
-
await api.updateJSONFile('package.json', {
|
181
|
-
'dependencies.react-dom': '^18',
|
182
|
-
});
|
183
|
-
})
|
184
|
-
```
|
185
|
-
|
186
|
-
### updateTextRawFile
|
187
|
-
|
188
|
-
更新文本列表文件内容。
|
189
|
-
|
190
|
-
参数类型:
|
191
|
-
|
192
|
-
```ts
|
193
|
-
fileName: string
|
194
|
-
update: (content: string[]) => string[]
|
195
|
-
```
|
196
|
-
|
197
|
-
- `fileName`: 文本列表文件路径,相对于目标项目的路径。
|
198
|
-
- `update`:更新函数,参数为当前文件内容以 `\n` 进行分割的数组,返回值也为修改完成后的数组,`@modern-js/create` 会自动以 `\n` 合并,并写入源文件。
|
199
|
-
|
200
|
-
例如 `.gitinore` 文件中增加 dist 目录:
|
201
|
-
|
202
|
-
```ts
|
203
|
-
context.onForged(async (api: ForgedAPI, _input: Record<string, unknown>) => {
|
204
|
-
await api.updateTextRawFile('.gitinore', (content) => [...content, 'dist']);
|
205
|
-
})
|
206
|
-
```
|
207
|
-
|
208
|
-
### updateModernConfig(不推荐)
|
209
|
-
|
210
|
-
Modern.js 配置除了可以在 `modern.config.[tj]s` 中配置外,还支持 `package.json` 中配置 `modernConfig` 配置。该函数用于更新该字段。
|
211
|
-
|
212
|
-
参数类型:
|
213
|
-
|
214
|
-
```ts
|
215
|
-
updateInfo: Record<string, any>
|
216
|
-
```
|
217
|
-
|
218
|
-
- `updateInfo`: 更新内容信息。updateModernConfig 是基于 updateJSONFile 的封装,将自动更新到 `modernConfig` 字段下,updateInfo 中只需填写 `modernConfig` 下的配置字段即可。
|
219
|
-
|
220
|
-
例如开启 ssr:
|
221
|
-
|
222
|
-
```ts
|
223
|
-
context.onForged(async (api: ForgedAPI, _input: Record<string, unknown>) => {
|
224
|
-
await api.updateModernConfig({ 'server.ssr': true });
|
225
|
-
})
|
226
|
-
```
|
227
|
-
|
228
|
-
### rmFile
|
229
|
-
|
230
|
-
删除文件。
|
231
|
-
|
232
|
-
参数类型:
|
233
|
-
|
234
|
-
```ts
|
235
|
-
fileName: string
|
236
|
-
```
|
237
|
-
|
238
|
-
- `fileName`:删除的文件路径,相对于目标项目的路径。
|
239
|
-
|
240
|
-
### rmDir
|
241
|
-
|
242
|
-
删除文件夹。
|
243
|
-
|
244
|
-
参数类型:
|
245
|
-
|
246
|
-
```ts
|
247
|
-
dirName: string
|
248
|
-
```
|
249
|
-
|
250
|
-
- `dirName`:删除的文件夹路径,相对于目标项目的路径。
|
251
|
-
|
252
|
-
### addHelper
|
253
|
-
|
254
|
-
添加 handlebrs 渲染的[自定义 Helper](https://handlebarsjs.com/guide/#custom-helpers)。
|
255
|
-
|
256
|
-
参数类型:
|
257
|
-
|
258
|
-
```ts
|
259
|
-
name: string
|
260
|
-
fn: Handlebars.HelperDelegate
|
261
|
-
```
|
262
|
-
|
263
|
-
- `name`:Helper 函数名称。
|
264
|
-
- `fn`:Helper 函数实现。
|
265
|
-
|
266
|
-
### addPartial
|
267
|
-
|
268
|
-
添加 Handlebars 渲染的 [Partial](https://handlebarsjs.com/guide/partials.html#basic-partials)。
|
269
|
-
|
270
|
-
参数类型:
|
271
|
-
|
272
|
-
```ts
|
273
|
-
name: string
|
274
|
-
str: Handlebars.Template
|
275
|
-
```
|
276
|
-
|
277
|
-
- `name`:Partial 名称。
|
278
|
-
- `str`:Partial 的模板字符串。
|
279
|
-
|
280
|
-
### createElement
|
281
|
-
|
282
|
-
自动调用 new 命令创建工程元素。
|
283
|
-
|
284
|
-
参数类型:
|
285
|
-
|
286
|
-
```ts
|
287
|
-
element: ActionElement
|
288
|
-
params: Record<string, unknown>
|
289
|
-
```
|
290
|
-
|
291
|
-
- `element`:工程元素类型,新建入口或者新建自定义 Web Server 源码目录。
|
292
|
-
- `params`:对应创建工程元素的其他参数。
|
293
|
-
|
294
|
-
### enableFunc
|
295
|
-
|
296
|
-
自动调用 new 命令开启可选功能。
|
297
|
-
|
298
|
-
参数类型:
|
299
|
-
|
300
|
-
```ts
|
301
|
-
func: ActionFunction
|
302
|
-
params?: Record<string, unknown>
|
303
|
-
```
|
304
|
-
|
305
|
-
- `func`:开启功能名称。
|
306
|
-
- `params`:对应开启功能的其他参数。
|
307
|
-
|
308
|
-
:::info
|
309
|
-
创建工程元素和开启功能配置可参考[配置参数](/guides/topic-detail/generator/new/config.html)。
|
310
|
-
:::
|
@@ -1,93 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 2
|
3
|
-
---
|
4
|
-
|
5
|
-
# 类型
|
6
|
-
|
7
|
-
## 介绍
|
8
|
-
|
9
|
-
生成器插件分为两类:
|
10
|
-
|
11
|
-
- 扩展:Web 应用( Npm 模块) = Web 应用( Npm 模块) + 生成器插件
|
12
|
-
|
13
|
-
- 自定义:新应用(模块) = Web 应用(模块) + 生成器插件
|
14
|
-
|
15
|
-
|
16
|
-
简单理解就是扩展还是使用 Modern.js 原本的工程方案名称,自定义会创建一个新的名称。
|
17
|
-
|
18
|
-
## 标识
|
19
|
-
|
20
|
-
生成器插件的类型通过 `package.json` 中的 meta 字段来提供:
|
21
|
-
|
22
|
-
### 扩展
|
23
|
-
|
24
|
-
```json title="package.json"
|
25
|
-
{
|
26
|
-
"meta": {
|
27
|
-
"extend": "mwa" // module
|
28
|
-
}
|
29
|
-
}
|
30
|
-
```
|
31
|
-
|
32
|
-
### 自定义
|
33
|
-
|
34
|
-
```json title="package.json"
|
35
|
-
{
|
36
|
-
"meta": {
|
37
|
-
"key": "new_app",
|
38
|
-
"name": "新应用",
|
39
|
-
"type": "mwa" // module 和 custom
|
40
|
-
}
|
41
|
-
}
|
42
|
-
```
|
43
|
-
|
44
|
-
:::info
|
45
|
-
自定义类型的 type 支持 custom 类型,custom 为使用 Modern.js 提供的一些项目开发的最佳实践模板,比如 `.gitignore`、`.editorConfig` 等文件,其他业务相关代码模板需要手动通过生成器插件提供。
|
46
|
-
:::
|
47
|
-
|
48
|
-
## 创建初始项目
|
49
|
-
|
50
|
-
### 扩展
|
51
|
-
|
52
|
-
```bash
|
53
|
-
npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
|
54
|
-
? 请选择你想创建的工程类型 Npm 模块
|
55
|
-
? 请选择项目场景 生成器插件
|
56
|
-
? 请输入生成器插件插件包名 plugin
|
57
|
-
? 请选择开发语言 TS
|
58
|
-
? 请选择包管理工具 pnpm
|
59
|
-
? 请选择插件类型 extend
|
60
|
-
? 请选择插件基础类型 Web 应用
|
61
|
-
```
|
62
|
-
|
63
|
-
### 自定义
|
64
|
-
|
65
|
-
```bash
|
66
|
-
npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
|
67
|
-
? 请选择项目类型 生成器插件
|
68
|
-
? 请选择项目组织方式 独立项目
|
69
|
-
? 请选择开发语言 TS
|
70
|
-
? 请选择包管理工具 pnpm
|
71
|
-
? 请输入生成器插件插件包名 plugin
|
72
|
-
? 请选择开发语言 TS
|
73
|
-
? 请选择包管理工具 pnpm
|
74
|
-
? 请选择插件类型 custom
|
75
|
-
? 请输入插件关键字 new_app
|
76
|
-
? 请输入插件展示名称 新应用
|
77
|
-
? 请选择插件基础类型 Web 应用
|
78
|
-
```
|
79
|
-
|
80
|
-
## 执行顺序
|
81
|
-
|
82
|
-
生成器插件支持同时使用多个,也就是执行 `@modern-js/create` 时支持多个 `--plugin` 参数。
|
83
|
-
|
84
|
-
### 扩展
|
85
|
-
|
86
|
-
扩展生成器插件支持在执行时会按照声明的生成器插件参数的顺序,依次执行对应 extend 的工程方案的生命周期函数。
|
87
|
-
|
88
|
-
例如存在 A 和 B 两个生成器插件,A 和 B 都是 extend 的 Web 应用工程方案,A 插件声明添加 `a.ts` 文件,B 插件声明添加 `b.ts` 文件,
|
89
|
-
执行 `npx @modern-js/create@latest --plugin A --plugin B` 时,选择 Web 应用工程时,会先生成 Web 应用默认的项目文件,然后执行 A 插件创建 `a.ts` 文件,再执行 B 插件,生成 `b.ts` 文件。
|
90
|
-
|
91
|
-
### 自定义
|
92
|
-
|
93
|
-
自定义生成器插件只支持同一时间运行一个生成器插件,当 `@modern-js/create` 声明 `--plugin` 参数时,会在选择工程方案之后增加选择工程方案场景选项,即为上述 `package.json` 中定义的新 name,选择对应 name 的生成器插件,即会在默认工程方案执行完成后,执行对应的生成器插件逻辑。声明 `--plugin` 参数时,工程方案场景下将会逐一列举出对应的生成器插件名称供选择。
|
@@ -1,105 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 4
|
3
|
-
---
|
4
|
-
|
5
|
-
# Context
|
6
|
-
|
7
|
-
生成器插件默认会导出一个函数,函数参数为 `context`,在执行过程中 `context` 会自动注入到生成器插件中。
|
8
|
-
|
9
|
-
```ts title="src/index.ts"
|
10
|
-
import { IPluginContext, ForgedAPI } from '@modern-js/generator-plugin';
|
11
|
-
|
12
|
-
export default function (context: IPluginContext) {
|
13
|
-
context.onForged(async (_api: ForgedAPI, _input: Record<string, unknown>) => {
|
14
|
-
/**
|
15
|
-
* Todo
|
16
|
-
*/
|
17
|
-
});
|
18
|
-
}
|
19
|
-
```
|
20
|
-
|
21
|
-
`context` 提供了两类 API,分别用于自定义 Input 和定义生成器插件声明周期逻辑。
|
22
|
-
|
23
|
-
:::info
|
24
|
-
下面只对部分 API 做简单示例讲解,完整的 API 请移步 [生成器插件 API](/guides/topic-detail/generator/plugin/api/context.html) 查看。
|
25
|
-
:::
|
26
|
-
|
27
|
-
## 自定义 Input
|
28
|
-
|
29
|
-
Modern.js Framework 和 Modern.js Module 都存在一些默认的 Input 交互,使用这里的 API 可以对这些 Input 进行添加、修改、隐藏、提供默认值等操作。
|
30
|
-
|
31
|
-
例如:
|
32
|
-
|
33
|
-
- 添加问题
|
34
|
-
|
35
|
-
```ts
|
36
|
-
context.addInputBefore('packageManager', {
|
37
|
-
type: 'object',
|
38
|
-
properties: {
|
39
|
-
'username': {
|
40
|
-
type: 'string',
|
41
|
-
title: '用户名',
|
42
|
-
},
|
43
|
-
},
|
44
|
-
});
|
45
|
-
```
|
46
|
-
|
47
|
-
- 通过设置 config 隐藏问题
|
48
|
-
|
49
|
-
```ts
|
50
|
-
context.setDefaultConfig({ langauge: 'ts' });
|
51
|
-
```
|
52
|
-
|
53
|
-
## 生命周期
|
54
|
-
|
55
|
-
生成器插件提供了两个生命周期钩子函数用于定义生成器插件行为:
|
56
|
-
|
57
|
-
- onForged:完成文件操作后的生命周期。
|
58
|
-
|
59
|
-
- afterForged:onForged 钩子函数执行完成后的生命周期。
|
60
|
-
|
61
|
-
## onForged
|
62
|
-
|
63
|
-
在 Modern.js 工程方案生成器完成文件操作之后的钩子函数,用于完成生成器插件中的文件操作,比如添加模板文件,覆盖现有文件,删除现有文件等。
|
64
|
-
|
65
|
-
对于扩展类型同时执行多个生成器插件时,将会按照声明顺序依次执行对应生成器插件的 `onForged` 操作。
|
66
|
-
|
67
|
-
`onForged` 函数参数为一个回调函数,参数为 `api` 和 `input`。
|
68
|
-
|
69
|
-
```ts
|
70
|
-
context.onForged(async (api: ForgedAPI, input: Record<string, unknown>) => {
|
71
|
-
const { language } = input;
|
72
|
-
api.addFile({
|
73
|
-
type: FileType.Text,
|
74
|
-
file: `src/index.${language as string}`,
|
75
|
-
templateFile: `index.${language as string}.handlebars`,
|
76
|
-
force: true,
|
77
|
-
});
|
78
|
-
})
|
79
|
-
```
|
80
|
-
|
81
|
-
`api` 上会提供生成器插件支持的文件操作相关方法。
|
82
|
-
|
83
|
-
`input` 为当前用户输入内容,包含 `--config` 参数定义的,默认工程方案交互的及生成器插件定义的用户输入。
|
84
|
-
|
85
|
-
当需要添加新的文件模板时,将模板文件定义到 `templates` 目录,然后通过上述 `api` 上方法进行操作即可,生成器插件默认对 `templates` 目录文件进行操作,无需再声明 `templates` 路径。
|
86
|
-
|
87
|
-
## afterForged
|
88
|
-
|
89
|
-
`onForged` 钩子函数执行完成后执行,这里主要用于进行安装依赖,Git 操作等。
|
90
|
-
|
91
|
-
默认 Modern.js 工程方案在完成文件操作后会默认执行安装依赖及 Git 初始化,Git 初次提交等,该钩子函数可以不使用。
|
92
|
-
|
93
|
-
对于自定义的生成器插件还支持 custom 类型,该类型只提供了少量最佳实践的项目配置,则需要在该钩子函数中完成安装依赖和 Git 初始化等操作。
|
94
|
-
|
95
|
-
`afterForged` 函数参数也为一个回调函数,参数为 `api` 和 `input`。
|
96
|
-
|
97
|
-
```ts
|
98
|
-
context.afterForged(
|
99
|
-
async (api: AfterForgedAPI, input: Record<string, unknown>) => {
|
100
|
-
const { packageManager } = input;
|
101
|
-
console.info('packageManager:', packageManager);
|
102
|
-
await api.install();
|
103
|
-
},
|
104
|
-
);
|
105
|
-
```
|
@@ -1,106 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 1
|
3
|
-
---
|
4
|
-
|
5
|
-
# 介绍及创建项目
|
6
|
-
|
7
|
-
## 介绍
|
8
|
-
|
9
|
-
Modern.js 提供了 Web 应用、Npm 模块等工程方案,并通过使用 `@modern-js/create` 工具可以创建工程方案的初始项目模板,初始项目模板会提供基本的代码开发环境、简单的示例代码及配置等。
|
10
|
-
|
11
|
-
Modern.js 提供的初始化模板具有通用性,能满足一些通用的项目开发需求。
|
12
|
-
|
13
|
-
当你深度使用 Modern.js 时,必然会发现每次创建的项目都会进行一些针对自身项目的特定的相似改动,比如修改示例代码、增加一些配置、开启某些功能等。
|
14
|
-
|
15
|
-
生成器插件可以帮你将这些针对个人或团队特定的改动沉淀下来,在执行 `npx @modern-js/create@latest` 只需简单的带上 `--plugin` 参数即可避免每次创建完项目都需重复性修改项目的工作。
|
16
|
-
|
17
|
-
生成器插件是在 Modern.js 提供的初始化模板项目的基础上,提供对模板进行增加、删除、修改的方法,并通过快捷的方式修改 `package.json`、`modernConfig` 配置和开启功能等操作。
|
18
|
-
|
19
|
-
## 创建项目
|
20
|
-
|
21
|
-
使用 `@modern-js/create` 可直接创建生成器插件项目:
|
22
|
-
|
23
|
-
```bash
|
24
|
-
npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
|
25
|
-
? 请选择你想创建的工程类型 Npm 模块
|
26
|
-
? 请选择项目场景 生成器插件
|
27
|
-
? 请输入生成器插件插件包名 plugin
|
28
|
-
? 请选择开发语言 TS
|
29
|
-
? 请选择包管理工具 pnpm
|
30
|
-
? 请选择插件类型 extend
|
31
|
-
? 请选择插件基础类型 Web 应用
|
32
|
-
```
|
33
|
-
|
34
|
-
创建完成后,我们可以看一下这个项目的目录结构:
|
35
|
-
|
36
|
-
```bash
|
37
|
-
.
|
38
|
-
├── .changeset
|
39
|
-
│ └── config.json
|
40
|
-
├── .eslintrc.js
|
41
|
-
├── .gitignore
|
42
|
-
├── .npmrc
|
43
|
-
├── .nvmrc
|
44
|
-
├── .prettierrc
|
45
|
-
├── README.md
|
46
|
-
├── modern.config.ts
|
47
|
-
├── package.json
|
48
|
-
├── src
|
49
|
-
│ ├── modern-app-env.d.ts
|
50
|
-
│ └── index.ts
|
51
|
-
├── templates
|
52
|
-
│ └── .gitkeep
|
53
|
-
└── tsconfig.json
|
54
|
-
```
|
55
|
-
|
56
|
-
项目是基于 Npm 模块项目创建的,核心是下面几个文件:
|
57
|
-
|
58
|
-
```bash
|
59
|
-
*
|
60
|
-
├── package.json
|
61
|
-
├── src
|
62
|
-
│ └── index.ts
|
63
|
-
├── templates
|
64
|
-
│ └── .gitkeep
|
65
|
-
```
|
66
|
-
|
67
|
-
## package.json
|
68
|
-
|
69
|
-
`package.json` 中除了正常的模块项目的字段外,提供了 meta 字段,用于描述生成器插件的信息。
|
70
|
-
|
71
|
-
生成器插件分为两类:扩展和自定义,具体分类定义可查看[类型](/guides/topic-detail/generator/plugin/category)。
|
72
|
-
|
73
|
-
```json title="package.json"
|
74
|
-
{
|
75
|
-
...,
|
76
|
-
"meta": {
|
77
|
-
"extend": "mwa"
|
78
|
-
}
|
79
|
-
}
|
80
|
-
```
|
81
|
-
|
82
|
-
## src/index.ts
|
83
|
-
|
84
|
-
该文件用于完成生成器插件的内容开发。
|
85
|
-
|
86
|
-
```js
|
87
|
-
import { IPluginContext, ForgedAPI } from '@modern-js/generator-plugin';
|
88
|
-
|
89
|
-
export default function (context: IPluginContext) {
|
90
|
-
context.onForged(async (_api: ForgedAPI, _input: Record<string, unknown>) => {
|
91
|
-
/**
|
92
|
-
* todo
|
93
|
-
*/
|
94
|
-
});
|
95
|
-
}
|
96
|
-
```
|
97
|
-
|
98
|
-
该文件默认导出一个函数,函数参数为 `context`,`context` 上提供了生成器插件支持的 API 方法,可用于实现生成器插件的逻辑。`context` 提供的能力可以参考 [context](/guides/topic-detail/generator/plugin/context)。
|
99
|
-
|
100
|
-
## templates
|
101
|
-
|
102
|
-
`templates` 目录存在当前定制化方式的模板文件,支持 [Handlebars](https://handlebarsjs.com/) 和 [EJS](https://ejs.co/) 格式,将根据模板文件后缀使用不同的渲染引擎执行渲染,如果无后缀,将会直接复制模板文件到目标目录。
|
103
|
-
|
104
|
-
如果模板文件为 `js`、`ts` 或者 `json` 文件,推荐直接使用 `.handlebars` 或者 `.ejs` 后缀,可避免项目 eslint 报错和在 Monorepo 中项目识别问题。
|
105
|
-
|
106
|
-
模板中 `.gitignore` 文件和 `.npmrc` 文件在发布 npm 包时会自动删除,需要使用 `.handlebars` 或者 `.ejs` 后缀将其保留。
|
@@ -1,33 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 3
|
3
|
-
---
|
4
|
-
|
5
|
-
# 使用
|
6
|
-
|
7
|
-
`@modern-js/create` 提供了 `--plugin` 参数用于运行生成器插件项目。
|
8
|
-
|
9
|
-
`--plugin` 支持三种格式:
|
10
|
-
|
11
|
-
## 绝对路径
|
12
|
-
|
13
|
-
适用于本地开发调试,开发完成后,在生成器插件执行 `npm run build` 构建项目,然后使用下面命令即可进行测试。
|
14
|
-
|
15
|
-
```bash
|
16
|
-
npx @modern-js/create@latest --plugin <pluginPath>
|
17
|
-
```
|
18
|
-
|
19
|
-
## 相对路径
|
20
|
-
|
21
|
-
适用于本地开发调试或者生成器插件项目和目标创建项目在同一个 Monorepo,无需发布 NPM 包,构建项目后,执行下面命令即可。
|
22
|
-
|
23
|
-
```bash
|
24
|
-
npx @modern-js/create@latest --plugin file:../<pluginPath>
|
25
|
-
```
|
26
|
-
|
27
|
-
## npm 包
|
28
|
-
|
29
|
-
适用于生成器插件发布于 npm 上,共享生成器插件场景。
|
30
|
-
|
31
|
-
```bash
|
32
|
-
npx @modern-js/create@latest --plugin <pluginPackage>
|
33
|
-
```
|