@modern-js/main-doc 0.0.0-next-1679563983140 → 0.0.0-next-1679666804179

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.
Files changed (27) hide show
  1. package/CHANGELOG.md +13 -5
  2. package/docs/en/configure/app/source/config-dir.mdx +2 -2
  3. package/docs/en/configure/app/source/design-system.mdx +2 -2
  4. package/docs/en/configure/app/source/disable-default-entries.mdx +12 -12
  5. package/docs/en/configure/app/source/disable-entry-dirs.mdx +3 -4
  6. package/docs/en/configure/app/source/enable-async-entry.mdx +2 -2
  7. package/docs/en/configure/app/source/entries-dir.mdx +10 -10
  8. package/docs/en/configure/app/source/entries.mdx +83 -26
  9. package/docs/en/configure/app/tools/esbuild.mdx +9 -4
  10. package/docs/en/configure/app/tools/jest.mdx +2 -3
  11. package/docs/en/configure/app/tools/swc.mdx +6 -2
  12. package/docs/en/guides/concept/entries.mdx +130 -39
  13. package/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx +7 -3
  14. package/docs/en/guides/topic-detail/model/typescript-best-practice.mdx +4 -4
  15. package/docs/zh/configure/app/source/config-dir.mdx +2 -2
  16. package/docs/zh/configure/app/source/design-system.mdx +3 -3
  17. package/docs/zh/configure/app/source/disable-default-entries.mdx +11 -10
  18. package/docs/zh/configure/app/source/disable-entry-dirs.mdx +2 -3
  19. package/docs/zh/configure/app/source/enable-async-entry.mdx +3 -3
  20. package/docs/zh/configure/app/source/entries-dir.mdx +10 -11
  21. package/docs/zh/configure/app/source/entries.mdx +84 -23
  22. package/docs/zh/configure/app/tools/esbuild.mdx +9 -5
  23. package/docs/zh/configure/app/tools/jest.mdx +2 -3
  24. package/docs/zh/configure/app/tools/swc.mdx +6 -2
  25. package/docs/zh/guides/concept/entries.mdx +36 -35
  26. package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx +6 -2
  27. package/package.json +5 -5
@@ -1,9 +1,8 @@
1
1
  ---
2
- title: tools.jest
3
-
4
2
  sidebar_label: jest
5
3
  ---
6
- # jest
4
+
5
+ # tools.jest
7
6
 
8
7
  - **类型:** `Object | Function`
9
8
  - **默认值:** `{}`
@@ -1,8 +1,8 @@
1
1
  ---
2
- title: tools.swc
3
2
  sidebar_label: swc
4
3
  ---
5
- # swc
4
+
5
+ # tools.swc
6
6
 
7
7
  - **类型:** `Object`
8
8
  - **默认值:** `undefined`
@@ -13,6 +13,10 @@ sidebar_label: swc
13
13
 
14
14
  Modern.js 提供了开箱即用的 SWC 插件,可以为你的 Web 应用提供语法降级、Polyfill 以及压缩,并且移植了一些额外常见的 Babel 插件。
15
15
 
16
+ :::tip
17
+ 在使用 Rspack 作为打包工具时,默认会使用 SWC 进行转译和压缩,因此你不需要再安装和配置 SWC 插件。
18
+ :::
19
+
16
20
  ## 安装
17
21
 
18
22
  使用前需要安装 `@modern-js/plugin-swc` 插件。
@@ -2,50 +2,52 @@
2
2
  sidebar_position: 1
3
3
  ---
4
4
 
5
- # 入口
5
+ # 入口(Entry)
6
6
 
7
- 入口是 Modern.js 默认的文件约定,项目的每一个入口是一张独立的页面,对应一条**服务端路由**。
7
+ 通过本章节,你可以了解到 Modern.js 中的入口约定,以及如何自定义入口。
8
8
 
9
- 很多配置,如 HTML 模板、Meta 信息、是否开启 SSR、SSG、服务端路由规则都是以入口为维度划分的。
9
+ ## 什么是入口(Entry)
10
+
11
+ **入口指的是一个页面的起始模块。**
12
+
13
+ 在 Modern.js 项目中,每一个入口对应一个独立的页面,也对应一条服务端路由。默认情况下,Modern.js 会基于目录约定来自动确定页面的入口,同时也支持通过配置项来自定义入口。
14
+
15
+ Modern.js 提供的很多配置项都是以入口为维度进行划分的,比如页面标题、HTML 模板、页面 Meta 信息、是否开启 SSR/SSG、服务端路由规则等。
10
16
 
11
17
  ## 单入口与多入口
