@modern-js/main-doc 2.60.6 → 2.61.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (55) hide show
  1. package/docs/en/apis/app/runtime/core/use-runtime-context.mdx +86 -33
  2. package/docs/en/components/init-app.mdx +0 -1
  3. package/docs/en/components/init-rspack-app.mdx +0 -1
  4. package/docs/en/guides/advanced-features/source-build.mdx +11 -4
  5. package/docs/en/guides/basic-features/deploy.mdx +104 -2
  6. package/docs/en/guides/concept/entries.mdx +58 -5
  7. package/docs/en/guides/get-started/introduction.mdx +1 -38
  8. package/docs/zh/apis/app/runtime/core/use-runtime-context.mdx +86 -33
  9. package/docs/zh/components/default-mwa-generate.mdx +0 -1
  10. package/docs/zh/components/init-app.mdx +0 -1
  11. package/docs/zh/components/init-rspack-app.mdx +0 -1
  12. package/docs/zh/guides/advanced-features/source-build.mdx +11 -4
  13. package/docs/zh/guides/basic-features/deploy.mdx +103 -5
  14. package/docs/zh/guides/concept/entries.mdx +52 -4
  15. package/docs/zh/guides/get-started/introduction.mdx +1 -36
  16. package/package.json +4 -4
  17. package/src/i18n/enUS.ts +0 -7
  18. package/src/i18n/zhCN.ts +0 -7
  19. package/src/pages/index.tsx +3 -32
  20. package/docs/en/guides/topic-detail/generator/_meta.json +0 -17
  21. package/docs/en/guides/topic-detail/generator/create/_meta.json +0 -1
  22. package/docs/en/guides/topic-detail/generator/create/config.mdx +0 -59
  23. package/docs/en/guides/topic-detail/generator/create/option.md +0 -146
  24. package/docs/en/guides/topic-detail/generator/create/use.mdx +0 -48
  25. package/docs/en/guides/topic-detail/generator/new/_meta.json +0 -1
  26. package/docs/en/guides/topic-detail/generator/new/config.md +0 -115
  27. package/docs/en/guides/topic-detail/generator/new/option.md +0 -67
  28. package/docs/en/guides/topic-detail/generator/new/use.md +0 -75
  29. package/docs/en/guides/topic-detail/generator/plugin/_meta.json +0 -11
  30. package/docs/en/guides/topic-detail/generator/plugin/api/afterForged.md +0 -49
  31. package/docs/en/guides/topic-detail/generator/plugin/api/context.md +0 -184
  32. package/docs/en/guides/topic-detail/generator/plugin/api/input.md +0 -124
  33. package/docs/en/guides/topic-detail/generator/plugin/api/onForged.md +0 -310
  34. package/docs/en/guides/topic-detail/generator/plugin/category.md +0 -88
  35. package/docs/en/guides/topic-detail/generator/plugin/context.md +0 -104
  36. package/docs/en/guides/topic-detail/generator/plugin/structure.md +0 -106
  37. package/docs/en/guides/topic-detail/generator/plugin/use.md +0 -33
  38. package/docs/zh/guides/topic-detail/generator/_meta.json +0 -17
  39. package/docs/zh/guides/topic-detail/generator/create/_meta.json +0 -1
  40. package/docs/zh/guides/topic-detail/generator/create/config.mdx +0 -60
  41. package/docs/zh/guides/topic-detail/generator/create/option.md +0 -146
  42. package/docs/zh/guides/topic-detail/generator/create/use.mdx +0 -48
  43. package/docs/zh/guides/topic-detail/generator/new/_meta.json +0 -1
  44. package/docs/zh/guides/topic-detail/generator/new/config.md +0 -116
  45. package/docs/zh/guides/topic-detail/generator/new/option.md +0 -67
  46. package/docs/zh/guides/topic-detail/generator/new/use.md +0 -74
  47. package/docs/zh/guides/topic-detail/generator/plugin/_meta.json +0 -11
  48. package/docs/zh/guides/topic-detail/generator/plugin/api/afterForged.md +0 -50
  49. package/docs/zh/guides/topic-detail/generator/plugin/api/context.md +0 -184
  50. package/docs/zh/guides/topic-detail/generator/plugin/api/input.md +0 -124
  51. package/docs/zh/guides/topic-detail/generator/plugin/api/onForged.md +0 -310
  52. package/docs/zh/guides/topic-detail/generator/plugin/category.md +0 -93
  53. package/docs/zh/guides/topic-detail/generator/plugin/context.md +0 -105
  54. package/docs/zh/guides/topic-detail/generator/plugin/structure.md +0 -106
  55. package/docs/zh/guides/topic-detail/generator/plugin/use.md +0 -33
