@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
package/src/i18n/enUS.ts
CHANGED
@@ -23,13 +23,6 @@ export const EN_US = {
|
|
23
23
|
featureDesc6:
|
24
24
|
'Launch with zero configuration, then everything is configurable.',
|
25
25
|
|
26
|
-
// Solutions
|
27
|
-
solutions: 'Solutions',
|
28
|
-
solutionsDesc1: 'A progressive React framework for web development.',
|
29
|
-
solutionsDesc2: 'A powerful solution for npm package development.',
|
30
|
-
solutionsDesc3: 'An Rspack-based build tool for web development.',
|
31
|
-
solutionsDesc4: 'A fast Rspack-based static site generator',
|
32
|
-
|
33
26
|
// Footer
|
34
27
|
guide: 'Guide',
|
35
28
|
topic: 'Topic',
|
package/src/i18n/zhCN.ts
CHANGED
@@ -23,13 +23,6 @@ export const ZH_CN: Record<keyof typeof EN_US, string> = {
|
|
23
23
|
feature6: '易于配置',
|
24
24
|
featureDesc6: '以零配置启动,然后一切皆可配置。',
|
25
25
|
|
26
|
-
// Solutions
|
27
|
-
solutions: '解决方案',
|
28
|
-
solutionsDesc1: '基于 React 的渐进式 Web 开发框架。',
|
29
|
-
solutionsDesc2: '简单、高性能的 npm 包开发方案。',
|
30
|
-
solutionsDesc3: '基于 Rspack 的 Web 构建工具。',
|
31
|
-
solutionsDesc4: '基于 Rspack 的静态站点生成器。',
|
32
|
-
|
33
26
|
// Footer
|
34
27
|
guide: '指南',
|
35
28
|
topic: '专题',
|
package/src/pages/index.tsx
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import clsx from 'clsx';
|
2
2
|
import { useEffect } from 'react';
|
3
|
-
import { Helmet,
|
3
|
+
import { Helmet, useLocation } from 'rspress/runtime';
|
4
4
|
import ContentCard from '../components/ContentCard';
|
5
5
|
import { FeatureLayout } from '../components/FeatureLayout';
|
6
6
|
import Footer from '../components/Footer';
|
@@ -92,22 +92,6 @@ export default function Home() {
|
|
92
92
|
},
|
93
93
|
];
|
94
94
|
|
95
|
-
const lang = useLang();
|
96
|
-
const solutions = [
|
97
|
-
{
|
98
|
-
id: 'framework',
|
99
|
-
title: 'Modern.js Framework',
|
100
|
-
href: useUrl('/guides/get-started/introduction'),
|
101
|
-
desc: t('solutionsDesc1'),
|
102
|
-
},
|
103
|
-
{
|
104
|
-
id: 'module',
|
105
|
-
title: 'Modern.js Module',
|
106
|
-
href: `https://modernjs.dev/module-tools${lang === 'en' ? '/en' : ''}`,
|
107
|
-
desc: t('solutionsDesc2'),
|
108
|
-
},
|
109
|
-
];
|
110
|
-
|
111
95
|
return (
|
112
96
|
<div>
|
113
97
|
<Helmet>
|
@@ -122,9 +106,9 @@ export default function Home() {
|
|
122
106
|
<HomepageHeader />
|
123
107
|
<main className={styles['homepage-main']}>
|
124
108
|
<FeatureLayout>
|
125
|
-
<SecondaryTitle>
|
109
|
+
<SecondaryTitle>Features</SecondaryTitle>
|
126
110
|
<div className={styles.cardContainer}>
|
127
|
-
{
|
111
|
+
{features.map(card => (
|
128
112
|
<ContentCard
|
129
113
|
key={card.id}
|
130
114
|
title={card.title}
|
@@ -145,19 +129,6 @@ export default function Home() {
|
|
145
129
|
</h1>
|
146
130
|
</FeatureLayout>
|
147
131
|
|
148
|
-
<FeatureLayout>
|
149
|
-
<SecondaryTitle>Modern.js Framework</SecondaryTitle>
|
150
|
-
<div className={styles.cardContainer}>
|
151
|
-
{features.map(card => (
|
152
|
-
<ContentCard
|
153
|
-
key={card.id}
|
154
|
-
title={card.title}
|
155
|
-
desc={card.desc}
|
156
|
-
href={card.href}
|
157
|
-
/>
|
158
|
-
))}
|
159
|
-
</div>
|
160
|
-
</FeatureLayout>
|
161
132
|
<Footer />
|
162
133
|
</main>
|
163
134
|
</div>
|
@@ -1 +0,0 @@
|
|
1
|
-
["use", "option", "config"]
|
@@ -1,59 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 3
|
3
|
-
---
|
4
|
-
|
5
|
-
# Configuration Parameters
|
6
|
-
|
7
|
-
`@modern-js/create` provides the [--config](/guides/topic-detail/generator/create/option.html#-c,---config-<config>) parameter, which is used to specify the answers to interactive questions in advance during the execution process.
|
8
|
-
|
9
|
-
Here, we will introduce the fields and field values that can be configured in the `config` under different scenario.
|
10
|
-
|
11
|
-
## General Configuration
|
12
|
-
|
13
|
-
### solution
|
14
|
-
|
15
|
-
Question: Please select the type of project you want to create.
|
16
|
-
|
17
|
-
Options:
|
18
|
-
|
19
|
-
- Web App -- mwa
|
20
|
-
|
21
|
-
- Npm Module -- module
|
22
|
-
|
23
|
-
- Doc Site -- doc
|
24
|
-
|
25
|
-
### scenes
|
26
|
-
|
27
|
-
Question: Please select the project scenario.
|
28
|
-
|
29
|
-
Options:
|
30
|
-
|
31
|
-
List of plugin keywords when using custom generator plugins.
|
32
|
-
|
33
|
-
## Web App
|
34
|
-
|
35
|
-
import LanguageConfig from '@site-docs-en/components/language-config';
|
36
|
-
|
37
|
-
<LanguageConfig />
|
38
|
-
|
39
|
-
import PackageManager from '@site-docs-en/components/package-manager';
|
40
|
-
|
41
|
-
<PackageManager />
|
42
|
-
|
43
|
-
## Npm Module
|
44
|
-
|
45
|
-
### packageName
|
46
|
-
|
47
|
-
Question: Please fill in the project name.
|
48
|
-
|
49
|
-
:::info
|
50
|
-
The value of the `name` field in the `package.json` file of the Npm module, which is a string type.
|
51
|
-
:::
|
52
|
-
|
53
|
-
<LanguageConfig />
|
54
|
-
|
55
|
-
<PackageManager />
|
56
|
-
|
57
|
-
## Modern Doc
|
58
|
-
|
59
|
-
<PackageManager />
|
@@ -1,146 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 2
|
3
|
-
---
|
4
|
-
|
5
|
-
# CLI Options
|
6
|
-
|
7
|
-
`@modern-js/create` provides many configuration parameters to configure its behavior during execution, which can be viewed using the `--help` parameter:
|
8
|
-
|
9
|
-
```bash
|
10
|
-
npx @modern-js/create@latest --help
|
11
|
-
|
12
|
-
Usage: npx @modern-js/create@latest [projectDir]
|
13
|
-
|
14
|
-
create Modern.js solution project
|
15
|
-
|
16
|
-
Options:
|
17
|
-
--version show create tools version
|
18
|
-
--lang <lang> set create tools language(en or zh)
|
19
|
-
-c, --config <config> set default project config(json string) (default: "{}")
|
20
|
-
-d,--debug using debug mode to log something (default: false)
|
21
|
-
--mwa create mwa application using default config (default: false)
|
22
|
-
--module create module application using default config (default: false)
|
23
|
-
--generator <generator> run custom generator
|
24
|
-
-p, --plugin <plugin> use generator plugin to create new solution or customize Modern.js solution (default: [])
|
25
|
-
--dist-tag <distTag> use specified tag version for it\'s generator (default: "")
|
26
|
-
--packages <packages> set project specific dependency version information (default: "{}")
|
27
|
-
--registry <registry> set npm registry url to run npm command (default: "")
|
28
|
-
--no-need-install not run install command
|
29
|
-
-h, --help display help for command
|
30
|
-
|
31
|
-
Commands:
|
32
|
-
clean-cache clean locale generator cache
|
33
|
-
```
|
34
|
-
|
35
|
-
The following will provide a detailed introduction to these parameters:
|
36
|
-
|
37
|
-
## [projectDir]
|
38
|
-
|
39
|
-
The project directory name.
|
40
|
-
|
41
|
-
When executing `@modern-js/create`, a `projectDir` folder will be created in the current directory by default, and the project will be initialized in this folder. If this parameter is empty, the initialization project will be directly generated in the current directory.
|
42
|
-
|
43
|
-
:::info
|
44
|
-
If the contents of the directory where `projectDir` is located are not empty, a prompt will be given whether to continue creating. It is recommended to perform project initialization operations in an empty directory.
|
45
|
-
:::
|
46
|
-
|
47
|
-
## --version
|
48
|
-
|
49
|
-
Get the version of the `@modern-js/create` tool.
|
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
|
-
The execution language, supports `zh` and `en`.
|
60
|
-
|
61
|
-
By default, `@modern-js/create` will automatically identify the user's system language and choose to use Chinese or English. If the identification fails or does not meet usage habits, you can manually specify it using this parameter.
|
62
|
-
|
63
|
-
## -c, --config \<config>
|
64
|
-
|
65
|
-
Specify the default project configuration.
|
66
|
-
|
67
|
-
By default, `@modern-js/create` will prompt for interactive questions such as language selection and package managers during the execution process. When it is necessary to specify these configuration contents in advance, they can be passed in through this field.
|
68
|
-
|
69
|
-
This field is a JSON string. For example, when specifying a package manager:
|
70
|
-
|
71
|
-
```bash
|
72
|
-
npx @modern-js/create@latest --config '{"packageManager": "pnpm"}'
|
73
|
-
```
|
74
|
-
|
75
|
-
Supported parameters for `config` can be found at [Configuration Parameters](/guides/topic-detail/generator/create/config.html)。
|
76
|
-
|
77
|
-
## -d,--debug
|
78
|
-
|
79
|
-
Display debug logs.
|
80
|
-
|
81
|
-
When encountering problems during use, you can use this parameter to display debug logs, which is convenient for quickly locating the problem position and troubleshooting.
|
82
|
-
|
83
|
-
## --mwa
|
84
|
-
|
85
|
-
Quickly create a Web App project.
|
86
|
-
|
87
|
-
## --module
|
88
|
-
|
89
|
-
Quickly create a Npm Module project.
|
90
|
-
|
91
|
-
## -p, --plugin \<plugin>
|
92
|
-
|
93
|
-
Specify a generator plugin.
|
94
|
-
|
95
|
-
`@modern-js/create` supports customizing the default project solution type of Modern.js or adding project solution type scenarios using generator plugin. For details, please refer to [Developing Generator Plugin](/guides/topic-detail/generator/plugin/structure.html).
|
96
|
-
|
97
|
-
## --generator \<generator>
|
98
|
-
|
99
|
-
Specify a micro-generator.
|
100
|
-
|
101
|
-
<!-- TODO 详情可查看[开发微生成器]-->
|
102
|
-
`@modern-js/create` supports completely customizing the project generation process using micro-generator.
|
103
|
-
|
104
|
-
## --dist-tag \<distTag>
|
105
|
-
|
106
|
-
Specify the version of the generator and Modern.js-related dependencies.
|
107
|
-
|
108
|
-
During the execution of `@modern-js/create`, a smaller micro-generator will be executed by default, and the `latest` version of the micro-generator will be used by default. This parameter can be used to specify the version number of the micro-generator to be executed and the version of the installed Modern.js-related dependencies.
|
109
|
-
|
110
|
-
For example, use the `next` version:
|
111
|
-
|
112
|
-
```bash
|
113
|
-
npx @modern-js/create@next --dist-tag next
|
114
|
-
```
|
115
|
-
|
116
|
-
## --packages \<packages>
|
117
|
-
|
118
|
-
Specify specific package version dependencies when creating a project.
|
119
|
-
|
120
|
-
If you need to specify a specific package version when creating a project, you can use this parameter. This parameter will configure `pnpm.overrides` (if the package manager is pnpm) or `resolutions` to lock the package version number in the `package.json` file in the project root directory.
|
121
|
-
|
122
|
-
The parameter value is a JSON string.
|
123
|
-
|
124
|
-
For example, specify the react version:
|
125
|
-
|
126
|
-
```bash
|
127
|
-
npx @modern-js/create@latest --packages '{"react":"^17"}'
|
128
|
-
```
|
129
|
-
|
130
|
-
## --registry \<registry>
|
131
|
-
|
132
|
-
Specify the sub-generator to execute and the npm registry to fetch project dependencies version.
|
133
|
-
|
134
|
-
## --no-need-install
|
135
|
-
|
136
|
-
Ignore automatic installation of dependencies.
|
137
|
-
|
138
|
-
By default, `@modern-js/create` will automatically install dependencies after creating a project. Using this parameter can ignore the installation of dependencies.
|
139
|
-
|
140
|
-
## clean-cache
|
141
|
-
|
142
|
-
The `@modern-js/create` command generates sub-generators cache in the tmp directory of the execution machine by default to speed up the generator execution. This command can be used to delete the cache when it needs to be refreshed or when there are problems with the cache.
|
143
|
-
|
144
|
-
```bash
|
145
|
-
npx @modern-js/create@latest clean-cache
|
146
|
-
```
|
@@ -1,48 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 1
|
3
|
-
---
|
4
|
-
|
5
|
-
# Usage
|
6
|
-
|
7
|
-
Modern.js provides `@modern-js/create` tool for creating project templates provided by Modern.js, including [Web App](https://modernjs.dev/), [Npm Module](https://modernjs.dev/module-tools).
|
8
|
-
|
9
|
-
The following will introduce how to use `@modern-js/create`.
|
10
|
-
|
11
|
-
## Environment Preparation
|
12
|
-
|
13
|
-
import Prerequisites from "@site-docs-en/components/prerequisites"
|
14
|
-
|
15
|
-
<Prerequisites />
|
16
|
-
|
17
|
-
## Create a Project with `@modern-js/create`
|
18
|
-
|
19
|
-
You do not need to install `@modern-js/create` globally, just use npx to run it:
|
20
|
-
|
21
|
-
```bash
|
22
|
-
npx @modern-js/create@latest [projectDir]
|
23
|
-
```
|
24
|
-
|
25
|
-
:::info
|
26
|
-
`[projectDir]` is the project directory name. If it is not filled in, the project will be created in the current directory.
|
27
|
-
:::
|
28
|
-
|
29
|
-
During the execution, complete the interaction according to the prompt to create a project that meets your requirements.
|
30
|
-
|
31
|
-
### Create an Web APP Project
|
32
|
-
|
33
|
-
```bash
|
34
|
-
npx @modern-js/create@latest web-app
|
35
|
-
? Please select the type of project you want to create: Web App
|
36
|
-
? Please select the programming language: TS
|
37
|
-
? Please select the package manager: pnpm
|
38
|
-
```
|
39
|
-
|
40
|
-
### Create an Npm Module Project
|
41
|
-
|
42
|
-
```bash
|
43
|
-
npx @modern-js/create@latest npm-module
|
44
|
-
? Please select the type of project you want to create: Npm Module
|
45
|
-
? Please fill in the project name: npm-module
|
46
|
-
? Please select the programming language: TS
|
47
|
-
? Please select the package manager: pnpm
|
48
|
-
```
|
@@ -1 +0,0 @@
|
|
1
|
-
["use", "option", "config"]
|
@@ -1,115 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 3
|
3
|
-
---
|
4
|
-
|
5
|
-
# Configuration Parameters
|
6
|
-
|
7
|
-
The `new` command provides the [--config](/guides/topic-detail/generator/new/option.html#-c,---config-<config>) parameter, which is used to specify the answers to interactive questions in advance during the execution process.
|
8
|
-
|
9
|
-
Here, we will introduce the fields and field values that can be configured in the `config` under different scenario.
|
10
|
-
|
11
|
-
## General Configuration
|
12
|
-
|
13
|
-
### actionType
|
14
|
-
|
15
|
-
Question: Please select the operation you wants.
|
16
|
-
|
17
|
-
Options:
|
18
|
-
|
19
|
-
- Create project element -- element
|
20
|
-
|
21
|
-
- Enable features -- function
|
22
|
-
|
23
|
-
- Automatic refactors -- refactor
|
24
|
-
|
25
|
-
## Web App
|
26
|
-
|
27
|
-
### element
|
28
|
-
|
29
|
-
Question: Please select the type of element to create.
|
30
|
-
|
31
|
-
Options:
|
32
|
-
|
33
|
-
- New "entry" -- entry
|
34
|
-
|
35
|
-
- New "Custom Web Server" source code directory -- server
|
36
|
-
|
37
|
-
### name
|
38
|
-
|
39
|
-
Question: Please fill in the entry name.
|
40
|
-
|
41
|
-
:::info
|
42
|
-
This configuration is required when creating a new application entry, and the configuration value is a string.
|
43
|
-
:::
|
44
|
-
|
45
|
-
### function
|
46
|
-
|
47
|
-
Question: Please select the feature name.
|
48
|
-
|
49
|
-
Options:
|
50
|
-
|
51
|
-
- Enable Rspack Build -- rspack
|
52
|
-
|
53
|
-
- Enable Tailwind CSS -- tailwindcss
|
54
|
-
|
55
|
-
- Enable BFF -- bff
|
56
|
-
|
57
|
-
- Enable SSG -- ssg
|
58
|
-
|
59
|
-
- Enable SWC Compile -- swc
|
60
|
-
|
61
|
-
- Enable Micro Frontend -- micro_frontend
|
62
|
-
|
63
|
-
- Enable UA-based Polyfill Feature -- polyfill
|
64
|
-
|
65
|
-
- Enable Global Proxy -- proxy
|
66
|
-
|
67
|
-
### bffType
|
68
|
-
|
69
|
-
Question: Please select the BFF type
|
70
|
-
|
71
|
-
Options:
|
72
|
-
|
73
|
-
- Function -- func
|
74
|
-
|
75
|
-
- Framework -- framework
|
76
|
-
|
77
|
-
:::info
|
78
|
-
This configuration is required when enabling the BFF function.
|
79
|
-
:::
|
80
|
-
|
81
|
-
### framework
|
82
|
-
|
83
|
-
Question: Please select the framework.
|
84
|
-
|
85
|
-
Options:
|
86
|
-
|
87
|
-
- Express -- express
|
88
|
-
|
89
|
-
- Koa -- koa
|
90
|
-
|
91
|
-
:::info
|
92
|
-
This configuration is required when enabling the BFF function.
|
93
|
-
:::
|
94
|
-
|
95
|
-
### refactor
|
96
|
-
|
97
|
-
Question: Please select the type of refactoring.
|
98
|
-
|
99
|
-
Options:
|
100
|
-
|
101
|
-
- Use React Router v5 -- react_router_5
|
102
|
-
|
103
|
-
## Npm Module
|
104
|
-
|
105
|
-
### function
|
106
|
-
|
107
|
-
Question: Please select the feature name.
|
108
|
-
|
109
|
-
Options:
|
110
|
-
|
111
|
-
- Enable Tailwind CSS -- tailwindcss
|
112
|
-
|
113
|
-
- Enable Storybook -- storybook
|
114
|
-
|
115
|
-
- Enable Runtime API -- runtime_api
|
@@ -1,67 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 2
|
3
|
-
---
|
4
|
-
|
5
|
-
# CLI Parameters
|
6
|
-
|
7
|
-
The `new` command provides many configuration parameters to configure its behavior during execution, which can be viewed using the `--help` parameter:
|
8
|
-
|
9
|
-
```bash
|
10
|
-
npm run new --help
|
11
|
-
|
12
|
-
Usage: modern new [options]
|
13
|
-
|
14
|
-
enable optional features or add a new entry
|
15
|
-
|
16
|
-
Options:
|
17
|
-
--lang <lang> set new command language(en or zh)
|
18
|
-
-c, --config <config> set default generator config(json string)
|
19
|
-
-d, --debug using debug mode to log something (default: false)
|
20
|
-
--dist-tag <tag> use specified tag version for it's generator
|
21
|
-
--registry <registry> set npm registry url to run npm command
|
22
|
-
-h, --help display help for command
|
23
|
-
```
|
24
|
-
|
25
|
-
The following will provide a detailed introduction to these parameters:
|
26
|
-
|
27
|
-
## --lang \<lang>
|
28
|
-
|
29
|
-
The language used for execution, supports `zh` and `en`.
|
30
|
-
|
31
|
-
By default, the `new` command will automatically recognize the user's system language and choose to use Chinese or English. If recognition fails or does not meet usage habits, this parameter can be used to manually specify it.
|
32
|
-
|
33
|
-
## -c, --config \<config>
|
34
|
-
|
35
|
-
Specify the default configuration for the project.
|
36
|
-
|
37
|
-
By default, the `new` command will prompt interactive questions during the execution process for selecting operation types, enabling features, etc. When it is necessary to specify these configuration contents in advance, they can be passed in through this field.
|
38
|
-
|
39
|
-
This field is a JSON string. For example, to specify the BFF framework:
|
40
|
-
|
41
|
-
```bash
|
42
|
-
npm run new --config '{"framework": "express"}'
|
43
|
-
```
|
44
|
-
|
45
|
-
The parameters supported by `config` can be viewed in [Configuration Parameters](/guides/topic-detail/generator/new/config.html)。
|
46
|
-
|
47
|
-
## -d,--debug
|
48
|
-
|
49
|
-
Displays debug logs.
|
50
|
-
|
51
|
-
When encountering problems during use, this parameter can be used to display debug logs, which is convenient for quickly locating the problem location and troubleshooting the problem.
|
52
|
-
|
53
|
-
## --registry \<registry>
|
54
|
-
|
55
|
-
Specify the sub-generator to execute and the npm registry to fetch project dependencies version.
|
56
|
-
|
57
|
-
## --dist-tag \<distTag>
|
58
|
-
|
59
|
-
Specify the generator version.
|
60
|
-
|
61
|
-
During the execution process of the `new` command, smaller micro-generator will be executed by default, and the latest micro-generator version will be used by default. This parameter can be used to specify the version number of the micro-generator to be executed.
|
62
|
-
|
63
|
-
For example, using the `next` version:
|
64
|
-
|
65
|
-
```bash
|
66
|
-
npm run new --dist-tag next
|
67
|
-
```
|
@@ -1,75 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 1
|
3
|
-
---
|
4
|
-
|
5
|
-
# Usage
|
6
|
-
|
7
|
-
In Web App, Npm Module projects, we provide the `new` command to create project elements, enable features and create sub-project.
|
8
|
-
|
9
|
-
## Web App
|
10
|
-
|
11
|
-
Web App projects use the `new` command provided by `@modern-js/app-tools`.
|
12
|
-
|
13
|
-
|
14
|
-
The `new` command provides three types of operations:
|
15
|
-
|
16
|
-
- Create project elements
|
17
|
-
|
18
|
-
- Enable optional features
|
19
|
-
|
20
|
-
- Automatic refactoring
|
21
|
-
|
22
|
-
Each type of operation provides a corresponding list of supported options, which can be selected based on the project situation.
|
23
|
-
|
24
|
-
For example:
|
25
|
-
|
26
|
-
Create a new application entry:
|
27
|
-
|
28
|
-
```bash
|
29
|
-
npm run new
|
30
|
-
? Please select the operation you want: Create Element
|
31
|
-
? Please select the type of element to create: New "entry"
|
32
|
-
? Please fill in the entry name: entry
|
33
|
-
```
|
34
|
-
|
35
|
-
After running, a new folder with the corresponding name of the entry will be created in the `src` directory of the project, along with the default entry file. The previous entry files under the `src` directory will be sorted into the folder corresponding to the `name` field in `package.json`.
|
36
|
-
|
37
|
-
Enable BFF function:
|
38
|
-
|
39
|
-
```bash
|
40
|
-
npm run new
|
41
|
-
? Please select the operation you want: Enable Features
|
42
|
-
? Please select the feature name: Enable BFF
|
43
|
-
? Please select the BFF type: Function
|
44
|
-
? Please select the framework: Express
|
45
|
-
```
|
46
|
-
|
47
|
-
After running, BFF-related dependencies will be installed in the project, and an `api` directory will be created for BFF module development, along with prompt information for registering BFF plugins.
|
48
|
-
|
49
|
-
:::info
|
50
|
-
We did not automatically register the plugin for the user here because the `modern.config.[tj]s` may change during the project lifecycle, and there may be problems with mutual references between modules, so allowing the user to manually register can ensure the correctness of modifying the configuration.
|
51
|
-
|
52
|
-
In subsequent customized development, if there are similar needs, you can also provide users with operational guidance through prompts, allowing users to manually operate on files.
|
53
|
-
:::
|
54
|
-
|
55
|
-
:::warning
|
56
|
-
When running the `new` command, it may be necessary to enable a feature that is not in the list. Check whether the corresponding plugin for the feature has been installed in the `package.json` file of the project. If you still need to use the `new` command to enable it, you need to manually remove the plugin dependency first.
|
57
|
-
:::
|
58
|
-
|
59
|
-
## Npm Module
|
60
|
-
|
61
|
-
Npm Module projects use the `new` command provided by `@modern-js/module-tools`.
|
62
|
-
|
63
|
-
The `new` command provides the ability to enable optional features.
|
64
|
-
|
65
|
-
For example:
|
66
|
-
|
67
|
-
Enable Storybook capability:
|
68
|
-
|
69
|
-
```bash
|
70
|
-
npm run new
|
71
|
-
? Please select the operation you want: Enable Features
|
72
|
-
? Please select the feature name: Enable Storybook
|
73
|
-
```
|
74
|
-
|
75
|
-
After running, Storybook plugin dependencies will be installed in the project, and the `storybook` command will be added. A `stories` directory will be created for Storybook module development, along with prompt information for registering Storybook plugins.
|
@@ -1,49 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 3
|
3
|
-
---
|
4
|
-
|
5
|
-
# afterForged
|
6
|
-
|
7
|
-
`afterForged` is a lifecycle function used for other step operations after file operations in generator plugin.
|
8
|
-
|
9
|
-
## Types
|
10
|
-
|
11
|
-
```ts
|
12
|
-
export type AfterForgedAPI = {
|
13
|
-
isInGitRepo: () => Promise<boolean>;
|
14
|
-
initGitRepo: () => Promise<void>;
|
15
|
-
gitAddAndCommit: (commitMessage: string) => Promise<void>;
|
16
|
-
install: () => Promise<void>;
|
17
|
-
};
|
18
|
-
|
19
|
-
export type PluginAfterForgedFunc = (api: AfterForgedAPI, inputData: Record<string, unknown>) => Promise<void>;
|
20
|
-
|
21
|
-
export interface IPluginContext {
|
22
|
-
afterForged: (func: PluginAfterForgedFunc) => void;
|
23
|
-
...
|
24
|
-
}
|
25
|
-
```
|
26
|
-
|
27
|
-
## API
|
28
|
-
|
29
|
-
The APIs provided by the `api` parameter will be introduced below.
|
30
|
-
|
31
|
-
### isInGitRepo
|
32
|
-
|
33
|
-
Checks whether the current project is a git repository.
|
34
|
-
|
35
|
-
### initGitRepo
|
36
|
-
|
37
|
-
Initializes the current project as a git repository.
|
38
|
-
|
39
|
-
### gitAddAndCommit
|
40
|
-
|
41
|
-
Commits changes to the current repository.
|
42
|
-
|
43
|
-
Parameters:
|
44
|
-
|
45
|
-
- `commitMessage`: commit message.
|
46
|
-
|
47
|
-
### install
|
48
|
-
|
49
|
-
Installs dependencies in the root directory of the project. The `install` function will use the corresponding package manager according to the value of `packageManager` to install dependencies.
|