@modern-js/main-doc 2.60.6 → 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/init-app.mdx +0 -1
- package/docs/en/components/init-rspack-app.mdx +0 -1
- 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/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/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,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
|
-
```
|