@modern-js/main-doc 2.25.0 → 2.25.2
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +14 -0
- package/docs/en/apis/app/commands.mdx +2 -2
- package/docs/en/apis/app/hooks/config/icon.mdx +2 -2
- package/docs/en/apis/app/runtime/web-server/middleware.mdx +1 -1
- package/docs/en/components/custom-router-micro-frontend.mdx +40 -0
- package/docs/en/components/ua-polyfill.mdx +1 -1
- package/docs/en/configure/app/auto-load-plugin.mdx +1 -1
- package/docs/en/configure/app/bff/proxy.mdx +2 -2
- package/docs/en/configure/app/builder-plugins.mdx +1 -1
- package/docs/en/configure/app/runtime/master-app.mdx +1 -1
- package/docs/en/configure/app/runtime/state.mdx +1 -1
- package/docs/en/guides/advanced-features/bff/index.mdx +1 -0
- package/docs/en/guides/advanced-features/code-split.mdx +1 -1
- package/docs/en/guides/advanced-features/rspack-start.mdx +1 -1
- package/docs/en/guides/advanced-features/ssr.mdx +1 -1
- package/docs/en/guides/basic-features/data-fetch.mdx +1 -1
- package/docs/en/guides/basic-features/html.mdx +50 -33
- package/docs/en/guides/topic-detail/changesets/add.mdx +1 -1
- package/docs/en/guides/topic-detail/changesets/release-pre.mdx +1 -1
- package/docs/en/guides/topic-detail/changesets/release.mdx +1 -1
- package/docs/en/guides/topic-detail/generator/create/option.md +3 -3
- package/docs/en/guides/topic-detail/generator/plugin/api/afterForged.md +1 -1
- package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx +2 -2
- package/docs/en/guides/topic-detail/micro-frontend/c03-main-app.mdx +3 -3
- package/docs/en/guides/topic-detail/model/manage-effects.mdx +1 -1
- package/docs/en/guides/topic-detail/model/model-communicate.mdx +1 -1
- package/docs/en/guides/topic-detail/model/performance.mdx +1 -1
- package/docs/en/guides/topic-detail/model/quick-start.mdx +2 -2
- package/docs/en/guides/topic-detail/model/use-model.mdx +3 -3
- package/docs/zh/apis/monorepo/commands/deploy.mdx +1 -1
- package/docs/zh/configure/app/builder-plugins.mdx +4 -3
- package/docs/zh/guides/basic-features/html.mdx +49 -29
- package/docs/zh/guides/topic-detail/model/manage-effects.mdx +1 -1
- package/docs/zh/guides/topic-detail/model/model-communicate.mdx +1 -1
- package/docs/zh/guides/topic-detail/model/performance.mdx +1 -1
- package/docs/zh/guides/topic-detail/model/quick-start.mdx +1 -1
- package/docs/zh/guides/topic-detail/model/use-model.mdx +3 -3
- package/package.json +5 -5
- package/docs/zh/apis/monorepo/commands/_category_.json +0 -8
- package/docs/zh/apis/monorepo/commands/bump.mdx +0 -39
- package/docs/zh/apis/monorepo/commands/change.mdx +0 -57
- package/docs/zh/apis/monorepo/commands/clear.mdx +0 -24
- package/docs/zh/apis/monorepo/commands/gen-release-note.mdx +0 -32
- package/docs/zh/apis/monorepo/commands/index.mdx +0 -7
- package/docs/zh/apis/monorepo/commands/lint.mdx +0 -18
- package/docs/zh/apis/monorepo/commands/new.mdx +0 -39
- package/docs/zh/apis/monorepo/commands/pre.mdx +0 -65
- package/docs/zh/apis/monorepo/commands/release.mdx +0 -16
- package/docs/zh/apis/monorepo/commands/upgrade.mdx +0 -20
- package/docs/zh/apis/monorepo/hooks/_category_.json +0 -8
- package/docs/zh/apis/monorepo/hooks/apps.mdx +0 -14
- package/docs/zh/apis/monorepo/hooks/code-workspace.mdx +0 -11
- package/docs/zh/apis/monorepo/hooks/examples.mdx +0 -16
- package/docs/zh/apis/monorepo/hooks/features.mdx +0 -16
- package/docs/zh/apis/monorepo/hooks/index.mdx +0 -7
- package/docs/zh/apis/monorepo/hooks/packages.mdx +0 -16
- package/docs/zh/apis/monorepo/hooks/pnpm-workspace.mdx +0 -11
- package/docs/zh/apis/monorepo/hooks/pnpmfile.mdx +0 -11
@@ -47,7 +47,7 @@ import { Html, Body, Root, Head, Scripts } from '@modern-js/runtime/document';
|
|
47
47
|
|
48
48
|
- `Head`:提供原生 Head Element 的能力,并会自动填充 `<meta>`,以及 `<Scripts>` 组件。
|
49
49
|
|
50
|
-
- `Scripts
|
50
|
+
- `Scripts`:用于控制构建生成的 `<script>` 标签的位置,默认放在 `<Head>` 组件中。
|
51
51
|
|
52
52
|
- `Comment`:将用户编写的 `<!-- gateway -->` 这种注释,保留输出到最新渲染的 html 中。
|
53
53
|
|
@@ -62,7 +62,7 @@ Modern.js 也提供了 `DocumentContext` 来提供一些配置、环境参数,
|
|
62
62
|
- `entryName`:当前的入口名。
|
63
63
|
- `templateParams`:HTML 模板的参数(为了兼容传统模板,不推荐使用)。
|
64
64
|
|
65
|
-
###
|
65
|
+
### 基础示例
|
66
66
|
|
67
67
|
```tsx
|
68
68
|
import React, { useContext } from 'react';
|
@@ -71,8 +71,8 @@ import {
|
|
71
71
|
Root,
|
72
72
|
Head,
|
73
73
|
Body,
|
74
|
-
DocumentContext,
|
75
74
|
Comment,
|
75
|
+
DocumentContext,
|
76
76
|
} from '@modern-js/runtime/document';
|
77
77
|
|
78
78
|
export default function Document(): React.ReactElement {
|
@@ -92,9 +92,9 @@ export default function Document(): React.ReactElement {
|
|
92
92
|
<Body>
|
93
93
|
<Root rootId="root">
|
94
94
|
<h1 style={{ color: 'red' }}>以下为构建时传过来的参数:</h1>
|
95
|
-
<h2>
|
96
|
-
<h2>
|
97
|
-
<h2>
|
95
|
+
<h2>entryName: {entryName}</h2>
|
96
|
+
<h2>title: {htmlConfig.title}</h2>
|
97
|
+
<h2>rootId: {templateParams.mountId}</h2>
|
98
98
|
</Root>
|
99
99
|
<h1>bottom</h1>
|
100
100
|
</Body>
|
@@ -108,45 +108,65 @@ export default function Document(): React.ReactElement {
|
|
108
108
|
```html
|
109
109
|
<!DOCTYPE html>
|
110
110
|
<html>
|
111
|
-
|
112
|
-
<
|
113
|
-
<meta
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
<meta
|
118
|
-
<meta name="
|
119
|
-
<meta name="
|
120
|
-
<meta name="
|
121
|
-
<meta name="
|
122
|
-
<
|
111
|
+
<head>
|
112
|
+
<meta charset="utf-8" />
|
113
|
+
<meta
|
114
|
+
name="viewport"
|
115
|
+
content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
116
|
+
/>
|
117
|
+
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
118
|
+
<meta name="renderer" content="webkit" />
|
119
|
+
<meta name="layoutmode" content="standard" />
|
120
|
+
<meta name="imagemode" content="force" />
|
121
|
+
<meta name="wap-font-scale" content="no" />
|
122
|
+
<meta name="format-detection" content="telephone=no" />
|
123
|
+
<link rel="icon" href="/a.icon" />
|
123
124
|
<script defer src="/static/js/builder-runtime.js"></script>
|
124
125
|
<script defer src="/static/js/lib-react.js"></script>
|
125
126
|
<script defer src="/static/js/lib-polyfill.js"></script>
|
126
127
|
<script defer src="/static/js/lib-router.js"></script>
|
127
|
-
<script xxx>
|
128
128
|
<script defer src="/static/js/sub.js"></script>
|
129
129
|
<link href="https://modernjs.dev" />
|
130
130
|
<!-- Need a Comment -->
|
131
|
-
</head>
|
131
|
+
</head>
|
132
132
|
|
133
|
-
<body>
|
133
|
+
<body>
|
134
134
|
<div id="root">
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
135
|
+
<!--<?- html ?>-->
|
136
|
+
<h1 style="color:red">以下为构建时传过来的参数:</h1>
|
137
|
+
<h2>entryName: sub</h2>
|
138
|
+
<h2>title: </h2>
|
139
|
+
<h2>rootId: root</h2>
|
140
140
|
</div>
|
141
141
|
<h1>bottom</h1>
|
142
142
|
<!--<?- chunksMap.js ?>-->
|
143
143
|
<!--<?- SSRDataScript ?>-->
|
144
|
-
</body>
|
145
|
-
|
144
|
+
</body>
|
146
145
|
</html>
|
146
|
+
```
|
147
|
+
|
148
|
+
### Scripts 组件示例
|
149
|
+
|
150
|
+
你可以使用 `<Scripts>` 组件,将构建生成的 `<script>` 标签插入到 `<body>` 标签内:
|
151
|
+
|
152
|
+
```tsx
|
153
|
+
import React, { useContext } from 'react';
|
154
|
+
import { Html, Root, Head, Body, Scripts } from '@modern-js/runtime/document';
|
147
155
|
|
156
|
+
export default function Document(): React.ReactElement {
|
157
|
+
return (
|
158
|
+
<Html>
|
159
|
+
<Head></Head>
|
160
|
+
<Body>
|
161
|
+
<Root rootId="root"></Root>
|
162
|
+
<Scripts />
|
163
|
+
</Body>
|
164
|
+
</Html>
|
165
|
+
);
|
166
|
+
}
|
148
167
|
```
|
149
168
|
|
169
|
+
|
150
170
|
## Html 语法
|
151
171
|
|
152
172
|
Modern.js 也支持 HTML 语法。默认情况下,Modern.js 的应用工程中会内置一份 HTML 模板,用于生成 HTML 代码。
|
@@ -164,7 +184,7 @@ Modern.js 也支持 HTML 语法。默认情况下,Modern.js 的应用工程中
|
|
164
184
|
|
165
185
|
**这些片段将按位置注入到默认的 HTML 模板中。**
|
166
186
|
|
167
|
-
```
|
187
|
+
```xml
|
168
188
|
<!DOCTYPE html>
|
169
189
|
<html>
|
170
190
|
<head>
|
@@ -255,6 +255,6 @@ const handleClick = async () => {
|
|
255
255
|
```
|
256
256
|
|
257
257
|
:::info 补充信息
|
258
|
-
[示例代码](https://github.com/web-infra-dev/modern-js-examples/tree/main/
|
258
|
+
[示例代码](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/effects)
|
259
259
|
|
260
260
|
:::
|
@@ -100,7 +100,7 @@ Modern.js 默认开启 [自动生成 actions](./auto-actions.mdx),所以 `step
|
|
100
100
|

|
101
101
|
|
102
102
|
:::info 补充信息
|
103
|
-
- 本节完整的[示例代码](https://github.com/web-infra-dev/modern-js-examples/tree/main/
|
103
|
+
- 本节完整的[示例代码](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/models-communication)。
|
104
104
|
- 相关 API 的更多介绍,请参考:[model](/apis/app/runtime/model/model_#函数类型)。
|
105
105
|
|
106
106
|
:::
|
@@ -166,6 +166,6 @@ const barModel = model("bar").define({
|
|
166
166
|
我们创建缓存函数 `createSelector`,仅当 `barModel` 的状态发生改变或 `fooModel` 的 `a` 状态发生改变时,才会重新计算 `combineA` 的值。
|
167
167
|
|
168
168
|
:::info 补充信息
|
169
|
-
本节完整的[示例代码](https://github.com/web-infra-dev/modern-js-examples/tree/main/
|
169
|
+
本节完整的[示例代码](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/performance-optimization)
|
170
170
|
|
171
171
|
:::
|
@@ -110,4 +110,4 @@ function Counter() {
|
|
110
110
|
|
111
111
|

|
112
112
|
|
113
|
-
这样,我们就完了一个简单的计数器应用。本节完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/
|
113
|
+
这样,我们就完了一个简单的计数器应用。本节完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/counter-model)查看。
|
@@ -164,7 +164,7 @@ function ThreeComponent() {
|
|
164
164
|
|
165
165
|
使用 React 的 refs 也可以实现类似效果,其实 `useStaticModel` 内部也使用到了 refs。不过直接 `useStaticModel` 有助于将状态的管理逻辑从组件中解耦,统一收敛到 Model 层。
|
166
166
|
|
167
|
-
完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/
|
167
|
+
完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/static-model)查看。
|
168
168
|
|
169
169
|
### 作为局部状态使用
|
170
170
|
|
@@ -196,7 +196,7 @@ function LocalCounter() {
|
|
196
196
|
|
197
197
|

|
198
198
|
|
199
|
-
完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/
|
199
|
+
完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/local-model)查看。
|
200
200
|
|
201
201
|
## 在组件外使用
|
202
202
|
|
@@ -240,7 +240,7 @@ setInterval(() => {
|
|
240
240
|
}, 1000);
|
241
241
|
```
|
242
242
|
|
243
|
-
完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/
|
243
|
+
完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/counter-model-outof-react)查看。
|
244
244
|
|
245
245
|
:::info
|
246
246
|
如果是通过 [`createStore`](/apis/app/runtime/model/create-store) 手动创建的 Store 对象,无需通过 `useStore` 在组件内获取,即可直接使用。
|
package/package.json
CHANGED
@@ -15,14 +15,14 @@
|
|
15
15
|
"modern",
|
16
16
|
"modern.js"
|
17
17
|
],
|
18
|
-
"version": "2.25.
|
18
|
+
"version": "2.25.2",
|
19
19
|
"publishConfig": {
|
20
20
|
"registry": "https://registry.npmjs.org/",
|
21
21
|
"access": "public",
|
22
22
|
"provenance": true
|
23
23
|
},
|
24
24
|
"peerDependencies": {
|
25
|
-
"@modern-js/builder-doc": "^2.25.
|
25
|
+
"@modern-js/builder-doc": "^2.25.2"
|
26
26
|
},
|
27
27
|
"devDependencies": {
|
28
28
|
"classnames": "^2",
|
@@ -34,9 +34,9 @@
|
|
34
34
|
"fs-extra": "^10",
|
35
35
|
"@types/node": "^16",
|
36
36
|
"@types/fs-extra": "^9",
|
37
|
-
"@modern-js/builder-doc": "2.25.
|
38
|
-
"@modern-js/doc-
|
39
|
-
"@modern-js/doc-
|
37
|
+
"@modern-js/builder-doc": "2.25.2",
|
38
|
+
"@modern-js/doc-plugin-auto-sidebar": "2.25.2",
|
39
|
+
"@modern-js/doc-tools": "2.25.2"
|
40
40
|
},
|
41
41
|
"scripts": {
|
42
42
|
"dev": "modern dev",
|
@@ -1,39 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 4
|
3
|
-
---
|
4
|
-
|
5
|
-
```bash
|
6
|
-
Usage: modern bump [options]
|
7
|
-
|
8
|
-
使用变更集自动更新发布版本和变更日志
|
9
|
-
|
10
|
-
Options:
|
11
|
-
--canary 创建一个预发布版本进行测试 (default: false)
|
12
|
-
--preid <tag> 在对预发布版本进行版本控制时指定标识符 (default: "next")
|
13
|
-
--snapshot 创建一个特殊版本进行测试 (default: false)
|
14
|
-
-h, --help display help for command
|
15
|
-
```
|
16
|
-
|
17
|
-
:::info
|
18
|
-
`bump` 命令执行之前需要提前执行 [`change`](/apis/monorepo/commands/change) 命令添加 changeset。
|
19
|
-
|
20
|
-
:::
|
21
|
-
|
22
|
-
按 changeset 记录修改 `package.json` 中的版本号, 同时生成 `CHANGELOG.md`:
|
23
|
-
|
24
|
-
```bash
|
25
|
-
npx modern bump
|
26
|
-
🦋 All files have been updated. Review them and commit at your leisure
|
27
|
-
```
|
28
|
-
|
29
|
-
`CHANGELOG.md` 示例内容如下:
|
30
|
-
|
31
|
-
```md
|
32
|
-
# package-a
|
33
|
-
|
34
|
-
## 0.1.1
|
35
|
-
|
36
|
-
### Patch Changes
|
37
|
-
|
38
|
-
- test publish
|
39
|
-
```
|
@@ -1,57 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 2
|
3
|
-
---
|
4
|
-
# change
|
5
|
-
|
6
|
-
```bash
|
7
|
-
Usage: modern change [options]
|
8
|
-
|
9
|
-
创建变更集
|
10
|
-
|
11
|
-
Options:
|
12
|
-
--empty 创建空变更集 (default: false)
|
13
|
-
--open 使用编辑器中打开创建的变更集 (default: false)
|
14
|
-
-h, --help display help for command
|
15
|
-
```
|
16
|
-
|
17
|
-
:::info
|
18
|
-
[`change`](/apis/monorepo/commands/change)、[`pre`](/apis/monorepo/commands/pre)、[`bump`](/apis/monorepo/commands/bump)、[`release`](/apis/monorepo/commands/release) 命令集成了工具 [`changesets`](https://github.com/atlassian/changesets) 管理版本变更和 Changelog。
|
19
|
-
|
20
|
-
:::
|
21
|
-
|
22
|
-
`modern change` 命令添加 changeset:
|
23
|
-
|
24
|
-
```bash
|
25
|
-
$ npx modern change
|
26
|
-
🦋 Which packages would you like to include? · package-a, package-b
|
27
|
-
🦋 Which packages should have a major bump? · No items were selected
|
28
|
-
🦋 Which packages should have a minor bump? · No items were selected
|
29
|
-
🦋 The following packages will be patch bumped:
|
30
|
-
🦋 package-a@0.1.0
|
31
|
-
🦋 package-b@0.1.0
|
32
|
-
🦋 Please enter a summary for this change (this will be in the changelogs). Submit empty line to open external editor
|
33
|
-
🦋 Summary · test publish
|
34
|
-
🦋 === Releasing the following packages ===
|
35
|
-
🦋 [Patch]
|
36
|
-
🦋 package-a, package-b
|
37
|
-
🦋 ╔════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗
|
38
|
-
🦋 ║ ========= NOTE ======== ║
|
39
|
-
🦋 ║All dependents of these packages that will be incompatible with the new version will be patch bumped when this changeset is applied.║
|
40
|
-
🦋 ╚════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╝
|
41
|
-
🦋 Is this your desired changeset? (Y/n) · true
|
42
|
-
🦋 Changeset added! - you can now commit it
|
43
|
-
🦋
|
44
|
-
🦋 If you want to modify or expand on the changeset summary, you can find it here
|
45
|
-
🦋 info /xxxx/monorepo/.changeset/long-lizards-talk.md
|
46
|
-
```
|
47
|
-
|
48
|
-
上面我们给 `package-a` 和 `package-b` 都选择了 `patch` 变更,具体的变更信息在 monorepo 根目录下的 `.changeset/long-lizards-talk.md` 中:
|
49
|
-
|
50
|
-
```md
|
51
|
-
---
|
52
|
-
'package-a': patch
|
53
|
-
'package-b': patch
|
54
|
-
---
|
55
|
-
|
56
|
-
test publish
|
57
|
-
```
|
@@ -1,24 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 8
|
3
|
-
---
|
4
|
-
# clear
|
5
|
-
|
6
|
-
```bash
|
7
|
-
Usage: modern clear [options]
|
8
|
-
|
9
|
-
clear project dirs
|
10
|
-
|
11
|
-
Options:
|
12
|
-
--remove-dirs [dirs...] remove dirs, default is node_modules
|
13
|
-
-h, --help display help for command
|
14
|
-
```
|
15
|
-
|
16
|
-
默认对 Monorepo 以及 Monorepo 子项目的 `node_modules` 进行清理。
|
17
|
-
|
18
|
-
可以通过参数 `--remove-dirs` 来指定要删除的目录,例如执行:
|
19
|
-
|
20
|
-
```bash
|
21
|
-
$ npx modern clear --remove-dirs dist
|
22
|
-
```
|
23
|
-
|
24
|
-
则会清理所有 Monorepo 子项目的 `dist` 目录。
|
@@ -1,32 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 9
|
3
|
-
---
|
4
|
-
# gen-release-note
|
5
|
-
|
6
|
-
```bash
|
7
|
-
Usage: modern gen-release-note [options]
|
8
|
-
|
9
|
-
根据当前仓库 changeset 文件生成 Release Note
|
10
|
-
|
11
|
-
Options:
|
12
|
-
--repo <repo> 仓库名称,用于生成 Pull Request 链接, 例如: web-infra-dev/modern.js
|
13
|
-
--custom <cumtom> 自定义 Release Note 生成函数
|
14
|
-
-h, --help display help for command
|
15
|
-
```
|
16
|
-
|
17
|
-
根据当前仓库的 changeset 信息自动生成 Release Note。
|
18
|
-
|
19
|
-
:::warning 注意
|
20
|
-
需要在 bump 命令之前执行。
|
21
|
-
|
22
|
-
:::
|
23
|
-
|
24
|
-
```markdown
|
25
|
-
## Features:
|
26
|
-
|
27
|
-
[[#1160](https://github.com/web-infra-dev/modern.js/pull/1160)] export ExecaError type
|
28
|
-
|
29
|
-
## Bug Fix:
|
30
|
-
|
31
|
-
[[#1264](https://github.com/web-infra-dev/modern.js/pull/1264)] fix: conventional router app use App.init not work
|
32
|
-
```
|
@@ -1,18 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 6
|
3
|
-
---
|
4
|
-
# lint
|
5
|
-
|
6
|
-
```bash
|
7
|
-
Usage: modern lint [options] [...files]
|
8
|
-
|
9
|
-
lint and fix source files
|
10
|
-
|
11
|
-
Options:
|
12
|
-
--no-fix disable auto fix source file
|
13
|
-
-h, --help display help for command
|
14
|
-
```
|
15
|
-
|
16
|
-
运行 `ESLint` 检查 monorepo 中代码语法情况, 通长情况下,我们只需要在 `git commit` 阶段通过 `lint-staged` 检查本次提交修改的部分代码。
|
17
|
-
|
18
|
-
- `--no-fix` 参数设置后可以关闭自动修复 lint 错误代码的能力。
|
@@ -1,39 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 1
|
3
|
-
---
|
4
|
-
# new
|
5
|
-
|
6
|
-
```bash
|
7
|
-
Usage: modern new [options]
|
8
|
-
|
9
|
-
Monorepo 创建子项目
|
10
|
-
|
11
|
-
Options:
|
12
|
-
-d, --debug 开启 Debug 模式,打印调试日志信息 (default: false)
|
13
|
-
-c, --config <config> 生成器运行默认配置(JSON 字符串)
|
14
|
-
--dist-tag <tag> 生成器使用特殊的 npm Tag 版本
|
15
|
-
--registry 生成器运行过程中定制 npm Registry
|
16
|
-
-h, --help display help for command
|
17
|
-
```
|
18
|
-
|
19
|
-
`modern new` 命令在 monorepo 中可以用来添加应用工程和可复用的模块:
|
20
|
-
|
21
|
-
```bash
|
22
|
-
$ modern new
|
23
|
-
? 请选择你想创建的工程类型 (Use arrow keys)
|
24
|
-
❯ Web 应用
|
25
|
-
Web 应用(测试)
|
26
|
-
Npm 模块
|
27
|
-
Npm 模块(内部)
|
28
|
-
```
|
29
|
-
|
30
|
-
应用工程默认会添加到 `apps` 目录, 测试应用会添加到 `examples` 目录,公共模块默认会添加到 `packages` 目录, 内部模块默认会添加到 `features` 目录。
|
31
|
-
|
32
|
-
内部模块在 monorepo 的应用里面使用时,可以无需构建直接使用源码。
|
33
|
-
|
34
|
-
:::caution 注意
|
35
|
-
`--config` 参数对应参数值需要使用 JSON 字符串。
|
36
|
-
|
37
|
-
pnpm 暂不支持使用 JSON 字符串作为参数值,可使用 `npm new` 开启相关功能。【[相关 Issue](https://github.com/pnpm/pnpm/issues/3876)】
|
38
|
-
|
39
|
-
:::
|
@@ -1,65 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 3
|
3
|
-
---
|
4
|
-
# pre
|
5
|
-
|
6
|
-
```bash
|
7
|
-
Usage: modern pre [options] <enter|exit> [tag]
|
8
|
-
|
9
|
-
进入和退出预发布模式
|
10
|
-
|
11
|
-
Options:
|
12
|
-
-h, --help display help for command
|
13
|
-
```
|
14
|
-
|
15
|
-
可以使用 `modern pre` 命令在正式发布前[预发布](https://github.com/atlassian/changesets/blob/main/docs/prereleases.md)一个版本。
|
16
|
-
|
17
|
-
首先 `modern pre enter <tag>` 进入预发布模式:
|
18
|
-
|
19
|
-
```bash
|
20
|
-
$ npx modern pre enter next
|
21
|
-
🦋 success Entered pre mode with tag next
|
22
|
-
🦋 info Run `changeset version` to version packages with prerelease versions
|
23
|
-
```
|
24
|
-
|
25
|
-
之后通过 `modern change` 命令添加 changeset:
|
26
|
-
|
27
|
-
```bash
|
28
|
-
$ npx modern change
|
29
|
-
🦋 Which packages would you like to include? · package-a, package-b
|
30
|
-
🦋 Which packages should have a major bump? · No items were selected
|
31
|
-
🦋 Which packages should have a minor bump? · No items were selected
|
32
|
-
🦋 The following packages will be patch bumped:
|
33
|
-
🦋 package-a@0.1.1
|
34
|
-
🦋 package-b@0.1.1
|
35
|
-
🦋 Please enter a summary for this change (this will be in the changelogs). Submit empty line to open external editor
|
36
|
-
🦋 Summary · test pre publish
|
37
|
-
🦋 === Releasing the following packages ===
|
38
|
-
🦋 [Patch]
|
39
|
-
🦋 package-a, package-b
|
40
|
-
🦋 ╔════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗
|
41
|
-
🦋 ║ ========= NOTE ======== ║
|
42
|
-
🦋 ║All dependents of these packages that will be incompatible with the new version will be patch bumped when this changeset is applied.║
|
43
|
-
🦋 ╚════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╝
|
44
|
-
🦋 Is this your desired changeset? (Y/n) · true
|
45
|
-
🦋 Changeset added! - you can now commit it
|
46
|
-
🦋
|
47
|
-
🦋 If you want to modify or expand on the changeset summary, you can find it here
|
48
|
-
🦋 info /xxxxxx/monorepo/.changeset/beige-paws-rule.md
|
49
|
-
```
|
50
|
-
|
51
|
-
接着可以使用 `modern bump` 命令更新具体的版本号:
|
52
|
-
|
53
|
-
```bash
|
54
|
-
$ npx modern bump
|
55
|
-
🦋 warn ===============================IMPORTANT!===============================
|
56
|
-
🦋 warn You are in prerelease mode
|
57
|
-
🦋 warn If you meant to do a normal release you should revert these changes and run `changeset pre exit`
|
58
|
-
🦋 warn You can then run `changeset version` again to do a normal release
|
59
|
-
🦋 warn ----------------------------------------------------------------------
|
60
|
-
🦋 All files have been updated. Review them and commit at your leisure
|
61
|
-
```
|
62
|
-
|
63
|
-
可以看到 `package-a` 和 `package-b` 的 `package.json` 中版本号均已更新到 `0.1.2-next.0`。
|
64
|
-
|
65
|
-
提交完变更之后,我们可以通过 `modern pre exit` 命令退出预发布模式。
|
@@ -1,16 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 5
|
3
|
-
---
|
4
|
-
# release
|
5
|
-
|
6
|
-
```bash
|
7
|
-
Usage: modern release [options]
|
8
|
-
|
9
|
-
publish changes to npm
|
10
|
-
|
11
|
-
Options:
|
12
|
-
--tag <tag> publish use special tag (default: "")
|
13
|
-
-h, --help display help for command
|
14
|
-
```
|
15
|
-
|
16
|
-
发布当前仓库的 Packages 至 NPM。
|
@@ -1,20 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 11
|
3
|
-
---
|
4
|
-
# upgrade
|
5
|
-
|
6
|
-
```
|
7
|
-
Usage: modern upgrade [options]
|
8
|
-
|
9
|
-
升级 Modern.js 到最新版本
|
10
|
-
|
11
|
-
Options:
|
12
|
-
--registry <registry> 定制 npm registry (default: "")
|
13
|
-
-d,--debug 开启 Debug 模式,打印调试日志信息 (default: false)
|
14
|
-
--cwd <cwd> 项目路径 (default: "")
|
15
|
-
-h, --help display help for command
|
16
|
-
```
|
17
|
-
|
18
|
-
`modern upgrade` 命令,用于升级项目 Modern.js 相关依赖至最新版本。
|
19
|
-
|
20
|
-
在项目根目录下执行命令 `npx modern upgrade`,会默认将当前执行命令项目的 `package.json` 中的 Modern.js 相关依赖更新至最新版本。
|
@@ -1,11 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: monorepo.code-workspace
|
3
|
-
sidebar_position: 7
|
4
|
-
---
|
5
|
-
# monorepo.code-workspace
|
6
|
-
|
7
|
-
Monorepo 工程方案 VS Code 配置文件。
|
8
|
-
|
9
|
-
Monorepo 工程方案支持 VS Code Workspace 配置,可以通过该配置文件打开的一个或多个文件夹的集合。
|
10
|
-
|
11
|
-
VS Code workspace 协议详情可查看: [VS Code Workspace](https://code.visualstudio.com/docs/editor/workspaces)
|
@@ -1,16 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: examples/*
|
3
|
-
sidebar_position: 2
|
4
|
-
---
|
5
|
-
# examples/*
|
6
|
-
|
7
|
-
Monorepo 工程方案测试应用类型项目目录。
|
8
|
-
|
9
|
-
Modern.js Monorepo 工程方案约定将测试的应用类型子项目放置在 `examples` 目录下进行统一管理,`examples` 目录下每一个文件夹都是一个完整的应用项目。
|
10
|
-
|
11
|
-
测试类型的应用项目不包含部署相关的 scripts 命令,用于开发过程中进行测试项目、测试案例的编写。
|
12
|
-
|
13
|
-
:::info
|
14
|
-
可直接在项目下执行 new 命令创建测试应用类型子项目。
|
15
|
-
|
16
|
-
:::
|
@@ -1,16 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: features/
|
3
|
-
sidebar_position: 3
|
4
|
-
---
|
5
|
-
# features/
|
6
|
-
|
7
|
-
Monorepo 工程方案内部模块类型项目目录。
|
8
|
-
|
9
|
-
Modern.js Monorepo 工程方案约定将内部模块类型子项目放置在 `features` 目录下进行统一管理,`features` 目录下每一个文件夹都是一个完整的模块项目。
|
10
|
-
|
11
|
-
内部模块项目用于一些不需要编译的公共的组件和工具的编写,这类型的项目不包含编译、发布命令,在应用类型项目中引用时,应用类型项目会默认对其进行编译。
|
12
|
-
|
13
|
-
:::info
|
14
|
-
可直接在项目下执行 new 命令内部模块类型子项目。
|
15
|
-
|
16
|
-
:::
|