12
18
 
13
- Modern.js 初始化的项目是单入口的,项目结构如下:
19
+ Modern.js 初始化的项目是单入口的(SPA),项目结构如下:
14
20
 
15
21
  ```
16
22
  .
17
23
  ├── src
18
- │ ├── modern-app-env.d.ts
19
24
  │ └── routes
20
25
  │ ├── index.css
21
26
  │ ├── layout.tsx
22
27
  │ └── page.tsx
23
28
  ├── package.json
24
29
  ├── modern.config.ts
25
- ├── pnpm-lock.yaml
26
- ├── README.md
27
30
  └── tsconfig.json
28
31
  ```
29
32
 
30
- Modern.js 可以很方便的将单入口切换成多入口。可以在项目下执行 `pnpm run new`,通过生成器创建入口:
33
+ Modern.js 项目中,你可以很方便的将单入口切换成多入口,直接在项目下执行 `pnpm run new`,通过生成器创建入口即可:
31
34
 
32
35
  ```bash
33
- ? 请选择你想要的操作 创建工程元素
34
- ? 创建工程元素 新建「应用入口」
35
- ? 请填写入口名称 new-entry
36
+ ? 请选择你想要的操作:创建工程元素
37
+ ? 创建工程元素:新建「应用入口」
38
+ ? 请填写入口名称:new-entry
36
39
  ```
37
40
 
38
- 执行后,`src/` 目录将会变成如下结构:
41
+ 执行后,Modern.js 会自动生成一个新的入口目录,此时可以看到 `src/` 目录变成如下结构:
39
42
 
40
- ```
43
+ ```bash
41
44
  .
42
- ├── modern-app-env.d.ts
43
- ├── myapp
45
+ ├── myapp # 原入口
44
46
  │ └── routes
45
47
  │ ├── index.css
46
48
  │ ├── layout.tsx
47
49
  │ └── page.tsx
48
- └── new-entry
50
+ └── new-entry # 新入口
49
51
  └── routes
50
52
  ├── index.css
51
53
  ├── layout.tsx
@@ -54,10 +56,12 @@ Modern.js 可以很方便的将单入口切换成多入口。可以在项目下
54
56
 
55
57
  原本的代码被移动到了和 `package.json` 中 `name` 同名的目录下,并创建了新的目录。
56
58
 
57
- 执行 `pnpm run dev` 后,可以看到新增一条 `/new-entry` 的路由,并且被迁移的代码路由并未发生变化。
59
+ 执行 `pnpm run dev` 后,可以看到新增了一条名为 `/new-entry` 的路由,并且被迁移的代码路由并未发生变化。
60
+
61
+ :::tip
62
+ Modern.js 会将与 package.json 文件中 `name` 字段同名的入口作为主入口,主入口的路由为 `/`,其他入口的路由为 `/{entryName}`。
58
63
 
59
- :::note
60
- Modern.js 会将和 `package.json` 中 `name` 字段同名的入口作为主入口,默认路由为 `/`,其他入口默认路由为 `/{entryName}`。
64
+ 比如,package.json 中的 `name` 为 `myapp` 时,`src/myapp` 会作为项目的主入口。
61
65
 
62
66
  :::
63
67
 
@@ -82,7 +86,7 @@ Modern.js 会将和 `package.json` 中 `name` 字段同名的入口作为主入
82
86
  当 `src/` 目录满足入口特征时,Modern.js 会认为当前项目为单入口应用。
83
87
 
84
88
  :::tip
85
- 单入口默认的入口名为 `main`。
89
+ 在单入口应用中,默认的入口名为 `main`。
86
90
 
87
91
  :::
88
92
 
@@ -168,35 +172,32 @@ ReactDOM.render(<App />, document.getElementById('root'));
168
172
 
169
173
  Modern.js **不推荐**使用这种方式,这种方式丧失了框架的一些能力,如 **`modern.config.js` 文件中的 `runtime` 配置将不会再生效**。但是在项目从其他框架迁移到 Modern.js,例如 CRA,或是自己手动搭建的 webpack 时,这种方式会非常有用。
170
174
 
171
- ## 使用配置文件定义入口
175
+ ## 自定义入口
172
176
 
173
- 有些时候,已有的项目并不是按照 Modern.js 的目录结构来搭建的。如果强行要按照这种结构来工作,会有比较大的迁移成本。
177
+ 大部分存量项目并不是按照 Modern.js 的目录结构来搭建的。如果要改成 Modern.js 约定的目录结构,会存在一定的迁移成本。
174
178
 
