@modern-js/main-doc 2.5.0 → 2.6.0
Sign up to get free protection for your applications and to get access to all the features.
- package/.turbo/turbo-build.log +1 -1
- package/en/apis/app/commands.mdx +297 -0
- package/en/apis/app/hooks/_category_.json +1 -1
- package/en/apis/app/hooks/src/routes.mdx +2 -2
- package/en/components/init-app.mdx +5 -5
- package/en/configure/app/bff/prefix.mdx +2 -3
- package/en/configure/app/bff/proxy.mdx +1 -1
- package/en/configure/app/dev/before-start-url.mdx +13 -0
- package/en/configure/app/dev/host.mdx +13 -0
- package/en/configure/app/output/ssg.mdx +3 -3
- package/en/configure/app/runtime/master-app.mdx +1 -1
- package/en/configure/app/source/entries-dir.mdx +1 -1
- package/en/configure/app/testing/transformer.mdx +1 -1
- package/en/configure/app/tools/jest.mdx +1 -1
- package/en/guides/advanced-features/rspack-start.mdx +69 -0
- package/en/guides/advanced-features/ssg.mdx +8 -8
- package/en/guides/basic-features/alias.mdx +4 -4
- package/en/guides/basic-features/data-fetch.mdx +4 -4
- package/en/guides/basic-features/routes.mdx +23 -7
- package/en/guides/concept/builder.mdx +1 -1
- package/en/guides/get-started/quick-start.mdx +2 -2
- package/en/guides/topic-detail/micro-frontend/c03-main-app.mdx +1 -1
- package/en/tutorials/first-app/c07-container.mdx +17 -17
- package/en/tutorials/first-app/c08-entries.mdx +23 -23
- package/package.json +3 -3
- package/scripts/summary.en.json +1 -1
- package/scripts/summary.zh.json +1 -1
- package/zh/apis/app/commands.mdx +299 -0
- package/zh/apis/app/hooks/_category_.json +1 -1
- package/zh/apis/app/hooks/src/routes.mdx +2 -2
- package/zh/components/init-app.mdx +5 -5
- package/zh/configure/app/bff/prefix.mdx +1 -1
- package/zh/configure/app/bff/proxy.mdx +1 -1
- package/zh/configure/app/dev/before-start-url.mdx +13 -0
- package/zh/configure/app/dev/host.mdx +13 -0
- package/zh/configure/app/output/ssg.mdx +3 -3
- package/zh/configure/app/source/entries-dir.mdx +1 -1
- package/zh/guides/advanced-features/rspack-start.mdx +69 -0
- package/zh/guides/advanced-features/ssg.mdx +8 -8
- package/zh/guides/advanced-features/ssr.mdx +3 -2
- package/zh/guides/basic-features/alias.mdx +4 -4
- package/zh/guides/basic-features/data-fetch.mdx +4 -4
- package/zh/guides/basic-features/routes.mdx +23 -7
- package/zh/guides/concept/builder.mdx +2 -2
- package/zh/guides/get-started/quick-start.mdx +2 -2
- package/zh/guides/topic-detail/micro-frontend/c03-main-app.mdx +1 -1
- package/zh/tutorials/first-app/c07-container.mdx +17 -17
- package/zh/tutorials/first-app/c08-entries.mdx +23 -23
- package/en/apis/app/commands/_category_.json +0 -5
- package/en/apis/app/commands/build.mdx +0 -39
- package/en/apis/app/commands/dev.mdx +0 -61
- package/en/apis/app/commands/inspect.mdx +0 -61
- package/en/apis/app/commands/lint.mdx +0 -19
- package/en/apis/app/commands/new.mdx +0 -55
- package/en/apis/app/commands/serve.mdx +0 -27
- package/en/apis/app/commands/test.mdx +0 -35
- package/en/apis/app/commands/upgrade.mdx +0 -18
- package/zh/apis/app/commands/_category_.json +0 -5
- package/zh/apis/app/commands/build.mdx +0 -39
- package/zh/apis/app/commands/dev.mdx +0 -61
- package/zh/apis/app/commands/inspect.mdx +0 -61
- package/zh/apis/app/commands/lint.mdx +0 -19
- package/zh/apis/app/commands/new.mdx +0 -54
- package/zh/apis/app/commands/serve.mdx +0 -27
- package/zh/apis/app/commands/test.mdx +0 -35
- package/zh/apis/app/commands/upgrade.mdx +0 -18
@@ -1,18 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 8
|
3
|
-
---
|
4
|
-
# upgrade
|
5
|
-
|
6
|
-
```
|
7
|
-
Usage: modern upgrade [options]
|
8
|
-
|
9
|
-
upgrade Modern.js to latest version.
|
10
|
-
|
11
|
-
Options:
|
12
|
-
--registry <registry> specify npm registry (default: "")
|
13
|
-
-d,--debug using debug mode to log something (default: false)
|
14
|
-
--cwd <cwd> app directory (default: "")
|
15
|
-
-h, --help show command help
|
16
|
-
```
|
17
|
-
|
18
|
-
Execute the command `npx modern upgrade` in the project, by default, dependencies in the `package.json` are updated to the latest version.
|
@@ -1,39 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 5
|
3
|
-
---
|
4
|
-
# build
|
5
|
-
|
6
|
-
```bash
|
7
|
-
Usage: modern build [options]
|
8
|
-
|
9
|
-
build application
|
10
|
-
|
11
|
-
Options:
|
12
|
-
-c --config <config> 指定配置文件路径,可以为相对路径或绝对路径
|
13
|
-
-h, --help 显示命令帮助
|
14
|
-
--analyze 分析构建产物体积,查看各个模块打包后的大小
|
15
|
-
```
|
16
|
-
|
17
|
-
`modern build` 命令默认会在 `dist/` 目录下构建出可用于生产环境的产物。
|
18
|
-
|
19
|
-
可以通过修改配置 [`output.distPath`](/configure/app/output/dist-path) 指定产物的输出目录。
|
20
|
-
|
21
|
-
## 分析构建产物体积
|
22
|
-
|
23
|
-
执行 `npx modern build --analyze` 命令,可以在打包生产环境代码的同时,产出一个分析构建产物体积的 HTML 文件:
|
24
|
-
|
25
|
-
```
|
26
|
-
Bundle Analyzer saved report to /example/dist/report.html
|
27
|
-
File sizes after production build:
|
28
|
-
|
29
|
-
122.35 KB dist/static/js/885.1d4fbe5a.js
|
30
|
-
2.3 KB dist/static/js/main.4b8e8d64.js
|
31
|
-
761 B dist/static/js/runtime-main.edb7cf35.js
|
32
|
-
645 B dist/static/css/main.0dd3ecc1.css
|
33
|
-
```
|
34
|
-
|
35
|
-
手动在浏览器中打开上述 HTML 文件,可以看到打包产物的瓦片图,并进行包体积分析和优化:
|
36
|
-
|
37
|
-
<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/mwa-build-analyze-8784f762c1ab0cb20935829d5f912c4c.png" />
|
38
|
-
|
39
|
-
> 该功能基于 [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) 实现。
|
@@ -1,61 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 1
|
3
|
-
---
|
4
|
-
|
5
|
-
# dev / start
|
6
|
-
|
7
|
-
```bash
|
8
|
-
Usage: modern dev / modern start [options]
|
9
|
-
|
10
|
-
本地开发命令
|
11
|
-
|
12
|
-
Options:
|
13
|
-
-e --entry <entry> 指定入口,只编译特定的页面
|
14
|
-
-c --config <config> 指定配置文件路径,可以为相对路径或绝对路径
|
15
|
-
-h, --help 显示命令帮助
|
16
|
-
--analyze 分析构建产物体积,查看各个模块打包后的大小
|
17
|
-
--api-only 仅启动 API 接口服务
|
18
|
-
```
|
19
|
-
|
20
|
-
`modern dev` 命令用于启动一个本地开发服务器,对源代码进行开发环境编译,同时监听源文件变化,默认支持模块热更新和 React Fast Refresh。
|
21
|
-
|
22
|
-
`modern start` 是 `modern dev` 命令的别名,两者的功能和用法完全一致。
|
23
|
-
|
24
|
-
```bash
|
25
|
-
$ modern dev
|
26
|
-
|
27
|
-
info Starting dev server...
|
28
|
-
info App running at:
|
29
|
-
|
30
|
-
> Local: http://localhost:8080/
|
31
|
-
> Network: http://192.168.0.1:8080/
|
32
|
-
```
|
33
|
-
|
34
|
-
## 编译部分页面
|
35
|
-
|
36
|
-
在多页面(MPA)项目中,可以添加 `--entry` 参数来指定编译其中的一个或多个页面。这样可以只编译项目中的部分代码,从而提升 dev 启动速度。
|
37
|
-
|
38
|
-
比如执行 `modern dev --entry`,在命令行界面中会展示入口选择框:
|
39
|
-
|
40
|
-
```bash
|
41
|
-
$ modern dev --entry
|
42
|
-
|
43
|
-
? 请选择需要构建的入口
|
44
|
-
❯ ◯ foo
|
45
|
-
◯ bar
|
46
|
-
◯ baz
|
47
|
-
```
|
48
|
-
|
49
|
-
比如选择 `foo` 入口,那么只有 `foo` 入口相关的代码会进行编译,其他页面的代码将不会参与构建。
|
50
|
-
|
51
|
-
### 通过参数指定页面
|
52
|
-
|
53
|
-
你也可以在 `--entry` 后面通过参数来指定页面名称,多个页面的名称使用逗号分隔。
|
54
|
-
|
55
|
-
```bash
|
56
|
-
# 编译 foo 页面
|
57
|
-
modern dev --entry foo
|
58
|
-
|
59
|
-
# 编译 foo 和 bar 页面
|
60
|
-
modern dev --entry foo,bar
|
61
|
-
```
|
@@ -1,61 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 7
|
3
|
-
---
|
4
|
-
# inspect
|
5
|
-
|
6
|
-
```
|
7
|
-
Usage: modern inspect [options]
|
8
|
-
|
9
|
-
Options:
|
10
|
-
--env <env> 查看指定环境下的配置 (default: "development")
|
11
|
-
--output <output> 指定在 dist 目录下输出的路径 (default: "/")
|
12
|
-
--verbose 在结果中展示函数的完整内容
|
13
|
-
-c --config <config> 指定配置文件路径,可以为相对路径或绝对路径
|
14
|
-
-h, --help 显示命令帮助
|
15
|
-
```
|
16
|
-
|
17
|
-
`modern inspect` 命令,用于查看项目的 [Modern.js Builder 配置](https://modernjs.dev/builder/guide/basic/builder-config.html) 以及 webpack 配置。
|
18
|
-
|
19
|
-
在项目根目录下执行命令 `npx modern inspect` 后,会在项目的 `dist` 目录生成以下文件:
|
20
|
-
|
21
|
-
- `builder.config.js`: 表示在构建时使用的 Modern.js Builder 配置。
|
22
|
-
- `webpack.config.web.js`: 表示在构建时使用的 webpack 配置。
|
23
|
-
|
24
|
-
```bash
|
25
|
-
➜ npx modern inspect
|
26
|
-
|
27
|
-
Inspect config succeed, open following files to view the content:
|
28
|
-
|
29
|
-
- Builder Config: /root/my-project/dist/builder.config.js
|
30
|
-
- Webpack Config (web): /root/my-project/dist/webpack.config.web.js
|
31
|
-
```
|
32
|
-
|
33
|
-
## 指定环境
|
34
|
-
|
35
|
-
默认情况下,inspect 命令会输出开发环境的配置,你可以添加 `--env production` 选项来输出生产环境的配置:
|
36
|
-
|
37
|
-
```bash
|
38
|
-
modern inspect --env production
|
39
|
-
```
|
40
|
-
|
41
|
-
## 完整内容
|
42
|
-
|
43
|
-
默认情况下,inspect 命令会省略配置对象中的函数内容,你可以添加 `--verbose` 选项来输出函数的完整内容:
|
44
|
-
|
45
|
-
```bash
|
46
|
-
modern inspect --verbose
|
47
|
-
```
|
48
|
-
|
49
|
-
## SSR 构建配置
|
50
|
-
|
51
|
-
如果项目开启了 SSR 能力,则在 `dist` 目录会另外生成一份 `webpack.config.node.js` 文件,对应 SSR 构建时的 webpack 配置。
|
52
|
-
|
53
|
-
```bash
|
54
|
-
➜ npx modern inspect
|
55
|
-
|
56
|
-
Inspect config succeed, open following files to view the content:
|
57
|
-
|
58
|
-
- Builder Config: /root/my-project/dist/builder.config.js
|
59
|
-
- Webpack Config (web): /root/my-project/dist/webpack.config.web.js
|
60
|
-
- Webpack Config (node): /root/my-project/dist/webpack.config.node.js
|
61
|
-
```
|
@@ -1,19 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 4
|
3
|
-
title: lint
|
4
|
-
---
|
5
|
-
# lint
|
6
|
-
|
7
|
-
```bash
|
8
|
-
Usage: modern lint [options] [...files]
|
9
|
-
|
10
|
-
lint and fix source files
|
11
|
-
|
12
|
-
Options:
|
13
|
-
--no-fix disable auto fix source file
|
14
|
-
-h, --help display help for command
|
15
|
-
```
|
16
|
-
|
17
|
-
运行 `ESLint` 检查代码语法情况。通常情况下,我们只需要在 `git commit` 阶段通过 `lint-staged` 检查本次提交修改的部分代码。
|
18
|
-
|
19
|
-
- `--no-fix` 参数设置后可以关闭自动修复 lint 错误代码的能力。
|
@@ -1,54 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 2
|
3
|
-
---
|
4
|
-
# new
|
5
|
-
|
6
|
-
```bash
|
7
|
-
Usage: modern new [options]
|
8
|
-
|
9
|
-
应用工程中执行生成器
|
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 显示命令帮助
|
17
|
-
```
|
18
|
-
|
19
|
-
`modern new` 命令用于在已有项目中添加项目元素。
|
20
|
-
|
21
|
-
比如添加应用入口、启用启用一些可选功能如 Tailwind CSS、微前端开发模式等。
|
22
|
-
|
23
|
-
### 添加入口
|
24
|
-
|
25
|
-
在应用工程中,执行 `new` 命令添加入口如下:
|
26
|
-
|
27
|
-
```bash
|
28
|
-
$ npx modern new
|
29
|
-
? 请选择你想要的操作 创建工程元素
|
30
|
-
? 创建工程元素 新建「应用入口」
|
31
|
-
? 请填写入口名称 entry
|
32
|
-
```
|
33
|
-
|
34
|
-
### 启用可选功能
|
35
|
-
|
36
|
-
在应用工程中,执行 `new` 命令启用可选能力如下:
|
37
|
-
|
38
|
-
```bash
|
39
|
-
$ npx modern new
|
40
|
-
? 请选择你想要的操作 启用可选功能
|
41
|
-
? 启用可选功能 (Use arrow keys)
|
42
|
-
❯ 启用 Tailwind CSS 支持
|
43
|
-
启用「BFF」功能
|
44
|
-
启用「微前端」模式
|
45
|
-
启用「单元测试 / 集成测试」功能
|
46
|
-
启用「Visual Testing (Storybook)」模式
|
47
|
-
```
|
48
|
-
|
49
|
-
:::caution 注意
|
50
|
-
`--config` 参数对应参数值需要使用 JSON 字符串。
|
51
|
-
|
52
|
-
pnpm 暂不支持使用 JSON 字符串作为参数值,可使用 `npm new` 开启相关功能。【[相关 Issue](https://github.com/pnpm/pnpm/issues/3876)】
|
53
|
-
|
54
|
-
:::
|
@@ -1,27 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 6
|
3
|
-
---
|
4
|
-
# serve
|
5
|
-
|
6
|
-
```bash
|
7
|
-
Usage: modern serve [options]
|
8
|
-
|
9
|
-
run server
|
10
|
-
|
11
|
-
Options:
|
12
|
-
-c --config <config> 指定配置文件路径,可以为相对路径或绝对路径
|
13
|
-
-h, --help 显示命令帮助
|
14
|
-
--api-only 仅启动 API 接口服务
|
15
|
-
```
|
16
|
-
|
17
|
-
通常使用 `modern serve` 命令在生产环境下启用应用工程, 需要提前执行 [`build`](/apis/app/commands/build) 命令构建出对应产物。
|
18
|
-
|
19
|
-
默认情况下,应用将会在 `localhost:8080` 启动,可以通过 `server.port` 修改 Server 端口号:
|
20
|
-
|
21
|
-
```js
|
22
|
-
export default defineConfig({
|
23
|
-
server: {
|
24
|
-
port: 8081,
|
25
|
-
},
|
26
|
-
});
|
27
|
-
```
|
@@ -1,35 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 3
|
3
|
-
---
|
4
|
-
# test
|
5
|
-
|
6
|
-
```bash
|
7
|
-
Usage: modern test [options]
|
8
|
-
|
9
|
-
Options:
|
10
|
-
-h, --help 显示命令帮助
|
11
|
-
```
|
12
|
-
|
13
|
-
:::caution 注意
|
14
|
-
`modern test` 命令需要先通过 [`new`](/apis/app/commands/new) 命令启用「单元测试 / 集成测试」功能
|
15
|
-
|
16
|
-
:::
|
17
|
-
|
18
|
-
`modern test` 命令会自动运行项目下的测试用例,效果如下:
|
19
|
-
|
20
|
-
```bash
|
21
|
-
$ npx modern test
|
22
|
-
PASS src/tests/index.test.ts
|
23
|
-
The add method
|
24
|
-
✓ should work fine. (2ms)
|
25
|
-
|
26
|
-
Test Suites: 1 passed, 1 total
|
27
|
-
Tests: 1 passed, 1 total
|
28
|
-
Snapshots: 0 total
|
29
|
-
Time: 0.994 s, estimated 1 s
|
30
|
-
```
|
31
|
-
|
32
|
-
:::info
|
33
|
-
`src` 和 `api` 目录下面 `*.test.(js|ts)` 都会默认识别为测试用例。
|
34
|
-
|
35
|
-
:::
|
@@ -1,18 +0,0 @@
|
|
1
|
-
---
|
2
|
-
sidebar_position: 8
|
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
|
-
在项目根目录下执行命令 `npx modern upgrade`,会默认将当前执行命令项目的 `package.json` 中的 Modern.js 相关依赖更新至最新版本。
|