@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.
Files changed (66) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/en/apis/app/commands.mdx +297 -0
  3. package/en/apis/app/hooks/_category_.json +1 -1
  4. package/en/apis/app/hooks/src/routes.mdx +2 -2
  5. package/en/components/init-app.mdx +5 -5
  6. package/en/configure/app/bff/prefix.mdx +2 -3
  7. package/en/configure/app/bff/proxy.mdx +1 -1
  8. package/en/configure/app/dev/before-start-url.mdx +13 -0
  9. package/en/configure/app/dev/host.mdx +13 -0
  10. package/en/configure/app/output/ssg.mdx +3 -3
  11. package/en/configure/app/runtime/master-app.mdx +1 -1
  12. package/en/configure/app/source/entries-dir.mdx +1 -1
  13. package/en/configure/app/testing/transformer.mdx +1 -1
  14. package/en/configure/app/tools/jest.mdx +1 -1
  15. package/en/guides/advanced-features/rspack-start.mdx +69 -0
  16. package/en/guides/advanced-features/ssg.mdx +8 -8
  17. package/en/guides/basic-features/alias.mdx +4 -4
  18. package/en/guides/basic-features/data-fetch.mdx +4 -4
  19. package/en/guides/basic-features/routes.mdx +23 -7
  20. package/en/guides/concept/builder.mdx +1 -1
  21. package/en/guides/get-started/quick-start.mdx +2 -2
  22. package/en/guides/topic-detail/micro-frontend/c03-main-app.mdx +1 -1
  23. package/en/tutorials/first-app/c07-container.mdx +17 -17
  24. package/en/tutorials/first-app/c08-entries.mdx +23 -23
  25. package/package.json +3 -3
  26. package/scripts/summary.en.json +1 -1
  27. package/scripts/summary.zh.json +1 -1
  28. package/zh/apis/app/commands.mdx +299 -0
  29. package/zh/apis/app/hooks/_category_.json +1 -1
  30. package/zh/apis/app/hooks/src/routes.mdx +2 -2
  31. package/zh/components/init-app.mdx +5 -5
  32. package/zh/configure/app/bff/prefix.mdx +1 -1
  33. package/zh/configure/app/bff/proxy.mdx +1 -1
  34. package/zh/configure/app/dev/before-start-url.mdx +13 -0
  35. package/zh/configure/app/dev/host.mdx +13 -0
  36. package/zh/configure/app/output/ssg.mdx +3 -3
  37. package/zh/configure/app/source/entries-dir.mdx +1 -1
  38. package/zh/guides/advanced-features/rspack-start.mdx +69 -0
  39. package/zh/guides/advanced-features/ssg.mdx +8 -8
  40. package/zh/guides/advanced-features/ssr.mdx +3 -2
  41. package/zh/guides/basic-features/alias.mdx +4 -4
  42. package/zh/guides/basic-features/data-fetch.mdx +4 -4
  43. package/zh/guides/basic-features/routes.mdx +23 -7
  44. package/zh/guides/concept/builder.mdx +2 -2
  45. package/zh/guides/get-started/quick-start.mdx +2 -2
  46. package/zh/guides/topic-detail/micro-frontend/c03-main-app.mdx +1 -1
  47. package/zh/tutorials/first-app/c07-container.mdx +17 -17
  48. package/zh/tutorials/first-app/c08-entries.mdx +23 -23
  49. package/en/apis/app/commands/_category_.json +0 -5
  50. package/en/apis/app/commands/build.mdx +0 -39
  51. package/en/apis/app/commands/dev.mdx +0 -61
  52. package/en/apis/app/commands/inspect.mdx +0 -61
  53. package/en/apis/app/commands/lint.mdx +0 -19
  54. package/en/apis/app/commands/new.mdx +0 -55
  55. package/en/apis/app/commands/serve.mdx +0 -27
  56. package/en/apis/app/commands/test.mdx +0 -35
  57. package/en/apis/app/commands/upgrade.mdx +0 -18
  58. package/zh/apis/app/commands/_category_.json +0 -5
  59. package/zh/apis/app/commands/build.mdx +0 -39
  60. package/zh/apis/app/commands/dev.mdx +0 -61
  61. package/zh/apis/app/commands/inspect.mdx +0 -61
  62. package/zh/apis/app/commands/lint.mdx +0 -19
  63. package/zh/apis/app/commands/new.mdx +0 -54
  64. package/zh/apis/app/commands/serve.mdx +0 -27
  65. package/zh/apis/app/commands/test.mdx +0 -35
  66. 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,5 +0,0 @@
1
- {
2
- "label": "命令",
3
- "position": 0,
4
- "collapsed": false
5
- }
@@ -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 相关依赖更新至最新版本。