@modern-js/main-doc 2.5.0 → 2.6.0

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 (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 相关依赖更新至最新版本。