@modern-js/main-doc 0.0.0-next-20230216090753 → 0.0.0-next-20230217072436

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 (52) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +2 -8
  3. package/en/apis/app/commands.mdx +297 -0
  4. package/en/apis/app/hooks/_category_.json +1 -1
  5. package/en/apis/app/hooks/src/routes.mdx +2 -2
  6. package/en/components/init-app.mdx +5 -5
  7. package/en/configure/app/bff/prefix.mdx +2 -3
  8. package/en/configure/app/bff/proxy.mdx +1 -1
  9. package/en/configure/app/output/ssg.mdx +3 -3
  10. package/en/configure/app/runtime/master-app.mdx +1 -1
  11. package/en/configure/app/source/entries-dir.mdx +1 -1
  12. package/en/configure/app/testing/transformer.mdx +1 -1
  13. package/en/configure/app/tools/jest.mdx +1 -1
  14. package/en/guides/advanced-features/ssg.mdx +8 -8
  15. package/en/guides/basic-features/alias.mdx +4 -4
  16. package/en/guides/basic-features/routes.mdx +7 -7
  17. package/en/guides/get-started/quick-start.mdx +2 -2
  18. package/en/tutorials/first-app/c07-container.mdx +17 -17
  19. package/en/tutorials/first-app/c08-entries.mdx +23 -23
  20. package/package.json +3 -3
  21. package/zh/apis/app/commands.mdx +299 -0
  22. package/zh/apis/app/hooks/_category_.json +1 -1
  23. package/zh/apis/app/hooks/src/routes.mdx +2 -2
  24. package/zh/components/init-app.mdx +5 -5
  25. package/zh/configure/app/bff/prefix.mdx +1 -1
  26. package/zh/configure/app/bff/proxy.mdx +1 -1
  27. package/zh/configure/app/output/ssg.mdx +3 -3
  28. package/zh/configure/app/source/entries-dir.mdx +1 -1
  29. package/zh/guides/advanced-features/ssg.mdx +8 -8
  30. package/zh/guides/basic-features/alias.mdx +4 -4
  31. package/zh/guides/basic-features/routes.mdx +7 -7
  32. package/zh/guides/get-started/quick-start.mdx +2 -2
  33. package/zh/tutorials/first-app/c07-container.mdx +17 -17
  34. package/zh/tutorials/first-app/c08-entries.mdx +23 -23
  35. package/en/apis/app/commands/_category_.json +0 -5
  36. package/en/apis/app/commands/build.mdx +0 -39
  37. package/en/apis/app/commands/dev.mdx +0 -61
  38. package/en/apis/app/commands/inspect.mdx +0 -61
  39. package/en/apis/app/commands/lint.mdx +0 -19
  40. package/en/apis/app/commands/new.mdx +0 -55
  41. package/en/apis/app/commands/serve.mdx +0 -27
  42. package/en/apis/app/commands/test.mdx +0 -35
  43. package/en/apis/app/commands/upgrade.mdx +0 -18
  44. package/zh/apis/app/commands/_category_.json +0 -5
  45. package/zh/apis/app/commands/build.mdx +0 -39
  46. package/zh/apis/app/commands/dev.mdx +0 -61
  47. package/zh/apis/app/commands/inspect.mdx +0 -61
  48. package/zh/apis/app/commands/lint.mdx +0 -19
  49. package/zh/apis/app/commands/new.mdx +0 -54
  50. package/zh/apis/app/commands/serve.mdx +0 -27
  51. package/zh/apis/app/commands/test.mdx +0 -35
  52. package/zh/apis/app/commands/upgrade.mdx +0 -18