@@ -1,60 +0,0 @@
1
- ---
2
- sidebar_position: 3
3
- ---
4
-
5
- # 配置参数
6
-
7
- `@modern-js/create` 提供了 [--config](/guides/topic-detail/generator/create/option.html#-c,---config-<config>) 参数,用于提前指定执行过程中交互问题的答案。
8
-
9
- 这里将介绍不同情况下,可以在 `config` 中配置的字段及字段值。
10
-
11
-
12
- ## 通用配置
13
-
14
- ### solution
15
-
16
- 问题:请选择你想创建的工程类型
17
-
18
- 选项:
19
-
20
- - Web 应用 -- mwa
21
-
22
- - Npm 模块 -- module
23
-
24
- - 文档站 -- doc
25
-
26
- ### scenes
27
-
28
- 问题:请选择项目场景
29
-
30
- 选项:
31
-
32
- 使用自定义生成器插件时的插件关键字列表。
33
-
34
- ## Web 应用
35
-
36
- import LanguageConfig from '@site-docs/components/language-config';
37
-
38
- <LanguageConfig />
39
-
40
- import PackageManager from '@site-docs/components/package-manager';
41
-
42
- <PackageManager />
43
-
44
- ## Npm 模块
45
-
46
- ### packageName
47
-
48
- 问题:请填写项目名称
49
-
50
- :::info
51
- Npm 模块的 `package.json` 的 name 字段值,该配置值为字符串类型。
52
- :::
53
-
54
- <LanguageConfig />
55
-
56
- <PackageManager />
57
-
58
- ## 文档站
59
-
60
- <PackageManager />
@@ -1,146 +0,0 @@
1
- ---
2
- sidebar_position: 2
3
- ---
4
-
5
- # CLI 参数
6
-
7
- `@modern-js/create` 提供了很多配置参数用于配置其执行过程中的行为,可以通过 `--help` 参数进行查看:
8
-
9
- ```bash
10
- npx @modern-js/create@latest --help
11
-
12
- Usage: npx @modern-js/create@latest [projectDir]
13
-
14
- 创建 Modern.js 工程方案
15
-
16
- Options:
17
- --version 当前 create 工具版本号
18
- --lang <lang> 设置 create 工具语言(zh 或者 en)
19
- -c, --config <config> 创建项目默认配置(JSON 字符串) (default: "{}")
20
- -d,--debug 开启 Debug 模式,打印调试日志信息 (default: false)
21
- --mwa 一键创建 Web 应用(使用默认配置) (default: false)
22
- --module 一键创建 Module 应用(使用默认配置) (default: false)
23
- --generator <generator> 使用自定义生成器
24
- -p, --plugin <plugin> 使用生成器插件创建新的工程方案类型或定制化 Modern.js 工程方案 (default: [])
25
- --dist-tag <distTag> 生成项目时生成器使用特殊的 npm Tag (default: "")
26
- --packages <packages> 创建项目指定特定依赖版本信息 (default: "{}")
27
- --registry <registry> 在创建过程中定制 npm Registry (default: "")
28
- --no-need-install 无需安装依赖
29
- -h, --help display help for command
30
-
31
- Commands:
32
- clean-cache 清除本地生成器缓存
33
- ```
34
-
35
- 下面将针对这些参数做详细介绍:
36
-
37
- ## [projectDir]
38
-
39
- 项目目录名称。
40
-
41
- 执行 `@modern-js/create` 时,默认会在当前目录创建 `projectDir` 文件夹,并在该文件夹下初始化项目。该参数为空时,将会在当前目录直接生成初始化项目。
42
-
43
- :::info
44
- 如果 `projectDir` 所在目录内容不为空,将会提示是否继续创建,推荐在空目录下进行项目初始化操作。
45
- :::
46
-
47
- ## --version
48
-
49
- 获取 `@modern-js/create` 工具版本。
50
-
51
- ```bash
52
- npx @modern-js/create@latest --version
53
-
54
- [INFO] @modern-js/create v2.21.1
55
- ```
56
-
57
- ## --lang \<lang>
58
-
59
- 执行执行语言,支持 `zh` 和 `en`。
60
-
61
- 默认情况下,`@modern-js/create` 会自动识别用户的系统语言,选择使用中文或者英文,如果识别失败或者不符合使用习惯,可以使用该参数手动指定。
62
-
63
- ## -c, --config \<config>
64
-
65
- 指定项目默认配置。
66
-
67
- 默认情况下,`@modern-js/create` 在执行过程中会出现选择语言、包管理工具等交互问题,当需要提前指定这些配置内容时,可以通过该字段传入。
68
-
69
- 该字段为 JSON 字符串,例如需指定包管理工具时:
70
-
71
- ```bash
72
- npx @modern-js/create@latest --config '{"packageManager": "pnpm"}'
73
- ```
74
-
75
- `config` 支持的参数可查看[配置参数](/guides/topic-detail/generator/create/config.html)。
76
-
77
- ## -d,--debug
78
-
79
- 展示调试日志。
80
-
81
- 当在使用过程中遇到问题时,可以使用该参数显示调试日志,方便快速定位问题位置及对问题进行排查。
82
-
83
- ## --mwa
84
-
85
- 快速创建 Web 应用项目。
86
-
87
- ## --module
88
-
89
- 快速创建 Npm 模块项目。
90
-
91
- ## -p, --plugin \<plugin>
92
-
93
- 指定生成器插件。
94
-
95
- `@modern-js/create` 支持使用生成器插件定制 Modern.js 默认的工程方案类型或者添加工程方案类型场景,详情可查看[开发生成器插件](/guides/topic-detail/generator/plugin/structure.html)。
96
-
97
- ## --generator \<generator>
98
-
99
- 指定微生成器。
100
-
101
- <!-- TODO 详情可查看[开发微生成器]-->
102
- `@modern-js/create` 支持使用微生成器完全定制项目生成流程。
103
-
104
- ## --dist-tag \<distTag>
105
-
106
- 指定生成器及 Modern.js 相关依赖版本。
107
-
108
- `@modern-js/create` 执行过程中会执行更小的微生成器,默认会使用 `latest` 的微生成器版本,使用该参数可以指定执行的微生成器的版本号和对应的安装 Modern.js 相关依赖的版本。
109
-
110
- 比如使用 `next` 版本:
111
-
112
- ```bash
113
- npx @modern-js/create@next --dist-tag next
114
- ```
115
-
116
- ## --packages \<packages>
117
-
118
- 创建项目是指定特定包版本依赖。
119
-
120
- 在创建项目时如果有需要指定特定包版本,可以使用该参数。该参数会在项目根目录的 `package.json` 中配置 `pnpm.overrides`(包管理工具选择 pnpm) 或者 `resolutions` 锁定包版本号。
121
-
122
- 该参数值为 JSON 字符串。
123
-
124
- 例如指定 react 版本:
125
-
126
- ```bash
127
- npx @modern-js/create@latest --packages '{"react":"^17"}'
128
- ```
129
-
130
- ## --registry \<registry>
131
-
132
- 指定执行子生成器和获取项目依赖版本的 npm registry。
133
-
134
- ## --no-need-install
135
-
136
- 忽略自动安装依赖。
137
-
138
- 默认情况下,`@modern-js/create` 在创建项目完成后会自动安装依赖,使用该参数可以忽略安装依赖步骤。
139
-
140
- ## clean-cache
141
-
142
- `@modern-js/create` 默认会在执行机器的 tmp 目录生成子生成器缓存用于加快生成器执行速度,在需要刷新缓存或者缓存出现问题时可以使用该命令删除缓存。
143
-
144
- ```bash
145
- npx @modern-js/create@latest clean-cache
146
- ```
@@ -1,48 +0,0 @@
1
- ---
2
- sidebar_position: 1
3
- ---
4
-
5
- # 使用
6
-
7
- Modern.js 提供了 `@modern-js/create` 工具用于创建 Modern.js 提供的工程方案项目,例如 [Web 应用](https://modernjs.dev/)、[Npm 模块](https://modernjs.dev/module-tools)。
8
-
9
- 下面将介绍 `@modern-js/create` 的使用姿势。
10
-
11
- ## 环境准备
12
-
13
- import Prerequisites from "@site-docs/components/prerequisites"
14
-
15
- <Prerequisites />
16
-
17
- ## 使用 `@modern-js/create` 创建项目
18
-
19
- 不需要全局安装 `@modern-js/create`,直接使用 npx 执行即可:
20
-
21
- ```bash
22
- npx @modern-js/create@latest [projectDir]
23
- ```
24
-
25
- :::info
26
- `[projectDir]` 为项目目录名称,不填写将会在当前目录创建项目。
27
- :::
28
-
29
- 执行过程中需要根据提示完成交互,创建符合需求的项目。
30
-
31
- ### 创建 Web 应用项目
32
-
33
- ```bash
34
- npx @modern-js/create@latest web-app
35
- ? 请选择你想创建的工程类型 Web 应用
36
- ? 请选择开发语言 TS
37
- ? 请选择包管理工具 pnpm
38
- ```
39
-
40
- ### 创建 Npm 模块项目
41
-
42
- ```bash
43
- npx @modern-js/create@latest npm-module
44
- ? 请选择你想创建的工程类型 Npm 模块
45
- ? 请填写项目名称 npm-module
46
- ? 请选择开发语言 TS
47
- ? 请选择包管理工具 pnpm
48
- ```
@@ -1 +0,0 @@
1
- ["use", "option", "config"]
@@ -1,116 +0,0 @@
1
- ---
2
- sidebar_position: 3
3
- ---
4
-
5
- # 配置参数
6
-
7
- `new` 命令提供了 [--config](/guides/topic-detail/generator/new/option.html#-c,---config-<config>) 参数,用于提前指定执行过程中交互问题的答案。
8
-
9
- 这里将介绍不同情况下,可以在 `config` 中配置的字段及字段值。
10
-
11
- ## 通用配置
12
-
13
- ### actionType
14
-
15
- 问题:请选择你想要的操作
16
-
17
- 选项:
18
-
19
- - 创建工程元素 -- element
20
-
21
- - 启用可选功能 -- function
22
-
23
- - 自动重构 -- refactor
24
-
25
- ## Web 应用
26
-
27
- ### element
28
-
29
- 问题:请选择创建元素类型
30
-
31
- 选项:
32
-
33
- - 新建「应用入口」 -- entry
34
-
35
- - 新建「自定义 Web Server」源码目录 -- server
36
-
37
- ### name
38
-
39
- 问题: 请填写入口名称
40
-
41
- :::info
42
- 新建应用入口时需要该配置,该配置值为字符串类型。
43
- :::
44
-
45
- ### function
46
-
47
- 问题:请选择功能名称
48
-
49
- 选项:
50
-
51
- - 启用「Rspack 构建」 -- rspack
52
-
53
- - 启用 「Tailwind CSS」 支持 -- tailwindcss
54
-
55
- - 启用「BFF」功能 -- bff
56
-
57
- - 启用「SSG」功能 -- ssg
58
-
59
- - 启用「SWC 编译」-- swc
60
-
61
- - 启用「微前端」模式 -- micro_frontend
62
-
63
- - 启用「基于 UA 的 Polyfill」功能 -- polyfill
64
-
65
- - 启用「全局代理」 -- proxy
66
-
67
-
68
- ### bffType
69
-
70
- 问题:请选择 BFF 类型
71
-
72
- 选项:
73
-
74
- - 函数模式 -- func
75
-
76
- - 框架模式 -- framework
77
-
78
- :::info
79
- 启用 BFF 功能时需要该配置。
80
- :::
81
-
82
- ### framework
83
-
84
- 问题:请选择运行时框架
85
-
86
- 选项:
87
-
88
- - Express -- express
89
-
90
- - Koa -- koa
91
-
92
- :::info
93
- 启用 BFF 功能时需要该配置。
94
- :::
95
-
96
- ### refactor
97
-
98
- 问题:请选择重构类型
99
-
100
- 选项:
101
-
102
- - 使用 React Router v5 -- react_router_5
103
-
104
- ## Npm 模块
105
-
106
- ### function
107
-
108
- 问题:启用可选功能
109
-
110
- 选项:
111
-
112
- - 启用 「Tailwind CSS」 支持 -- tailwindcss
113
-
114
- - 启用「Storybook」 -- storybook
115
-
116
- - 启用「Runtime API」 -- runtime_api
@@ -1,67 +0,0 @@
1
- ---
2
- sidebar_position: 2
3
- ---
4
-
5
- # CLI 参数
6
-
7
- `new` 命令提供了很多配置参数用于配置其执行过程中的行为,可以通过 `--help` 参数进行查看:
8
-
9
- ```bash
10
- npm run new --help
11
-
12
- Usage: modern new [options]
13
-
14
- 启用可选功能
15
-
16
- Options:
17
- --lang <lang> 设置 new 命令执行语言(zh 或者 en)
18
- -c, --config <config> 生成器运行默认配置(JSON 字符串)
19
- -d, --debug 开启 Debug 模式,打印调试日志信息 (default: false)
20
- --dist-tag <tag> 生成器使用特殊的 npm Tag 版本
21
- --registry <registry> 生成器运行过程中定制 npm Registry
22
- -h, --help display help for command
23
- ```
24
-
25
- 下面将针对这些参数做详细介绍:
26
-
27
- ## --lang \<lang>
28
-
29
- 执行执行语言,支持 `zh` 和 `en`。
30
-
31
- 默认情况下,`new` 命令会自动识别用户的系统语言,选择使用中文或者英文,如果识别失败或者不符合使用习惯,可以使用该参数手动指定。
32
-
33
- ## -c, --config \<config>
34
-
35
- 指定项目默认配置。
36
-
37
- 默认情况下,new 命令在执行过程中会出现选择操作类型、开启功能等交互问题,当需要提前指定这些配置内容时,可以通过该字段传入。
38
-
39
- 该字段为 JSON 字符串,例如需指定 BFF 框架时:
40
-
41
- ```bash
42
- npm run new --config '{"framework": "express"}'
43
- ```
44
-
45
- `config` 支持的参数可查看[配置参数](/guides/topic-detail/generator/new/config.html)。
46
-
47
- ## -d,--debug
48
-
49
- 展示调试日志。
50
-
51
- 当在使用过程中遇到问题时,可以使用该参数显示调试日志,方便快速定位问题位置及对问题进行排查。
52
-
53
- ## --registry \<registry>
54
-
55
- 指定执行子生成器和获取项目依赖版本的 npm registry。
56
-
57
- ## --dist-tag \<distTag>
58
-
59
- 指定生成器版本。
60
-
61
- `new` 命令执行过程中会执行更小的微生成器,默认会使用 `latest` 的微生成器版本,使用该参数可以指定执行的微生成器的版本号的版本。
62
-
63
- 比如使用 `next` 版本:
64
-
65
- ```bash
66
- npm run new --dist-tag next
67
- ```
@@ -1,74 +0,0 @@
1
- ---
2
- sidebar_position: 1
3
- ---
4
-
5
- # 使用
6
-
7
- 在 Web 应用、 Npm 模块中,我们提供了 `new` 命令用于创建项目元素、开启功能和创建子项目。
8
-
9
- ## Web 应用
10
-
11
- Web 应用项目通过 `@modern-js/app-tools` 提供 `new` 命令。
12
-
13
- new 命令提供了三种操作类型:
14
-
15
- - 创建工程元素
16
-
17
- - 启用可选功能
18
-
19
- - 自动重构
20
-
21
- 每种操作类型都提供了对应支持的列表,可根据项目情况进行选择。
22
-
23
- 例如:
24
-
25
- 创建新的应用入口:
26
-
27
- ```bash
28
- npm run new
29
- ? 请选择你想要的操作 创建工程元素
30
- ? 请选择创建元素类型 新建「应用入口」
31
- ? 请填写入口名称 entry
32
- ```
33
-
34
- 执行完成后将会在项目 `src` 目录创建新入口对应名称的文件夹及默认入口文件,并且自动帮忙整理之前 `src` 下入口文件到 `package.json` 中 `name` 字段对应的文件夹中。
35
-
36
- 开启 BFF 功能:
37
-
38
- ```bash
39
- npm run new
40
- ? 请选择你想要的操作 启用可选功能
41
- ? 请选择功能名称 启用「BFF」功能
42
- ? 请选择 BFF 类型 函数模式
43
- ? 请选择运行时框架 Express
44
- ```
45
-
46
- 执行完成后将会在项目安装 BFF 相关依赖,并创建 api 目录用于 BFF 模块的开发并提供提示信息用于注册 BFF 插件。
47
-
48
- :::info
49
- 这里未帮助用户自动注册插件,原因是由于 `modern.config.[tj]s` 在项目生命周期中变化比较复杂,可能存在模块之间互相引用问题,让用户手动注册能保证修改配置的正确性。
50
-
51
- 在后续定制化的开发中,如果有类似的需求,也可以通过提示的方式给到使用方操作指南,让用户对文件进行手动操作。
52
- :::
53
-
54
- :::warning
55
- 执行 new 命令时可能会出现需要开启的功能不在列表中,需要检查一下项目 `package.json` 中是否已经安装对应功能的插件,如果仍需使用 new 命令开启,需要先手动移除对应的插件依赖。
56
- :::
57
-
58
- ## Npm 模块
59
-
60
- Npm 模块项目通过 `@modern-js/module-tools` 提供 new 命令。
61
-
62
- new 命令提供了启用可选功能的能力。
63
-
64
- 例如:
65
-
66
- 开启 Storybook 能力:
67
-
68
- ```bash
69
- npm run new
70
- ? 请选择你想要的操作 启用可选功能
71
- ? 请选择功能名称 启用「Storybook」
72
- ```
73
-
74
- 执行完成后将会在项目安装 Storybook 插件相关依赖,增加 `storybook` 命令,创建 `stories` 目录用于 Storybook 模块的开发并提供提示信息用于注册 Storybook 插件。
@@ -1,11 +0,0 @@
1
- [
2
- "structure",
3
- "category",
4
- "use",
5
- "context",
6
- {
7
- "type": "dir",
8
- "name": "api",
9
- "label": "API"
10
- }
11
- ]
@@ -1,50 +0,0 @@
1
- ---
2
- sidebar_position: 3
3
- ---
4
-
5
- # afterForged
6
-
7
- `afterForged` 为生成器插件中用于文件操作后其他步骤操作的生命周期函数。
8
-
9
- ## 类型
10
-
11
- ```ts
12
- export type AfterForgedAPI = {
13
- isInGitRepo: () => Promise<boolean>;
14
- initGitRepo: () => Promise<void>;
15
- gitAddAndCommit: (commitMessage: string) => Promise<void>;
16
- install: () => Promise<void>;
17
- };
18
-
19
- export type PluginAfterForgedFunc = (api: AfterForgedAPI, inputData: Record<string, unknown>) => Promise<void>;
20
-
21
- export interface IPluginContext {
22
- afterForged: (func: PluginAfterForgedFunc) => void;
23
- ...
24
- }
25
- ```
26
-
27
- ## API
28
-
29
- 下面将分别介绍 api 参数提供的 API。
30
-
31
- ### isInGitRepo
32
-
33
- 判断当前项目是否为一个 Git 仓库。
34
-
35
- ### initGitRepo
36
-
37
- 初始化当前项目为 Git 仓库。
38
-
39
- ### gitAddAndCommit
40
-
41
- 提交当前仓库变更。
42
-
43
- 参数:
44
-
45
- - `commitMessage`: commit 信息。
46
-
47
-
48
- ### install
49
-
50
- 在项目根目录安装依赖。`install` 函数中将根据 `packageManager` 的值使用对应的包管理工具安装依赖。