@modern-js/main-doc 0.0.0-next-20221124140628 → 2.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +1 -1
- package/package.json +3 -3
- package/zh/guides/advanced-features/custom-app.md +1 -1
- package/zh/guides/concept/entries.md +0 -112
- package/zh/guides/concept/integrated.md +4 -0
- package/zh/guides/concept/lifecycle.md +0 -10
- package/zh/guides/concept/solutions.md +4 -0
- package/zh/guides/get-started/quick-start.md +1 -199
- package/zh/guides/get-started/upgrade.md +1 -75
- package/CHANGELOG.md +0 -23
package/.turbo/turbo-build.log
CHANGED
package/package.json
CHANGED
@@ -11,20 +11,20 @@
|
|
11
11
|
"modern",
|
12
12
|
"modern.js"
|
13
13
|
],
|
14
|
-
"version": "
|
14
|
+
"version": "2.0.0-beta.1",
|
15
15
|
"publishConfig": {
|
16
16
|
"registry": "https://registry.npmjs.org/",
|
17
17
|
"access": "public"
|
18
18
|
},
|
19
19
|
"peerDependencies": {
|
20
|
-
"@modern-js/builder-doc": "
|
20
|
+
"@modern-js/builder-doc": "2.0.0-beta.1"
|
21
21
|
},
|
22
22
|
"devDependencies": {
|
23
23
|
"ts-node": "^10",
|
24
24
|
"fs-extra": "^10",
|
25
25
|
"@types/node": "^16",
|
26
26
|
"@types/fs-extra": "^9",
|
27
|
-
"@modern-js/builder-doc": "
|
27
|
+
"@modern-js/builder-doc": "2.0.0-beta.1"
|
28
28
|
},
|
29
29
|
"scripts": {
|
30
30
|
"build": "npx ts-node ./scripts/sync.ts"
|
@@ -2,115 +2,3 @@
|
|
2
2
|
title: 入口
|
3
3
|
sidebar_position: 2
|
4
4
|
---
|
5
|
-
|
6
|
-
入口是 Modern.js 默认的文件约定,项目的每一个入口是一张独立的页面,对应一条服务端路由。
|
7
|
-
|
8
|
-
很多配置,如 HTML 模板、Meta 信息、是否开启 SSR、SSG、服务端路由规则都是以入口为维度划分的。
|
9
|
-
|
10
|
-
## 单入口与多入口
|
11
|
-
|
12
|
-
Modern.js 初始化的项目是单入口的,项目结构如下:
|
13
|
-
|
14
|
-
```
|
15
|
-
.
|
16
|
-
├── node_modules
|
17
|
-
├── src
|
18
|
-
│ ├── modern-app-env.d.ts
|
19
|
-
│ └── routes
|
20
|
-
│ ├── index.css
|
21
|
-
│ ├── layout.tsx
|
22
|
-
│ └── page.tsx
|
23
|
-
├── package.json
|
24
|
-
├── modern.config.ts
|
25
|
-
├── pnpm-lock.yaml
|
26
|
-
├── README.md
|
27
|
-
└── tsconfig.json
|
28
|
-
```
|
29
|
-
|
30
|
-
Modern.js 可以很方便的将单入口切换成多入口。可以在项目下执行 `pnpm run new`,通过生成器创建入口:
|
31
|
-
|
32
|
-
```bash
|
33
|
-
? 请选择你想要的操作: 创建工程元素
|
34
|
-
? 创建工程元素: 新建「应用入口」
|
35
|
-
? 请填写入口名称: new-entry
|
36
|
-
```
|
37
|
-
|
38
|
-
执行后,`src/` 目录将会变成如下结构:
|
39
|
-
|
40
|
-
```
|
41
|
-
.
|
42
|
-
├── modern-app-env.d.ts
|
43
|
-
├── myapp
|
44
|
-
│ └── routes
|
45
|
-
│ ├── index.css
|
46
|
-
│ ├── layout.tsx
|
47
|
-
│ └── page.tsx
|
48
|
-
└── new-entry
|
49
|
-
└── routes
|
50
|
-
├── index.css
|
51
|
-
├── layout.tsx
|
52
|
-
└── page.tsx
|
53
|
-
```
|
54
|
-
|
55
|
-
原本的代码被移动到了和 `package.json` 中 `name` 同名的目录下,并创建了新的目录。
|
56
|
-
|
57
|
-
执行 `pnpm run dev` 后,可以看到新增一条 `/new-entry` 的路由,并且被迁移的代码路由并未发生变化。
|
58
|
-
|
59
|
-
:::note
|
60
|
-
Modern.js 会将和 `package.json` 中 `name` 同名的目录作为主入口,默认路由为 `/`,其他入口默认路由为 `/{entryName}`。
|
61
|
-
:::
|
62
|
-
|
63
|
-
## 入口条件
|
64
|
-
|
65
|
-
默认情况下,Modern.js 启动项目前会对 `src/` 下的文件进行扫描,识别入口,并生成对应的服务端路由。
|
66
|
-
|
67
|
-
:::tip
|
68
|
-
可以通过 [source.entriesDir](/docs/configure/app/source/entries-dir) 更改入口目录为其他目录。
|
69
|
-
:::
|
70
|
-
|
71
|
-
并非 `src/` 下所有的一级目录都会成为项目入口, 入口所在目录必须满足以下四个条件之一:
|
72
|
-
|
73
|
-
1. 具有 `routes/` 目录
|
74
|
-
2. 具有 `App.[jt]sx?` 文件
|
75
|
-
3. 具有 `index.[jt]sx?` 文件
|
76
|
-
2. 具有 `pages/` 目录(兼容旧版本)
|
77
|
-
|
78
|
-
当 `src/` 目录满足入口特征时,Modern.js 会认为当前项目为单入口应用。
|
79
|
-
|
80
|
-
:::tip
|
81
|
-
单入口默认的入口名为 `main`。
|
82
|
-
:::
|
83
|
-
|
84
|
-
当项目不是单入口应用时,Modern.js 会进一步查看 `src/` 下的一级目录。
|
85
|
-
|
86
|
-
## 入口的区别
|
87
|
-
|
88
|
-
不同约定的入口具有不同的行为。
|
89
|
-
|
90
|
-
### routes 入口
|
91
|
-
|
92
|
-
如果入口为 `routes/` 约定,Modern.js 会在启动时扫描 `routes` 下的文件,基于文件约定,自动生成客户端路由(react-router)。
|
93
|
-
|
94
|
-
详细内容可以参考[路由](/docs/guides/basic-features/routes).
|
95
|
-
|
96
|
-
### App 入口
|
97
|
-
|
98
|
-
如果入口为 `App.[jt]sx?` 约定,开发者可以在这个文件中自由的设置客户端路由,或者不设置客户端路由。
|
99
|
-
|
100
|
-
详细内容可以参考[路由](/docs/guides/basic-features/routes).
|
101
|
-
|
102
|
-
### Index 入口
|
103
|
-
|
104
|
-
通常情况下,上面两种模式已经能满足需求,但当开发者需要自己接管 React 挂载逻辑,或完全接管 Webpack 入口时,可以使用 `index.[jt]sx?` 约定。
|
105
|
-
|
106
|
-
如果入口为 `index.[jt]sx?` 约定,Modern.js 会根据该文件是否存在默认的组件导出,来决定构建行为。
|
107
|
-
|
108
|
-
详细内容可以参考[自定义 App](/docs/guides/advanced-features/custom-app).
|
109
|
-
|
110
|
-
## 配置入口
|
111
|
-
|
112
|
-
在 Modern.js 中,除了使用文件约定生成入口外,还可以在 `modern.config.[jt]s` 中手动配置入口。
|
113
|
-
|
114
|
-
:::tip
|
115
|
-
详情可以查看 [source.entries](/docs/configure/app/source/entries).
|
116
|
-
:::
|
@@ -2,13 +2,3 @@
|
|
2
2
|
title: 生命周期
|
3
3
|
sidebar_position: 1
|
4
4
|
---
|
5
|
-
|
6
|
-
Modern.js 应用具有完整的生命周期,包括 CLI、Server Side 和 Runtime 三个阶段。
|
7
|
-
|
8
|
-
目前 Modern.js 大致的生命周期如下:
|
9
|
-
|
10
|
-
:::note
|
11
|
-
其中粉色框的矩形代表 Modern.js 提供的插件钩子,淡黄色底色椭圆代表与下一个阶段的连接点。
|
12
|
-
:::
|
13
|
-
|
14
|
-

|
@@ -1,202 +1,4 @@
|
|
1
1
|
---
|
2
2
|
title: 快速上手
|
3
|
-
sidebar_position:
|
3
|
+
sidebar_position: 2
|
4
4
|
---
|
5
|
-
|
6
|
-
## 环境准备
|
7
|
-
|
8
|
-
### Node.js
|
9
|
-
|
10
|
-
需要 [Node.js LTS](https://github.com/nodejs/Release),并确保 Node 版本大于等于 14.17.6。
|
11
|
-
|
12
|
-
Modern.js 推荐在开发环境里先安装 [nvm](https://github.com/nvm-sh/nvm#install--update-script),在 shell 里集成[自动切换 node 版本的脚本](https://github.com/nvm-sh/nvm#deeper-shell-integration)。
|
13
|
-
|
14
|
-
然后只要仓库根目录下有内容为 `lts/fermium` 或 `lts/gallium` 的 `.nvmrc` 文件,进入这个仓库时就会自动安装或切换到正确的 Node.js 版本。
|
15
|
-
|
16
|
-
### pnpm
|
17
|
-
|
18
|
-
推荐使用 [pnpm](https://pnpm.io/installation) 来管理依赖:
|
19
|
-
|
20
|
-
```bash
|
21
|
-
npm install -g pnpm
|
22
|
-
```
|
23
|
-
|
24
|
-
:::note
|
25
|
-
Modern.js 同样支持使用 `yarn`、`npm` 进行依赖管理。
|
26
|
-
:::
|
27
|
-
|
28
|
-
## 安装
|
29
|
-
|
30
|
-
Modern.js 提供了 `@modern-js/create` 生成器来创建项目,不要全局安装,使用 `npx` 按需运行。
|
31
|
-
|
32
|
-
可以使用已有的空目录来创建项目:
|
33
|
-
|
34
|
-
```bash
|
35
|
-
mkdir myapp && cd myapp
|
36
|
-
npx @modern-js/create
|
37
|
-
```
|
38
|
-
|
39
|
-
也可以直接用新目录创建项目:
|
40
|
-
|
41
|
-
```bash
|
42
|
-
npx @modern-js/create myapp
|
43
|
-
```
|
44
|
-
|
45
|
-
## 初始化项目
|
46
|
-
|
47
|
-
Modern.js 生成器会提供一个可交互的问答界面,根据结果初始化项目,按照默认的选择进行初始化:
|
48
|
-
|
49
|
-
```bash
|
50
|
-
? 请选择你想创建的工程类型 应用
|
51
|
-
? 请选择开发语言 TS
|
52
|
-
? 请选择包管理工具 pnpm
|
53
|
-
```
|
54
|
-
|
55
|
-
在生成项目后,Modern.js 会自动安装依赖、创建 git 仓库。
|
56
|
-
|
57
|
-
```bash
|
58
|
-
[INFO] 依赖自动安装成功
|
59
|
-
[INFO] git 仓库初始化成功
|
60
|
-
[INFO] 创建成功!
|
61
|
-
可在新项目的目录下运行以下命令:
|
62
|
-
pnpm run dev # 按开发环境的要求,运行和调试项目
|
63
|
-
pnpm run build # 按产品环境的要求,构建项目
|
64
|
-
pnpm run start # 按产品环境的要求,运行项目
|
65
|
-
pnpm run lint # 检查和修复所有代码
|
66
|
-
pnpm run new # 继续创建更多项目要素,比如应用入口
|
67
|
-
```
|
68
|
-
|
69
|
-
:::note
|
70
|
-
Modern.js 生成器除了在项目初始化时工作外,也能在后续研发中生成项目各种粒度的模块,并非一用即抛开。
|
71
|
-
:::
|
72
|
-
|
73
|
-
现在,项目结构如下:
|
74
|
-
|
75
|
-
```
|
76
|
-
.
|
77
|
-
├── node_modules
|
78
|
-
├── src
|
79
|
-
│ ├── modern-app-env.d.ts
|
80
|
-
│ └── routes
|
81
|
-
│ ├── index.css
|
82
|
-
│ ├── layout.tsx
|
83
|
-
│ └── page.tsx
|
84
|
-
├── modern.config.ts
|
85
|
-
├── package.json
|
86
|
-
├── pnpm-lock.yaml
|
87
|
-
├── README.md
|
88
|
-
└── tsconfig.json
|
89
|
-
```
|
90
|
-
|
91
|
-
## 启动项目
|
92
|
-
|
93
|
-
在项目中执行 `pnpm run dev` 即可启动项目:
|
94
|
-
|
95
|
-
```bash
|
96
|
-
$ pnpm run dev
|
97
|
-
|
98
|
-
> modern dev
|
99
|
-
|
100
|
-
info Starting dev server...
|
101
|
-
info App running at:
|
102
|
-
|
103
|
-
> Local: http://localhost:8080/
|
104
|
-
> Network: http://10.94.58.87:8080/
|
105
|
-
> Network: http://10.254.68.105:8080/
|
106
|
-
|
107
|
-
Client ✔ done in 76.10ms
|
108
|
-
```
|
109
|
-
|
110
|
-
在浏览器中打开 `http://localhost:8000/`,能看到以下内容:
|
111
|
-
|
112
|
-

|
113
|
-
|
114
|
-
## 使用配置
|
115
|
-
|
116
|
-
通过生成器创建的 Modern.js 项目中,存在 `modern.config.ts` 文件。
|
117
|
-
|
118
|
-
可以通过配置文件来开启功能,或覆盖 Modern.js 的默认行为。例如添加如下配置,开启 SSR:
|
119
|
-
|
120
|
-
```ts
|
121
|
-
import { defineConfig } from '@modern-js/app-tools';
|
122
|
-
|
123
|
-
// https://modernjs.dev/docs/apis/app/config
|
124
|
-
export default defineConfig({
|
125
|
-
runtime: {
|
126
|
-
router: true,
|
127
|
-
state: true,
|
128
|
-
},
|
129
|
-
server: {
|
130
|
-
ssr: true,
|
131
|
-
},
|
132
|
-
});
|
133
|
-
```
|
134
|
-
|
135
|
-
重新执行 `pnpm run dev`,在浏览器 Network 菜单中,可以发现项目已经在服务端完成了页面渲染。
|
136
|
-
|
137
|
-
## 构建项目
|
138
|
-
|
139
|
-
在项目中执行 `pnpm run build` 即可构建项目生产环境产物:
|
140
|
-
|
141
|
-
```bash
|
142
|
-
$ pnpm run build
|
143
|
-
|
144
|
-
> modern build
|
145
|
-
|
146
|
-
info Create a production build...
|
147
|
-
|
148
|
-
info File sizes after production build:
|
149
|
-
|
150
|
-
File Size Gzipped
|
151
|
-
dist/static/js/lib-corejs.ffeb7fb8.js 214.96 kB 67.23 kB
|
152
|
-
dist/static/js/lib-react.09721b5c.js 152.61 kB 49.02 kB
|
153
|
-
dist/static/js/218.102e2f39.js 85.45 kB 28.5 kB
|
154
|
-
dist/static/js/lib-babel.a7bba875.js 11.93 kB 3.95 kB
|
155
|
-
dist/html/main/index.html 5.84 kB 2.57 kB
|
156
|
-
dist/static/js/main.3568a38e.js 3.57 kB 1.44 kB
|
157
|
-
dist/static/css/async/304.c3c481a5.css 2.62 kB 874 B
|
158
|
-
dist/asset-manifest.json 1.48 kB 349 B
|
159
|
-
dist/static/js/async/304.c45706bc.js 1.4 kB 575 B
|
160
|
-
dist/static/js/async/509.fcb06e14.js 283 B 230 B
|
161
|
-
|
162
|
-
Client ✔ done in 3.57s
|
163
|
-
```
|
164
|
-
|
165
|
-
构建产物默认生成到 `dist/`,目录结构如下:
|
166
|
-
|
167
|
-
```
|
168
|
-
.
|
169
|
-
├── asset-manifest.json
|
170
|
-
├── html
|
171
|
-
│ └── main
|
172
|
-
├── loader-routes
|
173
|
-
│ └── main
|
174
|
-
├── modern.config.json
|
175
|
-
├── route.json
|
176
|
-
└── static
|
177
|
-
├── css
|
178
|
-
└── js
|
179
|
-
```
|
180
|
-
|
181
|
-
## 本地验证
|
182
|
-
|
183
|
-
在项目中执行 `pnpm run start` 即可在本地验证构建产物是否正常运行:
|
184
|
-
|
185
|
-
```bash
|
186
|
-
$ pnpm run start
|
187
|
-
|
188
|
-
> modern start
|
189
|
-
|
190
|
-
Starting the modern server...
|
191
|
-
info App running at:
|
192
|
-
|
193
|
-
> Local: http://localhost:8080/
|
194
|
-
> Network: http://10.94.58.87:8080/
|
195
|
-
> Network: http://10.254.68.105:8080/
|
196
|
-
```
|
197
|
-
|
198
|
-
在浏览器中打开 `http://localhost:8000/`,内容应该和 `pnpm run dev` 时一致。
|
199
|
-
|
200
|
-
## 部署
|
201
|
-
|
202
|
-
本地验证完成后,可以将 `dist/` 下的产物整理成服务器需要的结构,进行部署。
|
@@ -1,78 +1,4 @@
|
|
1
1
|
---
|
2
2
|
title: 升级
|
3
|
-
sidebar_position:
|
3
|
+
sidebar_position: 3
|
4
4
|
---
|
5
|
-
|
6
|
-
## 通过命令行升级
|
7
|
-
|
8
|
-
Modern.js 提供了 `upgrade` 命令支持项目升级到最新的 Modern.js 版本。
|
9
|
-
|
10
|
-
在项目中执行 `pnpm run upgrade`:
|
11
|
-
|
12
|
-
```bash
|
13
|
-
$ pnpm run upgrade
|
14
|
-
|
15
|
-
> modern upgrade
|
16
|
-
|
17
|
-
[INFO] [项目类型]: 应用
|
18
|
-
[INFO] [Modern.js 最新版本]: 2.0.0
|
19
|
-
[INFO] [当前项目 Modern.js 依赖已经为最新版本]: 2.0.0
|
20
|
-
```
|
21
|
-
|
22
|
-
可以看到项目 `package.json` 中的依赖已经更改到最新,执行 `pnpm install` 重新安装即可。
|
23
|
-
|
24
|
-
## 指定版本升级
|
25
|
-
|
26
|
-
Modern.js 所有的官方包目前都使用统一版本号进行发布。
|
27
|
-
|
28
|
-
根据官网 Release Note,开发者也可以手动将项目升级到想要的版本。
|
29
|
-
|
30
|
-
:::tip
|
31
|
-
对所有 Modern.js 官方提供的包做统一升级,而不是升级单个依赖。
|
32
|
-
:::
|
33
|
-
|
34
|
-
## 锁定子依赖
|
35
|
-
|
36
|
-
当项目某个子依赖出现问题,而 Modern.js 无法立即更新时,可以使用包管理器锁定子依赖版本。
|
37
|
-
|
38
|
-
### Pnpm
|
39
|
-
|
40
|
-
对于使用 Pnpm 的项目,请在**项目根目录**的 `package.json` 中添加以下配置,然后重新执行 `pnpm i`:
|
41
|
-
|
42
|
-
```json
|
43
|
-
{
|
44
|
-
"pnpm": {
|
45
|
-
"overrides": {
|
46
|
-
"package-name": "^1.0.0"
|
47
|
-
}
|
48
|
-
}
|
49
|
-
}
|
50
|
-
```
|
51
|
-
|
52
|
-
### Yarn
|
53
|
-
|
54
|
-
对于使用 Yarn 的项目,请在**项目根目录**的 `package.json` 中添加以下配置,然后重新执行 `yarn i`:
|
55
|
-
|
56
|
-
```json
|
57
|
-
{
|
58
|
-
"resolutions": {
|
59
|
-
"package-name": "^1.0.0"
|
60
|
-
}
|
61
|
-
}
|
62
|
-
```
|
63
|
-
|
64
|
-
### Npm
|
65
|
-
|
66
|
-
对于使用 Npm 的项目,请在**项目根目录**的 `package.json` 中添加以下配置,然后重新执行 `npm i`:
|
67
|
-
|
68
|
-
```json
|
69
|
-
{
|
70
|
-
"overrides": {
|
71
|
-
"package-name": "^1.0.0"
|
72
|
-
}
|
73
|
-
}
|
74
|
-
```
|
75
|
-
|
76
|
-
:::info
|
77
|
-
对于 Monorepo 仓库,只能在项目根目录的 `package.json` 中锁定依赖版本,并且会影响 Monorepo 中的所有 package。
|
78
|
-
:::
|
package/CHANGELOG.md
DELETED
@@ -1,23 +0,0 @@
|
|
1
|
-
# @modern-js/main-doc
|
2
|
-
|
3
|
-
## 0.0.0-next-20221124140628
|
4
|
-
|
5
|
-
### Patch Changes
|
6
|
-
|
7
|
-
- 5927355e: feat: develop documentation directly with main-doc
|
8
|
-
feat: 直接使用 main-doc 包开发文档
|
9
|
-
- 1ef69374: feat: support update main-doc when package build or website build
|
10
|
-
feat: 支持在包发布和官网发布时,更新 main-doc 包
|
11
|
-
- Updated dependencies [2bc090c0]
|
12
|
-
- Updated dependencies [f96a7252]
|
13
|
-
- Updated dependencies [57077b2c]
|
14
|
-
- Updated dependencies [2ff6167b]
|
15
|
-
- Updated dependencies [5402fdb0]
|
16
|
-
- Updated dependencies [10d08a48]
|
17
|
-
- Updated dependencies [5d67c26c]
|
18
|
-
- Updated dependencies [af4422d6]
|
19
|
-
- Updated dependencies [dda38c9c]
|
20
|
-
- Updated dependencies [3fae2d03]
|
21
|
-
- Updated dependencies [df41d71a]
|
22
|
-
- Updated dependencies [14b712da]
|
23
|
-
- @modern-js/builder-doc@0.0.0-next-20221124140628
|