@@ -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
- Development commands
11
-
12
- Options:
13
- -e --entry <entry> compiler by entry
14
- -c --config <config> configuration file path, which can be a relative path or an absolute path
15
- -h, --help show command help
16
- --analyze analyze the bundle and view size of each module
17
- --api-only only start API service
18
- ```
19
-
20
- `modern dev` start a development server,watch file change,default support React Fast Refresh:
21
-
22
- `modern start` is an alias of `modern dev` command, the usage of the two are exactly the same.
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
- ## Compile Partial Pages
35
-
36
- In multi-page (MPA) projects, the `--entry` option can be added to specify one or more pages to compile. In this way, only part of the code in the project will be compiled, and the dev startup speed will be faster.
37
-
38
- For example, execute `modern dev --entry`, the entry selector will be displayed in the command line interface:
39
-
40
- ```bash
41
- $ modern dev --entry
42
-
43
- ? Please select the entry that needs to be built
44
- ❯ ◯ foo
45
- ◯ bar
46
- ◯ baz
47
- ```
48
-
49
- For example, if you select the `foo` entry, only the code related to the `foo` entry will be compiled, and the code of other pages will not be compiled.
50
-
51
- ### Specify the page by parameter
52
-
53
- You can also specify the page name through parameters after `--entry`, and the names of multiple pages can be separated by commas.
54
-
55
- ```bash
56
- # Compile foo page
57
- modern dev --entry foo
58
-
59
- # Compile foo and bar pages
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> view the configuration in the target environment (default: "development")
11
- --output <output> Specify the path to output in the dist (default: "/")
12
- --verbose Show the full function in the result
13
- -c --config <config> configuration file path, which can be a relative path or an absolute path
14
- -h, --help show command help
15
- ```
16
-
17
- `modern inspect` command used to view the [Modern.js Builder config](https://modernjs.dev/builder/en/guide/basic/builder-config.html) and webpack config of the project.
18
-
19
- After executing the command `npx modern inspect` in the project root directory, the following files will be generated in the `dist` directory of the project:
20
-
21
- - `builder.config.js`: The Modern.js Builder config to use at build time.
22
- - `webpack.config.web.js`: The webpack config used by to use at build time.
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
- ## Configuration Env
34
-
35
- By default, the inspect command will output the development configs, you can use the `--env production` option to output the production configs:
36
-
37
- ```bash
38
- modern inspect --env production
39
- ```
40
-
41
- ## Verbose content
42
-
43
- By default, the inspect command will omit the function content in the config object, you can use the `--verbose` option to output the full content of the function:
44
-
45
- ```bash
46
- modern inspect --verbose
47
- ```
48
-
49
- ### SSR Configuration
50
-
51
- If the project has enabled SSR, an additional `webpack.config.node.js` file will be generated in the `dist/`, corresponding to the webpack configuration at SSR build time.
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
- Run ESLint to check the syntax of the code. Normally, only the part of the code modified by this commit needs to be checked by `lint-staged` during the `git commit` phase.
18
-
19
- - `--no-fix` close auto fix by lint.
@@ -1,55 +0,0 @@
1
- ---
2
- sidebar_position: 2
3
- ---
4
- # new
5
-
6
- ```bash
7
- Usage: modern new [options]
8
-
9
- Execution Generator in App
10
-
11
- Options:
12
- -d, --debug using debug mode to log something (default: false)
13
- -c, --config <config> set default generator config(json string)
14
- --dist-tag <tag> use specified tag version for its generator
15
- --registry set npm registry url to run npm command
16
- -h, --help show command help
17
- ```
18
-
19
- The `modern new` command is used to enable features to an existing project.
20
-
21
- For example, add application entry, enable some optional features such as Tailwind CSS, micro frontend, etc.
22
-
23
- ### Add Entry
24
-
25
- In the project, execute the `new` command to add entries as follows:
26
-
27
- ```bash
28
- $ npx modern new
29
- ? Action Create project element
30
- ? Create project element New "entry"
31
- ? Entry name entry
32
- ```
33
-
34
- ### Enable Features
35
-
36
- In the project, execute the `new` command to enable features as follows:
37
-
38
- ```bash
39
- $ npx modern new
40
- ? Action Enable features
41
- ? Enable features (Use arrow keys)
42
- ❯ Enable Tailwind CSS
43
- Enable BFF
44
- Enable SSG
45
- Enable Micro Frontend
46
- Enable Unit Test / Integration Test
47
- Enable Visual Testing (Storybook)
48
- ```
49
-
50
- :::caution
51
- The `--config` parameter needs to use a JSON string.
52
-
53
- pnpm does not support the use of JSON strings as parameter values currently. Use `npm new` to turn on.【[Relate Issue](https://github.com/pnpm/pnpm/issues/3876)】
54
-
55
- :::
@@ -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> configuration file path, which can be a relative path or an absolute path
13
- -h, --help show command help
14
- --api-only only run API service
15
- ```
16
-
17
- Usually use the `modern serve` command to enable project run in the production environment, and you need to execute the [`build'](/apis/app/commands/build) command in advance to build the product.
18
-
19
- By default, the project will run in `localhost:8080`, you can modify the Server port number with `server.port`:
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 show command help
11
- ```
12
-
13
- :::caution
14
- `modern test` command need to execute the `new` command in advance to enable the `unit test/integration test`.
15
-
16
- :::
17
-
18
- `modern test` command will automatically run the test cases, the effect is as follows:
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
- files match `*.test.(js|ts)` in `api/` or `src/` will be recognized as test cases by default.
34
-
35
- :::
@@ -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 相关依赖更新至最新版本。