@modern-js/main-doc 2.60.6 → 2.62.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/basic-features/render/ssr.mdx +23 -1
- package/docs/en/guides/concept/entries.mdx +58 -5
- package/docs/en/guides/get-started/introduction.mdx +1 -38
- package/docs/en/guides/get-started/tech-stack.mdx +1 -1
- 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/basic-features/render/ssr.mdx +23 -1
- package/docs/zh/guides/concept/entries.mdx +52 -4
- package/docs/zh/guides/get-started/introduction.mdx +1 -36
- package/docs/zh/guides/get-started/tech-stack.mdx +1 -1
- 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,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
|
@@ -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 插件。
|