@modern-js/main-doc 0.0.0-nightly-20241104170657 → 0.0.0-nightly-20241106064312
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/docs/en/components/init-app.mdx +0 -1
- package/docs/en/components/init-rspack-app.mdx +0 -1
- package/docs/en/guides/get-started/introduction.mdx +1 -38
- 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/get-started/introduction.mdx +1 -36
- package/package.json +2 -2
- 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,88 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
sidebar_position: 2
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# Introduction
|
|
6
|
-
|
|
7
|
-
There are two types of generator plugin:
|
|
8
|
-
|
|
9
|
-
- Extension: Web App(Npm Module) = Web App(Npm Module) + Generator Plugin
|
|
10
|
-
|
|
11
|
-
- Custom: New Application(Npm Module) = Web App(Npm Module) + Generator Plugin
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
In simpler terms, extension means using the original project name of Modern.js, while custom means creating a new name.
|
|
15
|
-
|
|
16
|
-
## Identifier
|
|
17
|
-
|
|
18
|
-
The type of generator plugin is provided through the `meta` field in `package.json`:
|
|
19
|
-
|
|
20
|
-
### Extension
|
|
21
|
-
|
|
22
|
-
```json title="package.json"
|
|
23
|
-
{
|
|
24
|
-
"meta": {
|
|
25
|
-
"extend": "mwa" // module
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
### Custom
|
|
31
|
-
|
|
32
|
-
```json title="package.json"
|
|
33
|
-
{
|
|
34
|
-
"meta": {
|
|
35
|
-
"key": "new_app",
|
|
36
|
-
"name": "new App",
|
|
37
|
-
"type": "mwa" // module and custom
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
:::info
|
|
43
|
-
For custom type, the `type` field supports the `custom` value, which utilizes some best practice templates for project development provided by Modern.js, such as `.gitignore`, `.editorConfig`, etc. Other business-related code templates need to be manually provided through generator plugin.
|
|
44
|
-
:::
|
|
45
|
-
|
|
46
|
-
# Creating Initial Project
|
|
47
|
-
|
|
48
|
-
### Extension
|
|
49
|
-
|
|
50
|
-
```bash
|
|
51
|
-
npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
|
|
52
|
-
? Please select the type of project you want to create: Npm Module
|
|
53
|
-
? Please select the project scenario: Generator Plugin
|
|
54
|
-
? Please fill in the package name of the generator plugin: plugin
|
|
55
|
-
? Please select the programming language: TS
|
|
56
|
-
? Please select the package manager: pnpm
|
|
57
|
-
? Please select the type of plugin: extend
|
|
58
|
-
? Please select the base type of the plugin: Web App
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
### Custom
|
|
62
|
-
|
|
63
|
-
```bash
|
|
64
|
-
npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
|
|
65
|
-
? Please select the type of project you want to create: Npm Module
|
|
66
|
-
? Please select the project scenario: Generator Plugin
|
|
67
|
-
? Please fill in the package name of the generator plugin: plugin
|
|
68
|
-
? Please select the programming language: TS
|
|
69
|
-
? Please select the package manager: pnpm
|
|
70
|
-
? Please select the type of plugin: custom
|
|
71
|
-
? Please fill in the plugin keyword: new_app
|
|
72
|
-
? Please fill in the display name of the plugin: new App
|
|
73
|
-
? Please select the base type of the plugin: Web App
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
## Execution Order
|
|
77
|
-
|
|
78
|
-
Generator plugins support using multiple plugins at the same time, which means that multiple `--plugin` parameters are supported when executing `@modern-js/create`.
|
|
79
|
-
|
|
80
|
-
### Extension
|
|
81
|
-
|
|
82
|
-
For extension generator plugins, when executing with the declared generator plugin parameters, the corresponding lifecycle functions of the project scheme that is extended will be executed in order.
|
|
83
|
-
|
|
84
|
-
For example, if there are two generator plugins A and B, both of which extend the Modern.js application scheme. A plugin declares to add the `a.ts` file, and B plugin declares to add the `b.ts` file. When executing `npx @modern-js/create@latest --plugin A --plugin B`, and selecting the Web APP scheme, the default project files of the Web APP will be generated first. Then, the A plugin will create the `a.ts` file, and then the B plugin will generate the `b.ts` file.
|
|
85
|
-
|
|
86
|
-
### Custom
|
|
87
|
-
|
|
88
|
-
For custom generator plugins, only one plugin can be executed at a time. When declaring the `--plugin` parameter for `@modern-js/create`, a selection option for the scenario of choosing the project scheme will be added after selecting the project scheme, which is the new name defined in the `package.json`. Choosing the corresponding generator plugin for the name will execute the corresponding generator plugin logic after the default project scheme is completed. When declaring the `--plugin` parameter, the corresponding generator plugin names will be listed one by one for selection in the project scheme scenario.
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
sidebar_position: 4
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# Context
|
|
6
|
-
|
|
7
|
-
By default, generator plugins will export a function that takes `context` as a parameter. During execution, `context` will be automatically injected into the generator plugin.
|
|
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
|
-
`context` provides two types of APIs, which are used to customize input and define generator plugin lifecycle logic.
|
|
21
|
-
|
|
22
|
-
:::info
|
|
23
|
-
Only some APIs are briefly explained below. For the complete API, please refer to [Generator Plugin API](/guides/topic-detail/generator/plugin/api/context.html).
|
|
24
|
-
:::
|
|
25
|
-
|
|
26
|
-
## Customize Input
|
|
27
|
-
|
|
28
|
-
Both Modern.js Framework and Modern.js Module have default input interactions. These APIs can be used to add, modify, hide, and provide default values for these inputs.
|
|
29
|
-
|
|
30
|
-
For example:
|
|
31
|
-
|
|
32
|
-
- Add question
|
|
33
|
-
|
|
34
|
-
```ts
|
|
35
|
-
context.addInputBefore('packageManager', {
|
|
36
|
-
type: 'object',
|
|
37
|
-
properties: {
|
|
38
|
-
'username': {
|
|
39
|
-
type: 'string',
|
|
40
|
-
title: 'Username',
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
});
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
- Hide question by setting `config`
|
|
47
|
-
|
|
48
|
-
```ts
|
|
49
|
-
context.setDefaultConfig({ langauge: 'ts' });
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## Lifecycle
|
|
53
|
-
|
|
54
|
-
Generator plugin provide two lifecycle hooks to define generator plugin behavior:
|
|
55
|
-
|
|
56
|
-
- `onForged`: Lifecycle after file operations are completed.
|
|
57
|
-
|
|
58
|
-
- `afterForged`: Lifecycle after the `onForged` hook function is executed.
|
|
59
|
-
|
|
60
|
-
## `onForged`
|
|
61
|
-
|
|
62
|
-
Hook function after the Modern.js project scheme generator has completed file operations. It is used to complete file operations in the generator plugin, such as adding template files, overwriting existing files, deleting existing files, etc.
|
|
63
|
-
|
|
64
|
-
When multiple generator plugins are executed simultaneously for extension type, the `onForged` operations of the corresponding generator plugins will be executed in order according to the declared order.
|
|
65
|
-
|
|
66
|
-
The `onForged` function takes a callback function as a parameter, with `api` and `input` as arguments.
|
|
67
|
-
|
|
68
|
-
```ts
|
|
69
|
-
context.onForged(async (api: ForgedAPI, input: Record<string, unknown>) => {
|
|
70
|
-
const { language } = input;
|
|
71
|
-
api.addFile({
|
|
72
|
-
type: FileType.Text,
|
|
73
|
-
file: `src/index.${language as string}`,
|
|
74
|
-
templateFile: `index.${language as string}.handlebars`,
|
|
75
|
-
force: true,
|
|
76
|
-
});
|
|
77
|
-
})
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
The `api` object provides file operation-related methods supported by generator plugin.
|
|
81
|
-
|
|
82
|
-
`input` is the current user input, which includes the `--config` parameter definition, the default scheme interaction, and the user input defined by the generator plugin.
|
|
83
|
-
|
|
84
|
-
When adding a new file template, define the template file in the `templates` directory, and then operate on it through the `api` method above. The generator plugin defaults to operating on files in the `templates` directory, so there is no need to declare the `templates` path.
|
|
85
|
-
|
|
86
|
-
## `afterForged`
|
|
87
|
-
|
|
88
|
-
Executed after the `onForged` hook function is completed. It is mainly used to install dependencies, perform git operations, etc.
|
|
89
|
-
|
|
90
|
-
By default, Modern.js project scheme will install dependencies and initialize Git after completing file operations, and perform git initial submissions, etc. This hook function can be omitted.
|
|
91
|
-
|
|
92
|
-
For custom generator plugins that also support the `custom` type, which only provides a small number of best practice project configurations, installation of dependencies and Git initialization operations need to be completed in this hook function.
|
|
93
|
-
|
|
94
|
-
The `afterForged` function also takes a callback function as a parameter, with `api` and `input` as arguments.
|
|
95
|
-
|
|
96
|
-
```ts
|
|
97
|
-
context.afterForged(
|
|
98
|
-
async (api: AfterForgedAPI, input: Record<string, unknown>) => {
|
|
99
|
-
const { packageManager } = input;
|
|
100
|
-
console.info('packageManager:', packageManager);
|
|
101
|
-
await api.install();
|
|
102
|
-
},
|
|
103
|
-
);
|
|
104
|
-
```
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
sidebar_position: 1
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# Introduction and Project Creation
|
|
6
|
-
|
|
7
|
-
## Introduction
|
|
8
|
-
|
|
9
|
-
Modern.js provides engineering solutions such as Web App and Npm Module. By using the `@modern-js/create` tool, you can create initial project templates for engineering solutions. The initial project template provides a basic code development environment, simple example code, and configuration, etc.
|
|
10
|
-
|
|
11
|
-
The initial templates provided by Modern.js are generic and can meet some common project development needs.
|
|
12
|
-
|
|
13
|
-
When you use Modern.js deeply, you will inevitably find that each created project will make some specific similar changes for its own project, such as modifying example code, adding some configurations, enabling certain features, etc.
|
|
14
|
-
|
|
15
|
-
Generator plugin can help you to deposit these specific changes for individuals or teams. When running `npx @modern-js/create@latest`, you only need to simply add the `--plugin` parameter to avoid repetitive modification of the project after each project creation.
|
|
16
|
-
|
|
17
|
-
Generator plugin is based on the initial template projects provided by Modern.js, providing methods to add, delete, and modify templates, and modifying `package.json`, `modernConfig` configurations, and enabling features through a convenient way.
|
|
18
|
-
|
|
19
|
-
## Create Project
|
|
20
|
-
|
|
21
|
-
Use `@modern-js/create` to create a generator plugin project directly:
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
|
|
25
|
-
? Please select the type of project you want to create: Npm Module
|
|
26
|
-
? Please select the project scenario: Generator Plugin
|
|
27
|
-
? Please fill in the package name of the generator plugin: plugin
|
|
28
|
-
? Please select the programming language: TS
|
|
29
|
-
? Please select the package manager: pnpm
|
|
30
|
-
? Please select the type of plugin: extend
|
|
31
|
-
? Please select the base type of the plugin: Web App
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
After creating, we can take a look at the directory structure of this project:
|
|
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
|
-
The project is based on the Npm module project, and the core files are as follows:
|
|
57
|
-
|
|
58
|
-
```bash
|
|
59
|
-
*
|
|
60
|
-
├── package.json
|
|
61
|
-
├── src
|
|
62
|
-
│ └── index.ts
|
|
63
|
-
├── templates
|
|
64
|
-
│ └── .gitkeep
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
## package.json
|
|
68
|
-
|
|
69
|
-
In addition to the normal fields of a module project, `package.json` provides a `meta` field to describe information about the generator plugin.
|
|
70
|
-
|
|
71
|
-
Generator plugin is divided into two categories: extension and custom. For specific classification definitions, please refer to [Type](/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
|
-
This file is used to complete the content development of the generator plugin.
|
|
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
|
-
This file exports a function by default, and the function takes `context` as a parameter. The `context` object provides API methods supported by the generator plugin, which can be used to implement the logic of the generator plugin. The capabilities provided by `context` can be found in [context](/guides/topic-detail/generator/plugin/context).
|
|
99
|
-
|
|
100
|
-
## templates
|
|
101
|
-
|
|
102
|
-
The `templates` directory contains template files for the current customization method, supporting [Handlebars](https://handlebarsjs.com/) and [EJS](https://ejs.co/) formats. Different rendering engines will be used for rendering according to the template file suffix. If there is no suffix, the template file will be copied directly to the target directory.
|
|
103
|
-
|
|
104
|
-
If the template file is a `js`, `ts`, or `json` file, it is recommended to use the `.handlebars` or `.ejs` suffix directly to avoid project eslint errors and recognition issues in Monorepo projects.
|
|
105
|
-
|
|
106
|
-
The `.gitignore` and `.npmrc` files in the template will be automatically deleted when publishing the npm package, so it is necessary to use the `.handlebars` or `.ejs` suffix to keep them.
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
sidebar_position: 3
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# Usage
|
|
6
|
-
|
|
7
|
-
`@modern-js/create` provides the `--plugin` parameter to run the generator plugin project.
|
|
8
|
-
|
|
9
|
-
`--plugin` supports three formats:
|
|
10
|
-
|
|
11
|
-
## Absolute path
|
|
12
|
-
|
|
13
|
-
Suitable for local development and debugging. After development is completed, build the project by running `npm run build` in the generator plugin project, and then use the following command for testing:
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
npx @modern-js/create@latest --plugin <pluginPath>
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Relative path
|
|
20
|
-
|
|
21
|
-
Suitable for local development and debugging or when the generator plugin project and the target project to be created are in the same Monorepo and there is no need to publish an NPM package. After building the generator plugin project, use the following command:
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npx @modern-js/create@latest --plugin file:../<pluginPath>
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
## NPM package
|
|
28
|
-
|
|
29
|
-
Suitable for scenarios where the generator project is published on npm for sharing.
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
npx @modern-js/create@latest --plugin <pluginPackage>
|
|
33
|
-
```
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
["use", "option", "config"]
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
sidebar_position: 3
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# 配置参数
|
|
6
|
-
|
|
7
|
-
`@modern-js/create` 提供了 [--config](/guides/topic-detail/generator/create/option.html#-c,---config-<config>) 参数,用于提前指定执行过程中交互问题的答案。
|
|
8
|
-
|
|
9
|
-
这里将介绍不同情况下,可以在 `config` 中配置的字段及字段值。
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
## 通用配置
|
|
13
|
-
|
|
14
|
-
### solution
|
|
15
|
-
|
|
16
|
-
问题:请选择你想创建的工程类型
|
|
17
|
-
|
|
18
|
-
选项:
|
|
19
|
-
|
|
20
|
-
- Web 应用 -- mwa
|
|
21
|
-
|
|
22
|
-
- Npm 模块 -- module
|
|
23
|
-
|
|
24
|
-
- 文档站 -- doc
|
|
25
|
-
|
|
26
|
-
### scenes
|
|
27
|
-
|
|
28
|
-
问题:请选择项目场景
|
|
29
|
-
|
|
30
|
-
选项:
|
|
31
|
-
|
|
32
|
-
使用自定义生成器插件时的插件关键字列表。
|
|
33
|
-
|
|
34
|
-
## Web 应用
|
|
35
|
-
|
|
36
|
-
import LanguageConfig from '@site-docs/components/language-config';
|
|
37
|
-
|
|
38
|
-
<LanguageConfig />
|
|
39
|
-
|
|
40
|
-
import PackageManager from '@site-docs/components/package-manager';
|
|
41
|
-
|
|
42
|
-
<PackageManager />
|
|
43
|
-
|
|
44
|
-
## Npm 模块
|
|
45
|
-
|
|
46
|
-
### packageName
|
|
47
|
-
|
|
48
|
-
问题:请填写项目名称
|
|
49
|
-
|
|
50
|
-
:::info
|
|
51
|
-
Npm 模块的 `package.json` 的 name 字段值,该配置值为字符串类型。
|
|
52
|
-
:::
|
|
53
|
-
|
|
54
|
-
<LanguageConfig />
|
|
55
|
-
|
|
56
|
-
<PackageManager />
|
|
57
|
-
|
|
58
|
-
## 文档站
|
|
59
|
-
|
|
60
|
-
<PackageManager />
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
sidebar_position: 2
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# CLI 参数
|
|
6
|
-
|
|
7
|
-
`@modern-js/create` 提供了很多配置参数用于配置其执行过程中的行为,可以通过 `--help` 参数进行查看:
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npx @modern-js/create@latest --help
|
|
11
|
-
|
|
12
|
-
Usage: npx @modern-js/create@latest [projectDir]
|
|
13
|
-
|
|
14
|
-
创建 Modern.js 工程方案
|
|
15
|
-
|
|
16
|
-
Options:
|
|
17
|
-
--version 当前 create 工具版本号
|
|
18
|
-
--lang <lang> 设置 create 工具语言(zh 或者 en)
|
|
19
|
-
-c, --config <config> 创建项目默认配置(JSON 字符串) (default: "{}")
|
|
20
|
-
-d,--debug 开启 Debug 模式,打印调试日志信息 (default: false)
|
|
21
|
-
--mwa 一键创建 Web 应用(使用默认配置) (default: false)
|
|
22
|
-
--module 一键创建 Module 应用(使用默认配置) (default: false)
|
|
23
|
-
--generator <generator> 使用自定义生成器
|
|
24
|
-
-p, --plugin <plugin> 使用生成器插件创建新的工程方案类型或定制化 Modern.js 工程方案 (default: [])
|
|
25
|
-
--dist-tag <distTag> 生成项目时生成器使用特殊的 npm Tag (default: "")
|
|
26
|
-
--packages <packages> 创建项目指定特定依赖版本信息 (default: "{}")
|
|
27
|
-
--registry <registry> 在创建过程中定制 npm Registry (default: "")
|
|
28
|
-
--no-need-install 无需安装依赖
|
|
29
|
-
-h, --help display help for command
|
|
30
|
-
|
|
31
|
-
Commands:
|
|
32
|
-
clean-cache 清除本地生成器缓存
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
下面将针对这些参数做详细介绍:
|
|
36
|
-
|
|
37
|
-
## [projectDir]
|
|
38
|
-
|
|
39
|
-
项目目录名称。
|
|
40
|
-
|
|
41
|
-
执行 `@modern-js/create` 时,默认会在当前目录创建 `projectDir` 文件夹,并在该文件夹下初始化项目。该参数为空时,将会在当前目录直接生成初始化项目。
|
|
42
|
-
|
|
43
|
-
:::info
|
|
44
|
-
如果 `projectDir` 所在目录内容不为空,将会提示是否继续创建,推荐在空目录下进行项目初始化操作。
|
|
45
|
-
:::
|
|
46
|
-
|
|
47
|
-
## --version
|
|
48
|
-
|
|
49
|
-
获取 `@modern-js/create` 工具版本。
|
|
50
|
-
|
|
51
|
-
```bash
|
|
52
|
-
npx @modern-js/create@latest --version
|
|
53
|
-
|
|
54
|
-
[INFO] @modern-js/create v2.21.1
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
## --lang \<lang>
|
|
58
|
-
|
|
59
|
-
执行执行语言,支持 `zh` 和 `en`。
|
|
60
|
-
|
|
61
|
-
默认情况下,`@modern-js/create` 会自动识别用户的系统语言,选择使用中文或者英文,如果识别失败或者不符合使用习惯,可以使用该参数手动指定。
|
|
62
|
-
|
|
63
|
-
## -c, --config \<config>
|
|
64
|
-
|
|
65
|
-
指定项目默认配置。
|
|
66
|
-
|
|
67
|
-
默认情况下,`@modern-js/create` 在执行过程中会出现选择语言、包管理工具等交互问题,当需要提前指定这些配置内容时,可以通过该字段传入。
|
|
68
|
-
|
|
69
|
-
该字段为 JSON 字符串,例如需指定包管理工具时:
|
|
70
|
-
|
|
71
|
-
```bash
|
|
72
|
-
npx @modern-js/create@latest --config '{"packageManager": "pnpm"}'
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
`config` 支持的参数可查看[配置参数](/guides/topic-detail/generator/create/config.html)。
|
|
76
|
-
|
|
77
|
-
## -d,--debug
|
|
78
|
-
|
|
79
|
-
展示调试日志。
|
|
80
|
-
|
|
81
|
-
当在使用过程中遇到问题时,可以使用该参数显示调试日志,方便快速定位问题位置及对问题进行排查。
|
|
82
|
-
|
|
83
|
-
## --mwa
|
|
84
|
-
|
|
85
|
-
快速创建 Web 应用项目。
|
|
86
|
-
|
|
87
|
-
## --module
|
|
88
|
-
|
|
89
|
-
快速创建 Npm 模块项目。
|
|
90
|
-
|
|
91
|
-
## -p, --plugin \<plugin>
|
|
92
|
-
|
|
93
|
-
指定生成器插件。
|
|
94
|
-
|
|
95
|
-
`@modern-js/create` 支持使用生成器插件定制 Modern.js 默认的工程方案类型或者添加工程方案类型场景,详情可查看[开发生成器插件](/guides/topic-detail/generator/plugin/structure.html)。
|
|
96
|
-
|
|
97
|
-
## --generator \<generator>
|
|
98
|
-
|
|
99
|
-
指定微生成器。
|
|
100
|
-
|
|
101
|
-
<!-- TODO 详情可查看[开发微生成器]-->
|
|
102
|
-
`@modern-js/create` 支持使用微生成器完全定制项目生成流程。
|
|
103
|
-
|
|
104
|
-
## --dist-tag \<distTag>
|
|
105
|
-
|
|
106
|
-
指定生成器及 Modern.js 相关依赖版本。
|
|
107
|
-
|
|
108
|
-
`@modern-js/create` 执行过程中会执行更小的微生成器,默认会使用 `latest` 的微生成器版本,使用该参数可以指定执行的微生成器的版本号和对应的安装 Modern.js 相关依赖的版本。
|
|
109
|
-
|
|
110
|
-
比如使用 `next` 版本:
|
|
111
|
-
|
|
112
|
-
```bash
|
|
113
|
-
npx @modern-js/create@next --dist-tag next
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
## --packages \<packages>
|
|
117
|
-
|
|
118
|
-
创建项目是指定特定包版本依赖。
|
|
119
|
-
|
|
120
|
-
在创建项目时如果有需要指定特定包版本,可以使用该参数。该参数会在项目根目录的 `package.json` 中配置 `pnpm.overrides`(包管理工具选择 pnpm) 或者 `resolutions` 锁定包版本号。
|
|
121
|
-
|
|
122
|
-
该参数值为 JSON 字符串。
|
|
123
|
-
|
|
124
|
-
例如指定 react 版本:
|
|
125
|
-
|
|
126
|
-
```bash
|
|
127
|
-
npx @modern-js/create@latest --packages '{"react":"^17"}'
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
## --registry \<registry>
|
|
131
|
-
|
|
132
|
-
指定执行子生成器和获取项目依赖版本的 npm registry。
|
|
133
|
-
|
|
134
|
-
## --no-need-install
|
|
135
|
-
|
|
136
|
-
忽略自动安装依赖。
|
|
137
|
-
|
|
138
|
-
默认情况下,`@modern-js/create` 在创建项目完成后会自动安装依赖,使用该参数可以忽略安装依赖步骤。
|
|
139
|
-
|
|
140
|
-
## clean-cache
|
|
141
|
-
|
|
142
|
-
`@modern-js/create` 默认会在执行机器的 tmp 目录生成子生成器缓存用于加快生成器执行速度,在需要刷新缓存或者缓存出现问题时可以使用该命令删除缓存。
|
|
143
|
-
|
|
144
|
-
```bash
|
|
145
|
-
npx @modern-js/create@latest clean-cache
|
|
146
|
-
```
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
sidebar_position: 1
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# 使用
|
|
6
|
-
|
|
7
|
-
Modern.js 提供了 `@modern-js/create` 工具用于创建 Modern.js 提供的工程方案项目,例如 [Web 应用](https://modernjs.dev/)、[Npm 模块](https://modernjs.dev/module-tools)。
|
|
8
|
-
|
|
9
|
-
下面将介绍 `@modern-js/create` 的使用姿势。
|
|
10
|
-
|
|
11
|
-
## 环境准备
|
|
12
|
-
|
|
13
|
-
import Prerequisites from "@site-docs/components/prerequisites"
|
|
14
|
-
|
|
15
|
-
<Prerequisites />
|
|
16
|
-
|
|
17
|
-
## 使用 `@modern-js/create` 创建项目
|
|
18
|
-
|
|
19
|
-
不需要全局安装 `@modern-js/create`,直接使用 npx 执行即可:
|
|
20
|
-
|
|
21
|
-
```bash
|
|
22
|
-
npx @modern-js/create@latest [projectDir]
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
:::info
|
|
26
|
-
`[projectDir]` 为项目目录名称,不填写将会在当前目录创建项目。
|
|
27
|
-
:::
|
|
28
|
-
|
|
29
|
-
执行过程中需要根据提示完成交互,创建符合需求的项目。
|
|
30
|
-
|
|
31
|
-
### 创建 Web 应用项目
|
|
32
|
-
|
|
33
|
-
```bash
|
|
34
|
-
npx @modern-js/create@latest web-app
|
|
35
|
-
? 请选择你想创建的工程类型 Web 应用
|
|
36
|
-
? 请选择开发语言 TS
|
|
37
|
-
? 请选择包管理工具 pnpm
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
### 创建 Npm 模块项目
|
|
41
|
-
|
|
42
|
-
```bash
|
|
43
|
-
npx @modern-js/create@latest npm-module
|
|
44
|
-
? 请选择你想创建的工程类型 Npm 模块
|
|
45
|
-
? 请填写项目名称 npm-module
|
|
46
|
-
? 请选择开发语言 TS
|
|
47
|
-
? 请选择包管理工具 pnpm
|
|
48
|
-
```
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
["use", "option", "config"]
|