@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,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"]
|
@@ -1,116 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 3
|
3
|
-
---
|
4
|
-
|
5
|
-
# 配置参数
|
6
|
-
|
7
|
-
`new` 命令提供了 [--config](/guides/topic-detail/generator/new/option.html#-c,---config-<config>) 参数,用于提前指定执行过程中交互问题的答案。
|
8
|
-
|
9
|
-
这里将介绍不同情况下,可以在 `config` 中配置的字段及字段值。
|
10
|
-
|
11
|
-
## 通用配置
|
12
|
-
|
13
|
-
### actionType
|
14
|
-
|
15
|
-
问题:请选择你想要的操作
|
16
|
-
|
17
|
-
选项:
|
18
|
-
|
19
|
-
- 创建工程元素 -- element
|
20
|
-
|
21
|
-
- 启用可选功能 -- function
|
22
|
-
|
23
|
-
- 自动重构 -- refactor
|
24
|
-
|
25
|
-
## Web 应用
|
26
|
-
|
27
|
-
### element
|
28
|
-
|
29
|
-
问题:请选择创建元素类型
|
30
|
-
|
31
|
-
选项:
|
32
|
-
|
33
|
-
- 新建「应用入口」 -- entry
|
34
|
-
|
35
|
-
- 新建「自定义 Web Server」源码目录 -- server
|
36
|
-
|
37
|
-
### name
|
38
|
-
|
39
|
-
问题: 请填写入口名称
|
40
|
-
|
41
|
-
:::info
|
42
|
-
新建应用入口时需要该配置,该配置值为字符串类型。
|
43
|
-
:::
|
44
|
-
|
45
|
-
### function
|
46
|
-
|
47
|
-
问题:请选择功能名称
|
48
|
-
|
49
|
-
选项:
|
50
|
-
|
51
|
-
- 启用「Rspack 构建」 -- rspack
|
52
|
-
|
53
|
-
- 启用 「Tailwind CSS」 支持 -- tailwindcss
|
54
|
-
|
55
|
-
- 启用「BFF」功能 -- bff
|
56
|
-
|
57
|
-
- 启用「SSG」功能 -- ssg
|
58
|
-
|
59
|
-
- 启用「SWC 编译」-- swc
|
60
|
-
|
61
|
-
- 启用「微前端」模式 -- micro_frontend
|
62
|
-
|
63
|
-
- 启用「基于 UA 的 Polyfill」功能 -- polyfill
|
64
|
-
|
65
|
-
- 启用「全局代理」 -- proxy
|
66
|
-
|
67
|
-
|
68
|
-
### bffType
|
69
|
-
|
70
|
-
问题:请选择 BFF 类型
|
71
|
-
|
72
|
-
选项:
|
73
|
-
|
74
|
-
- 函数模式 -- func
|
75
|
-
|
76
|
-
- 框架模式 -- framework
|
77
|
-
|
78
|
-
:::info
|
79
|
-
启用 BFF 功能时需要该配置。
|
80
|
-
:::
|
81
|
-
|
82
|
-
### framework
|
83
|
-
|
84
|
-
问题:请选择运行时框架
|
85
|
-
|
86
|
-
选项:
|
87
|
-
|
88
|
-
- Express -- express
|
89
|
-
|
90
|
-
- Koa -- koa
|
91
|
-
|
92
|
-
:::info
|
93
|
-
启用 BFF 功能时需要该配置。
|
94
|
-
:::
|
95
|
-
|
96
|
-
### refactor
|
97
|
-
|
98
|
-
问题:请选择重构类型
|
99
|
-
|
100
|
-
选项:
|
101
|
-
|
102
|
-
- 使用 React Router v5 -- react_router_5
|
103
|
-
|
104
|
-
## Npm 模块
|
105
|
-
|
106
|
-
### function
|
107
|
-
|
108
|
-
问题:启用可选功能
|
109
|
-
|
110
|
-
选项:
|
111
|
-
|
112
|
-
- 启用 「Tailwind CSS」 支持 -- tailwindcss
|
113
|
-
|
114
|
-
- 启用「Storybook」 -- storybook
|
115
|
-
|
116
|
-
- 启用「Runtime API」 -- runtime_api
|