175
- Modern.js 中,除了使用文件约定生成入口外,还可以在 `modern.config.[jt]s` 中手动配置入口。
179
+ 在这种情况下,除了使用文件约定生成入口外,你可以在 `modern.config.[jt]s` 中手动配置入口。
176
180
 
177
- ```ts
181
+ ```ts title="modern.config.ts"
178
182
  export default defineConfig({
179
183
  source: {
180
184
  entries: {
181
185
  // 指定一个名称为 entry_customize 的新入口
182
- entry_customize: './src/home/test/index.js',
186
+ entry_customize: './src/home/test/index.ts',
183
187
  },
188
+ // 禁用默认入口扫描
189
+ disableDefaultEntries: true,
184
190
  },
185
191
  });
186
192
  ```
187
193
 
188
- :::tip
189
- 详情可以查看 [source.entries](/configure/app/source/entries)。
190
-
191
- :::
192
-
193
- ## 禁用默认入口扫描
194
+ ### 禁用默认入口扫描
194
195
 
195
- 另外,项目的部分结构可能恰巧命中了 Modern.js 的约定,但实际上这部分并不是真实的入口。
196
+ 当使用自定义入口时,项目的部分结构可能恰巧命中了 Modern.js 的目录约定,但实际上这部分目录并不是真实的入口。
196
197
 
197
- Modern.js 提供了配置,来禁用默认的入口扫描。与配置的入口结合使用,大部分项目可以在不修改目录结构的情况下,快速的进行迁移。
198
+ Modern.js 提供了 `disableDefaultEntries` 配置,来禁用默认的入口扫描规则。当你需要自定义入口时,一般需要将 `disableDefaultEntries` 与 `entries` 结合使用。这样,一些存量项目可以在不修改目录结构的情况下,快速地进行迁移。
198
199
 
199
- ```ts
200
+ ```ts title="modern.config.ts"
200
201
  export default defineConfig({
201
202
  source: {
202
203
  disableDefaultEntries: true,
@@ -205,6 +206,6 @@ export default defineConfig({
205
206
  ```
206
207
 
207
208
  :::tip
208
- 详情可以查看 [source.disableDefaultEntries](/configure/app/source/disable-default-entries)。
209
+ 详细用法请查看 [source.entries](/configure/app/source/entries) 和 [source.disableDefaultEntries](/configure/app/source/disable-default-entries)。
209
210
 
210
211
  :::
@@ -191,8 +191,8 @@ foo
191
191
 
192
192
  - 功能:在退出进程前,重置一些文件状态
193
193
  - 执行阶段:进程退出之前
194
- - Hook 模型:AsyncWorkflow
195
- - 类型:`AsyncWorkflow<void, void>`
194
+ - Hook 模型:Workflow
195
+ - 类型:`Workflow<void, void>`
196
196
  - 使用示例:
197
197
 
198
198
  ```ts
@@ -209,6 +209,10 @@ export default (): CliPlugin => ({
209
209
  });
210
210
  ```
211
211
 
212
+ :::tip
213
+ 由于 Node.js 中退出进程时的回调函数是同步的,所以 `beforeExit` Hook 的类型是 `Workflow`,不能执行异步操作。
214
+ :::
215
+
212
216
  ### `beforeDev`
213
217
 
214
218
  - 功能:运行 dev 主流程的之前的任务
package/package.json CHANGED
@@ -11,13 +11,13 @@
11
11
  "modern",
12
12
  "modern.js"
13
13
  ],
14
- "version": "0.0.0-next-1679563983140",
14
+ "version": "0.0.0-next-1679666804179",
15
15
  "publishConfig": {
16
16
  "registry": "https://registry.npmjs.org/",
17
17
  "access": "public"
18
18
  },
19
19
  "peerDependencies": {
20
- "@modern-js/builder-doc": "0.0.0-next-1679563983140"
20
+ "@modern-js/builder-doc": "0.0.0-next-1679666804179"
21
21
  },
22
22
  "devDependencies": {
23
23
  "classnames": "^2",
@@ -29,9 +29,9 @@
29
29
  "fs-extra": "^10",
30
30
  "@types/node": "^16",
31
31
  "@types/fs-extra": "^9",
32
- "@modern-js/builder-doc": "0.0.0-next-1679563983140",
33
- "@modern-js/doc-tools": "0.0.0-next-1679563983140",
34
- "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1679563983140"
32
+ "@modern-js/doc-tools": "0.0.0-next-1679666804179",
33
+ "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1679666804179",
34
+ "@modern-js/builder-doc": "0.0.0-next-1679666804179"
35
35
  },
36
36
  "scripts": {
37
37
  "dev": "modern dev",