@modern-js/main-doc 2.9.0 → 2.11.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (255) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/docs/en/apis/app/hooks/src/server.mdx +1 -28
  3. package/docs/en/apis/app/runtime/web-server/hook.mdx +1 -3
  4. package/docs/en/apis/app/runtime/web-server/middleware.mdx +1 -4
  5. package/docs/en/blog/index.md +8 -0
  6. package/docs/en/configure/app/output/splitRouteChunks.mdx +20 -0
  7. package/docs/en/configure/app/source/config-dir.mdx +2 -2
  8. package/docs/en/configure/app/source/design-system.mdx +2 -2
  9. package/docs/en/configure/app/source/disable-default-entries.mdx +12 -12
  10. package/docs/en/configure/app/source/disable-entry-dirs.mdx +3 -4
  11. package/docs/en/configure/app/source/enable-async-entry.mdx +2 -2
  12. package/docs/en/configure/app/source/entries-dir.mdx +10 -10
  13. package/docs/en/configure/app/source/entries.mdx +83 -26
  14. package/docs/en/configure/app/source/plugin-import.mdx +13 -0
  15. package/docs/en/configure/app/source/transform-import.mdx +13 -0
  16. package/docs/en/configure/app/tools/esbuild.mdx +9 -4
  17. package/docs/en/configure/app/tools/jest.mdx +2 -3
  18. package/docs/en/configure/app/tools/swc.mdx +6 -2
  19. package/docs/en/guides/advanced-features/compatibility.mdx +1 -0
  20. package/docs/en/guides/advanced-features/rspack-start.mdx +1 -1
  21. package/docs/en/guides/advanced-features/ssr.mdx +4 -3
  22. package/docs/en/guides/advanced-features/web-server.mdx +1 -1
  23. package/docs/en/guides/concept/entries.mdx +130 -39
  24. package/docs/en/guides/get-started/introduction.mdx +1 -1
  25. package/docs/en/guides/get-started/quick-start.mdx +2 -0
  26. package/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx +7 -3
  27. package/docs/en/guides/topic-detail/framework-plugin/plugin-api.mdx +29 -28
  28. package/docs/en/guides/topic-detail/generator/codesmith/api/fs.mdx +2 -2
  29. package/docs/en/guides/topic-detail/model/typescript-best-practice.mdx +4 -4
  30. package/docs/en/tutorials/first-app/c06-model.mdx +15 -12
  31. package/docs/en/tutorials/first-app/c07-container.mdx +22 -19
  32. package/docs/zh/apis/app/hooks/src/server.mdx +1 -28
  33. package/docs/zh/apis/app/runtime/web-server/hook.mdx +1 -3
  34. package/docs/zh/apis/app/runtime/web-server/middleware.mdx +1 -4
  35. package/docs/zh/blog/index.md +71 -3
  36. package/docs/zh/blog/updates/2022-0708-updates.md +96 -0
  37. package/docs/zh/blog/updates/2022-0910-updates.md +80 -0
  38. package/docs/zh/blog/updates/_category_.json +5 -0
  39. package/docs/zh/blog/updates/v2-release-note.mdx +250 -0
  40. package/docs/zh/configure/app/output/splitRouteChunks.mdx +20 -0
  41. package/docs/zh/configure/app/source/config-dir.mdx +2 -2
  42. package/docs/zh/configure/app/source/design-system.mdx +3 -3
  43. package/docs/zh/configure/app/source/disable-default-entries.mdx +11 -10
  44. package/docs/zh/configure/app/source/disable-entry-dirs.mdx +2 -3
  45. package/docs/zh/configure/app/source/enable-async-entry.mdx +3 -3
  46. package/docs/zh/configure/app/source/entries-dir.mdx +10 -11
  47. package/docs/zh/configure/app/source/entries.mdx +84 -23
  48. package/docs/zh/configure/app/source/plugin-import.mdx +13 -0
  49. package/docs/zh/configure/app/source/transform-import.mdx +13 -0
  50. package/docs/zh/configure/app/tools/esbuild.mdx +9 -5
  51. package/docs/zh/configure/app/tools/jest.mdx +2 -3
  52. package/docs/zh/configure/app/tools/swc.mdx +6 -2
  53. package/docs/zh/guides/advanced-features/compatibility.mdx +1 -0
  54. package/docs/zh/guides/advanced-features/eslint.mdx +1 -1
  55. package/docs/zh/guides/advanced-features/rspack-start.mdx +1 -1
  56. package/docs/zh/guides/advanced-features/ssr.mdx +6 -3
  57. package/docs/zh/guides/advanced-features/web-server.mdx +10 -5
  58. package/docs/zh/guides/concept/entries.mdx +36 -35
  59. package/docs/zh/guides/get-started/quick-start.mdx +2 -0
  60. package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx +6 -2
  61. package/docs/zh/guides/topic-detail/framework-plugin/plugin-api.mdx +30 -29
  62. package/docs/zh/guides/topic-detail/generator/codesmith/api/fs.mdx +2 -2
  63. package/docs/zh/tutorials/first-app/c06-model.mdx +14 -12
  64. package/docs/zh/tutorials/first-app/c07-container.mdx +22 -19
  65. package/modern.config.ts +6 -7
  66. package/package.json +5 -5
  67. package/src/pages/index.tsx +10 -5
  68. package/en/configure/app/dev/asset-prefix.mdx +0 -13
  69. package/en/configure/app/dev/before-start-url.mdx +0 -13
  70. package/en/configure/app/dev/hmr.mdx +0 -13
  71. package/en/configure/app/dev/host.mdx +0 -13
  72. package/en/configure/app/dev/https.mdx +0 -13
  73. package/en/configure/app/dev/port.mdx +0 -13
  74. package/en/configure/app/dev/progress-bar.mdx +0 -13
  75. package/en/configure/app/dev/start-url.mdx +0 -13
  76. package/en/configure/app/experiments/lazy-compilation.mdx +0 -13
  77. package/en/configure/app/html/app-icon.mdx +0 -13
  78. package/en/configure/app/html/crossorigin.mdx +0 -13
  79. package/en/configure/app/html/disable-html-folder.mdx +0 -13
  80. package/en/configure/app/html/favicon-by-entries.mdx +0 -13
  81. package/en/configure/app/html/favicon.mdx +0 -13
  82. package/en/configure/app/html/inject-by-entries.mdx +0 -13
  83. package/en/configure/app/html/inject.mdx +0 -13
  84. package/en/configure/app/html/meta-by-entries.mdx +0 -13
  85. package/en/configure/app/html/meta.mdx +0 -13
  86. package/en/configure/app/html/mount-id.mdx +0 -13
  87. package/en/configure/app/html/tags-by-entries.mdx +0 -13
  88. package/en/configure/app/html/tags.mdx +0 -13
  89. package/en/configure/app/html/template-by-entries.mdx +0 -13
  90. package/en/configure/app/html/template-parameters-by-entries.mdx +0 -13
  91. package/en/configure/app/html/template-parameters.mdx +0 -13
  92. package/en/configure/app/html/template.mdx +0 -13
  93. package/en/configure/app/html/title-by-entries.mdx +0 -13
  94. package/en/configure/app/html/title.mdx +0 -13
  95. package/en/configure/app/output/asset-prefix.mdx +0 -13
  96. package/en/configure/app/output/assets-retry.mdx +0 -13
  97. package/en/configure/app/output/charset.mdx +0 -13
  98. package/en/configure/app/output/clean-dist-path.mdx +0 -13
  99. package/en/configure/app/output/convert-to-rem.mdx +0 -13
  100. package/en/configure/app/output/copy.mdx +0 -13
  101. package/en/configure/app/output/css-module-local-ident-name.mdx +0 -13
  102. package/en/configure/app/output/data-uri-limit.mdx +0 -13
  103. package/en/configure/app/output/disable-css-extract.mdx +0 -13
  104. package/en/configure/app/output/disable-css-module-extension.mdx +0 -13
  105. package/en/configure/app/output/disable-filename-hash.mdx +0 -13
  106. package/en/configure/app/output/disable-inline-runtime-chunk.mdx +0 -13
  107. package/en/configure/app/output/disable-minimize.mdx +0 -13
  108. package/en/configure/app/output/disable-source-map.mdx +0 -13
  109. package/en/configure/app/output/disable-ts-checker.mdx +0 -13
  110. package/en/configure/app/output/dist-path.mdx +0 -13
  111. package/en/configure/app/output/enable-asset-fallback.mdx +0 -13
  112. package/en/configure/app/output/enable-asset-manifest.mdx +0 -13
  113. package/en/configure/app/output/enable-css-module-tsdeclaration.mdx +0 -13
  114. package/en/configure/app/output/enable-inline-scripts.mdx +0 -13
  115. package/en/configure/app/output/enable-inline-styles.mdx +0 -13
  116. package/en/configure/app/output/enable-latest-decorators.mdx +0 -13
  117. package/en/configure/app/output/externals.mdx +0 -13
  118. package/en/configure/app/output/filename.mdx +0 -13
  119. package/en/configure/app/output/legal-comments.mdx +0 -13
  120. package/en/configure/app/output/override-browserslist.mdx +0 -13
  121. package/en/configure/app/output/polyfill.mdx +0 -13
  122. package/en/configure/app/output/svg-default-export.mdx +0 -13
  123. package/en/configure/app/performance/build-cache.mdx +0 -13
  124. package/en/configure/app/performance/bundle-analyze.mdx +0 -13
  125. package/en/configure/app/performance/chunk-split.mdx +0 -13
  126. package/en/configure/app/performance/print-file-size.mdx +0 -13
  127. package/en/configure/app/performance/profile.mdx +0 -13
  128. package/en/configure/app/performance/remove-console.mdx +0 -13
  129. package/en/configure/app/performance/remove-moment-locale.mdx +0 -13
  130. package/en/configure/app/security/check-syntax.mdx +0 -13
  131. package/en/configure/app/security/sri.mdx +0 -13
  132. package/en/configure/app/source/alias.mdx +0 -13
  133. package/en/configure/app/source/compile-js-data-uri.mdx +0 -13
  134. package/en/configure/app/source/define.mdx +0 -13
  135. package/en/configure/app/source/exclude.mdx +0 -13
  136. package/en/configure/app/source/global-vars.mdx +0 -13
  137. package/en/configure/app/source/include.mdx +0 -13
  138. package/en/configure/app/source/module-scopes.mdx +0 -13
  139. package/en/configure/app/source/pre-entry.mdx +0 -13
  140. package/en/configure/app/source/resolve-extension-prefix.mdx +0 -13
  141. package/en/configure/app/source/resolve-main-fields.mdx +0 -13
  142. package/en/configure/app/tools/autoprefixer.mdx +0 -13
  143. package/en/configure/app/tools/babel.mdx +0 -13
  144. package/en/configure/app/tools/css-extract.mdx +0 -13
  145. package/en/configure/app/tools/css-loader.mdx +0 -13
  146. package/en/configure/app/tools/dev-server.mdx +0 -13
  147. package/en/configure/app/tools/html-plugin.mdx +0 -13
  148. package/en/configure/app/tools/inspector.mdx +0 -13
  149. package/en/configure/app/tools/less.mdx +0 -13
  150. package/en/configure/app/tools/minify-css.mdx +0 -13
  151. package/en/configure/app/tools/postcss.mdx +0 -13
  152. package/en/configure/app/tools/pug.mdx +0 -13
  153. package/en/configure/app/tools/rspack.mdx +0 -13
  154. package/en/configure/app/tools/sass.mdx +0 -13
  155. package/en/configure/app/tools/style-loader.mdx +0 -13
  156. package/en/configure/app/tools/styled-components.mdx +0 -13
  157. package/en/configure/app/tools/terser.mdx +0 -13
  158. package/en/configure/app/tools/ts-checker.mdx +0 -13
  159. package/en/configure/app/tools/ts-loader.mdx +0 -13
  160. package/en/configure/app/tools/webpack-chain.mdx +0 -13
  161. package/en/configure/app/tools/webpack.mdx +0 -13
  162. package/zh/configure/app/dev/asset-prefix.mdx +0 -13
  163. package/zh/configure/app/dev/before-start-url.mdx +0 -13
  164. package/zh/configure/app/dev/hmr.mdx +0 -13
  165. package/zh/configure/app/dev/host.mdx +0 -13
  166. package/zh/configure/app/dev/https.mdx +0 -13
  167. package/zh/configure/app/dev/port.mdx +0 -13
  168. package/zh/configure/app/dev/progress-bar.mdx +0 -13
  169. package/zh/configure/app/dev/start-url.mdx +0 -13
  170. package/zh/configure/app/experiments/lazy-compilation.mdx +0 -13
  171. package/zh/configure/app/html/app-icon.mdx +0 -13
  172. package/zh/configure/app/html/crossorigin.mdx +0 -13
  173. package/zh/configure/app/html/disable-html-folder.mdx +0 -13
  174. package/zh/configure/app/html/favicon-by-entries.mdx +0 -13
  175. package/zh/configure/app/html/favicon.mdx +0 -13
  176. package/zh/configure/app/html/inject-by-entries.mdx +0 -13
  177. package/zh/configure/app/html/inject.mdx +0 -13
  178. package/zh/configure/app/html/meta-by-entries.mdx +0 -13
  179. package/zh/configure/app/html/meta.mdx +0 -13
  180. package/zh/configure/app/html/mount-id.mdx +0 -13
  181. package/zh/configure/app/html/tags-by-entries.mdx +0 -13
  182. package/zh/configure/app/html/tags.mdx +0 -13
  183. package/zh/configure/app/html/template-by-entries.mdx +0 -13
  184. package/zh/configure/app/html/template-parameters-by-entries.mdx +0 -13
  185. package/zh/configure/app/html/template-parameters.mdx +0 -13
  186. package/zh/configure/app/html/template.mdx +0 -13
  187. package/zh/configure/app/html/title-by-entries.mdx +0 -13
  188. package/zh/configure/app/html/title.mdx +0 -13
  189. package/zh/configure/app/output/asset-prefix.mdx +0 -13
  190. package/zh/configure/app/output/assets-retry.mdx +0 -13
  191. package/zh/configure/app/output/charset.mdx +0 -13
  192. package/zh/configure/app/output/clean-dist-path.mdx +0 -13
  193. package/zh/configure/app/output/convert-to-rem.mdx +0 -13
  194. package/zh/configure/app/output/copy.mdx +0 -13
  195. package/zh/configure/app/output/css-module-local-ident-name.mdx +0 -13
  196. package/zh/configure/app/output/data-uri-limit.mdx +0 -13
  197. package/zh/configure/app/output/disable-css-extract.mdx +0 -13
  198. package/zh/configure/app/output/disable-css-module-extension.mdx +0 -13
  199. package/zh/configure/app/output/disable-filename-hash.mdx +0 -13
  200. package/zh/configure/app/output/disable-inline-runtime-chunk.mdx +0 -13
  201. package/zh/configure/app/output/disable-minimize.mdx +0 -13
  202. package/zh/configure/app/output/disable-source-map.mdx +0 -13
  203. package/zh/configure/app/output/disable-ts-checker.mdx +0 -13
  204. package/zh/configure/app/output/dist-path.mdx +0 -13
  205. package/zh/configure/app/output/enable-asset-fallback.mdx +0 -13
  206. package/zh/configure/app/output/enable-asset-manifest.mdx +0 -13
  207. package/zh/configure/app/output/enable-css-module-tsdeclaration.mdx +0 -13
  208. package/zh/configure/app/output/enable-inline-scripts.mdx +0 -13
  209. package/zh/configure/app/output/enable-inline-styles.mdx +0 -13
  210. package/zh/configure/app/output/enable-latest-decorators.mdx +0 -13
  211. package/zh/configure/app/output/externals.mdx +0 -13
  212. package/zh/configure/app/output/filename.mdx +0 -13
  213. package/zh/configure/app/output/legal-comments.mdx +0 -13
  214. package/zh/configure/app/output/override-browserslist.mdx +0 -13
  215. package/zh/configure/app/output/polyfill.mdx +0 -13
  216. package/zh/configure/app/output/svg-default-export.mdx +0 -13
  217. package/zh/configure/app/performance/build-cache.mdx +0 -13
  218. package/zh/configure/app/performance/bundle-analyze.mdx +0 -13
  219. package/zh/configure/app/performance/chunk-split.mdx +0 -13
  220. package/zh/configure/app/performance/print-file-size.mdx +0 -13
  221. package/zh/configure/app/performance/profile.mdx +0 -13
  222. package/zh/configure/app/performance/remove-console.mdx +0 -13
  223. package/zh/configure/app/performance/remove-moment-locale.mdx +0 -13
  224. package/zh/configure/app/security/check-syntax.mdx +0 -13
  225. package/zh/configure/app/security/sri.mdx +0 -13
  226. package/zh/configure/app/source/alias.mdx +0 -13
  227. package/zh/configure/app/source/compile-js-data-uri.mdx +0 -13
  228. package/zh/configure/app/source/define.mdx +0 -13
  229. package/zh/configure/app/source/exclude.mdx +0 -13
  230. package/zh/configure/app/source/global-vars.mdx +0 -13
  231. package/zh/configure/app/source/include.mdx +0 -13
  232. package/zh/configure/app/source/module-scopes.mdx +0 -13
  233. package/zh/configure/app/source/pre-entry.mdx +0 -13
  234. package/zh/configure/app/source/resolve-extension-prefix.mdx +0 -13
  235. package/zh/configure/app/source/resolve-main-fields.mdx +0 -13
  236. package/zh/configure/app/tools/autoprefixer.mdx +0 -13
  237. package/zh/configure/app/tools/babel.mdx +0 -13
  238. package/zh/configure/app/tools/css-extract.mdx +0 -13
  239. package/zh/configure/app/tools/css-loader.mdx +0 -13
  240. package/zh/configure/app/tools/dev-server.mdx +0 -13
  241. package/zh/configure/app/tools/html-plugin.mdx +0 -13
  242. package/zh/configure/app/tools/inspector.mdx +0 -13
  243. package/zh/configure/app/tools/less.mdx +0 -13
  244. package/zh/configure/app/tools/minify-css.mdx +0 -13
  245. package/zh/configure/app/tools/postcss.mdx +0 -13
  246. package/zh/configure/app/tools/pug.mdx +0 -13
  247. package/zh/configure/app/tools/rspack.mdx +0 -13
  248. package/zh/configure/app/tools/sass.mdx +0 -13
  249. package/zh/configure/app/tools/style-loader.mdx +0 -13
  250. package/zh/configure/app/tools/styled-components.mdx +0 -13
  251. package/zh/configure/app/tools/terser.mdx +0 -13
  252. package/zh/configure/app/tools/ts-checker.mdx +0 -13
  253. package/zh/configure/app/tools/ts-loader.mdx +0 -13
  254. package/zh/configure/app/tools/webpack-chain.mdx +0 -13
  255. package/zh/configure/app/tools/webpack.mdx +0 -13
@@ -1,19 +1,36 @@
1
1
  ---
2
- title: source.entries
3
2
  sidebar_label: entries
4
3
  ---
5
- # entries
6
4
 
7
- - **类型:** `Object = { [ entryName: string ]: string | Object }`
8
- - **默认值:** 根据当前项目目录结构动态结算出的默认入口对象。
5
+ # source.entries
9
6
 
10
- 对于大部分场景,Modern.js 根据目录结构自动生成的入口能满足大部分业务需求。具体可参考[入口](/guides/concept/entries)。
7
+ - **类型:**
11
8
 
12
- 如需自定义构建入口时,可以通过该选项指定。
9
+ ```ts
10
+ type Entries = Record<
11
+ string,
12
+ | string
13
+ | {
14
+ entry: string;
15
+ disableMount?: boolean;
16
+ }
17
+ >;
18
+ ```
19
+
20
+ - **默认值:** 根据当前项目的目录结构计算出的入口对象。
21
+
22
+ 用于配置自定义的页面入口。
23
+
24
+ :::tip 何时使用
25
+ 对于大部分场景,Modern.js 根据目录结构自动生成的入口已经可以满足需求,具体可参考[入口](/guides/concept/entries)。
26
+
27
+ 如果你需要自定义页面入口时,可以通过该选项进行设置。
28
+
29
+ :::
13
30
 
14
31
  ## String 类型
15
32
 
16
- 当值为 `string` 类型时,为入口的文件路径:
33
+ `entries` 对象的 value 为 `string` 类型时,表示入口模块的文件路径:
17
34
 
18
35
  ```ts title="modern.config.ts"
19
36
  import { defineConfig } from '@modern-js/app-tools';
@@ -22,13 +39,15 @@ export default defineConfig({
22
39
  source: {
23
40
  entries: {
24
41
  // 指定一个名称为 entry_customize 的新入口
25
- entry_customize: './src/home/test/index.js',
42
+ entry_customize: './src/home/test/index.ts',
26
43
  },
44
+ // 禁用默认入口扫描
45
+ disableDefaultEntries: true,
27
46
  },
28
47
  });
29
48
  ```
30
49
 
31
- 默认情况下,配置的入口等价于 `App.[jt]sx`,即指定的入口文件只需要导出应用的根组件。
50
+ 默认情况下,配置的入口等价于 `App.[jt]sx`,即指定的入口文件**只需要导出应用的根组件**。
32
51
 
33
52
  例如以下目录结构:
34
53
 
@@ -41,17 +60,19 @@ export default defineConfig({
41
60
  └── package.json
42
61
  ```
43
62
 
44
- 结合上面默认入口机制的内容,Modern.js 在分析上述目录结构时,不会得到任何默认入口。
63
+ 上述目录不符合 Modern.js 的目录结构约定,因此,Modern.js 在分析目录结构时,不会得到任何默认入口。
45
64
 
46
65
  在不想改变目录结构的情况下(如项目迁移),可以通过 `source.entries` 自定义入口:
47
66
 
48
- ```ts title="modern.config.js"
67
+ ```ts title="modern.config.ts"
49
68
  export default defineConfig({
50
69
  source: {
51
70
  entries: {
52
71
  home: './src/entry/home.tsx',
53
72
  chat: './src/entry/chat.tsx',
54
73
  },
74
+ // 禁用默认入口扫描
75
+ disableDefaultEntries: true,
55
76
  },
56
77
  });
57
78
  ```
@@ -61,7 +82,7 @@ export default defineConfig({
61
82
  当值为 `Object` 时,可配置如下属性:
62
83
 
63
84
  - `entry`:`string`,入口文件路径。
64
- - `disableMount`:`boolean = false`,关闭 Modern.js 生成入口代码的行为。
85
+ - `disableMount`:`boolean = false`,关闭 Modern.js 自动生成入口代码的行为。
65
86
 
66
87
  ```ts title="modern.config.ts"
67
88
  import { defineConfig } from '@modern-js/app-tools';
@@ -71,25 +92,65 @@ export default defineConfig({
71
92
  entries: {
72
93
  entry_customize: {
73
94
  // 入口文件路径
74
- entry: './src/home/test/App.jsx',
95
+ entry: './src/home/test/index.tsx',
96
+ },
97
+ },
98
+ // 禁用默认入口扫描
99
+ disableDefaultEntries: true,
100
+ },
101
+ });
102
+ ```
103
+
104
+ ### 禁用入口文件生成
105
+
106
+ 默认情况下,配置的入口等价于 `App.[jt]sx`,Modern.js 会自动生成一个入口文件来引用你配置的入口。
107
+
108
+ 如果你希望禁用 Modern.js 自动生成入口文件的逻辑,可以将 `disableMount` 属性设置为 `true`。
109
+
110
+ ```ts title="modern.config.ts"
111
+ export default defineConfig({
112
+ source: {
113
+ entries: {
114
+ entry_customize: {
115
+ entry: './src/home/test/index.tsx',
116
+ disableMount: true,
75
117
  },
118
+ },
119
+ // 禁用默认入口扫描
120
+ disableDefaultEntries: true,
121
+ },
122
+ });
123
+ ```
124
+
125
+ ### 约定式路由
126
+
127
+ 如果你需要为某个自定义入口启用约定式路由,可以将 `entry` 设置为目录路径:
128
+
129
+ ```ts title="modern.config.ts"
130
+ import { defineConfig } from '@modern-js/app-tools';
131
+
132
+ export default defineConfig({
133
+ source: {
134
+ entries: {
76
135
  // 启用约定式路由
77
136
  entry_spa: {
78
137
  // 约定式路由的入口路径必须设置为目录
79
138
  entry: './src/about',
80
139
  },
81
140
  },
141
+ // 禁用默认入口扫描
142
+ disableDefaultEntries: true,
82
143
  },
83
144
  });
84
145
  ```
85
146
 
86
- 默认情况下,配置的入口等价于 `App.[jt]sx`,如果希望该入口等价于构建模式下的入口,可以将属性 `disableMount` 设置为 `true`。
147
+ ## 入口合并规则
87
148
 
88
- ## 自定义入口和默认入口合并
149
+ 在设置 `source.entries` 后,如果没有设置 `disableDefaultEntries: true`,Modern.js 会将自定义入口与分析目录结构得到的入口合并。
89
150
 
90
- 在指定 `source.entries` 后,Modern.js 会将用户自定义的入口与分析目录结构得到的默认入口合并。合并规则为:
151
+ 合并规则为:
91
152
 
92
- 比较自定义入口设置的入口路径和默认入口路径,当入口路径一致时,自定义入口会覆盖默认入口。
153
+ - 比较自定义入口设置的入口路径和默认入口路径,当入口路径一致时,自定义入口会覆盖默认入口。
93
154
 
94
155
  例如以下目录结构:
95
156
 
@@ -97,13 +158,13 @@ export default defineConfig({
97
158
  .
98
159
  ├── src
99
160
  │ ├── chat
100
- │ │ └── App.jsx
161
+ │ │ └── App.tsx
101
162
  │ └── home
102
- │ └── index.js
163
+ │ └── index.ts
103
164
  └── package.json
104
165
  ```
105
166
 
106
- Modern.js 分析 `src/` 目录,得到默认入口 `chat` 和 `home`。当用户在 `modern.config.js` 文件中配置如下时:
167
+ Modern.js 会分析 `src/` 目录,得到默认入口 `chat` 和 `home`。当用户在 `modern.config.ts` 文件中配置如下时:
107
168
 
108
169
  ```ts title="modern.config.ts"
109
170
  import { defineConfig } from '@modern-js/app-tools';
@@ -111,7 +172,7 @@ import { defineConfig } from '@modern-js/app-tools';
111
172
  export default defineConfig({
112
173
  source: {
113
174
  entries: {
114
- index: './src/home/index.js',
175
+ index: './src/home/index.ts',
115
176
  },
116
177
  },
117
178
  };
@@ -119,5 +180,5 @@ export default defineConfig({
119
180
 
120
181
  可以看到自定义入口 `index` 的路径和默认入口 `home` 的路径一致,在合并的过程中,`index` 会覆盖掉 `home`,最终入口如下:
121
182
 
122
- - `chat -> ./src/chat/App.jsx`
123
- - `index -> ./src/home/index.js`
183
+ - `chat -> ./src/chat/App.tsx`
184
+ - `index -> ./src/home/index.ts`
@@ -0,0 +1,13 @@
1
+ ---
2
+ sidebar_label: pluginImport
3
+ ---
4
+
5
+ # source.transformImport
6
+
7
+ :::tip
8
+ 该配置由 Modern.js Builder 提供,更多信息可参考 [source.transformImport](https://modernjs.dev/builder/api/config-source.html#sourcepluginimport)。
9
+ :::
10
+
11
+ import Main from '@modern-js/builder-doc/docs/zh/config/source/transformImport.md';
12
+
13
+ <Main />
@@ -0,0 +1,13 @@
1
+ ---
2
+ sidebar_label: transformImport
3
+ ---
4
+
5
+ # source.transformImport
6
+
7
+ :::tip
8
+ 该配置由 Modern.js Builder 提供,更多信息可参考 [source.transformImport](https://modernjs.dev/builder/api/config-source.html#sourcetransformimport)。
9
+ :::
10
+
11
+ import Main from '@modern-js/builder-doc/docs/zh/config/source/transformImport.md';
12
+
13
+ <Main />
@@ -1,21 +1,25 @@
1
1
  ---
2
- title: tools.esbuild
3
2
  sidebar_label: esbuild
4
3
  ---
5
- # esbuild
4
+
5
+ # tools.esbuild
6
6
 
7
7
  - **类型:** `Object`
8
8
  - **默认值:** `undefined`
9
9
 
10
10
  ## 介绍
11
11
 
12
- :::tip esbuild 介绍
13
12
  [esbuild](https://esbuild.github.io/) 是一款基于 Golang 开发的前端构建工具,具有打包、编译和压缩 JavaScript 代码的功能,相比传统的打包编译工具,esbuild 在性能上有显著提升。在代码压缩方面,相比 webpack 内置的 terser 压缩器,esbuild 在性能上有数十倍的提升。
14
13
 
15
- :::
16
-
17
14
  Modern.js 提供了 esbuild 插件,让你能使用 esbuild 代替 babel-loader、ts-loader 和 terser 等库进行代码编译和压缩。在大型工程中开启后,**可以大幅度减少代码编译和压缩所需的时间,同时有效避免 OOM (heap out of memory) 问题**。
18
15
 
16
+ :::tip 推荐使用 SWC
17
+ 相较于 esbuild,我们更推荐使用 SWC 来编译和压缩代码,因为 SWC 支持更多的语法特性、拥有更好的代码压缩率,并且产物具备更好的兼容性。
18
+
19
+ 因此,我们建议你使用 SWC 而不是 esbuild,用法请参考 [tools.swc](/configure/app/tools/swc)。
20
+
21
+ :::
22
+
19
23
  ## 配置项
20
24
 
21
25
  你可以通过 `tools.esbuild` 配置项来设置 esbuild 编译行为。
@@ -1,9 +1,8 @@
1
1
  ---
2
- title: tools.jest
3
-
4
2
  sidebar_label: jest
5
3
  ---
6
- # jest
4
+
5
+ # tools.jest
7
6
 
8
7
  - **类型:** `Object | Function`
9
8
  - **默认值:** `{}`
@@ -1,8 +1,8 @@
1
1
  ---
2
- title: tools.swc
3
2
  sidebar_label: swc
4
3
  ---
5
- # swc
4
+
5
+ # tools.swc
6
6
 
7
7
  - **类型:** `Object`
8
8
  - **默认值:** `undefined`
@@ -13,6 +13,10 @@ sidebar_label: swc
13
13
 
14
14
  Modern.js 提供了开箱即用的 SWC 插件,可以为你的 Web 应用提供语法降级、Polyfill 以及压缩,并且移植了一些额外常见的 Babel 插件。
15
15
 
16
+ :::tip
17
+ 在使用 Rspack 作为打包工具时,默认会使用 SWC 进行转译和压缩,因此你不需要再安装和配置 SWC 插件。
18
+ :::
19
+
16
20
  ## 安装
17
21
 
18
22
  使用前需要安装 `@modern-js/plugin-swc` 插件。
@@ -73,4 +73,5 @@ export default defineConfig({
73
73
  :::caution 注意
74
74
  该功能只有在使用 Modern.js 内置的 Web Server 时才会生效。
75
75
 
76
+ 如果有自定义模版的需求,请参考 [HTML 模板](/guides/basic-features/html.html)。通过 `html.template` 或 `tools.html` 手动修改模版时,可能会导致该功能无法正确生效。
76
77
  :::
@@ -132,7 +132,7 @@ module.exports = {
132
132
  做完这些操作之后,在业务项目的 `./node_modules` 目录里,这个插件应该只存在一份,并且升级到了你指定的版本。
133
133
 
134
134
  :::tip 提示
135
- - Major 版本就是主版本号。更多信息,请阅读【[Semantic Versioning](https://semver.org/#summary)】。
135
+ - Major 版本就是主版本号。更多信息,请阅读 [Semantic Versioning](https://semver.org/#summary)
136
136
  - 所有被 Modern.js 封装的上游项目(比如 ESLint、[ESLint 插件](https://eslint.org/docs/user-guide/configuring/plugins#plugins)、[React Router](https://reactrouter.com/) 等),也都可以这样升级。
137
137
  - Modern.js 也会在每次发版中尽量及时的升级这些上游依赖。
138
138
  - Major 版本的升级需要由 Modern.js 来发版。
@@ -5,7 +5,7 @@ sidebar_position: 1
5
5
 
6
6
  # 使用 Rspack
7
7
 
8
- import Rspack from '@modern-js/builder-doc/docs/zh/shared/rspack.md';
8
+ import Rspack from '@modern-js/builder-doc/docs/zh/shared/rspack-tip.mdx';
9
9
 
10
10
  <Rspack />
11
11
 
@@ -48,6 +48,7 @@ Modern.js 打破传统的 SSR 开发模式,提供了用户无感的 SSR 开发
48
48
  1. 当以客户端路由的方式请求页面时,Modern.js 会发送一个 HTTP 请求,服务端接收到请求后执行页面对应的 Data Loader 函数,然后将执行结果作为请求的响应返回浏览器。
49
49
 
50
50
  2. 使用 Data Loader 时,数据获取发生在渲染前,Modern.js 也仍然支持在组件渲染时获取数据。更多相关内容可以查看[数据获取](/guides/basic-features/data-fetch)。
51
+
51
52
  :::
52
53
 
53
54
 
@@ -147,10 +148,10 @@ SPR 利用预渲染与缓存技术,为 SSR 页面提供静态 Web 的响应性
147
148
 
148
149
  这里模拟一个使用 `useLoaderData` API 的组件,Data Loader 中的请求需要消耗 2s 时间。
149
150
 
150
- ```jsx
151
+ ```tsx title="page.loader.ts"
151
152
  import { useLoaderData } from '@modern-js/runtime/router';
152
153
 
153
- export const loader = async () => {
154
+ export default async () => {
154
155
  await new Promise((resolve, reject) => {
155
156
  setTimeout(() => {
156
157
  resolve(null);
@@ -161,7 +162,9 @@ export const loader = async () => {
161
162
  message: 'Hello Modern.js',
162
163
  };
163
164
  };
165
+ ```
164
166
 
167
+ ```tsx title="page.tsx"
165
168
  export default () => {
166
169
  const data = useLoaderData();
167
170
  return <div>{data?.message}</div>;
@@ -413,11 +416,11 @@ export default Page;
413
416
  从 Data Loader 文件导入类型时,需要使用 import type 语法,保证只导入类型信息,这样可以避免 Data Loader 的代码打包到前端产物的 bundle 文件中。
414
417
 
415
418
  所以,这里的导入方式为:`import type { Data } from './page.loader'`;
419
+
416
420
  :::
417
421
 
418
422
  也可以通过 `useAsyncValue` 获取 Data Loader 返回的异步数据。例如:
419
423
 
420
-
421
424
  ```tsx title='page.tsx'
422
425
  import { useAsyncValue } from '@modern-js/runtime/router';
423
426
 
@@ -48,15 +48,18 @@ Modern.js 提供的 Hook 用于控制 Web Server 中的内置逻辑,所有的
48
48
  目前提供了两种 Hook,分别是 `AfterMatch` 和 `AfterRender`,可以用于修改渲染结果。可以在 `server/index.ts` 中这样写:
49
49
 
50
50
  ```ts
51
- import type { AfterMatchHook, AfterRenderHook } from '@modern-js/runtime/server';
51
+ import type {
52
+ AfterMatchHook,
53
+ AfterRenderHook,
54
+ } from '@modern-js/runtime/server';
52
55
 
53
56
  export const afterMatch: AfterMatchHook = (ctx, next) => {
54
57
  next();
55
- }
58
+ };
56
59
 
57
60
  export const afterRender: AfterRenderHook = (ctx, next) => {
58
61
  next();
59
- }
62
+ };
60
63
  ```
61
64
 
62
65
  项目在使用 Hook 时,应该有以下最佳实践:
@@ -78,8 +81,10 @@ Modern.js 默认提供了一套 API 供项目使用:
78
81
  ```ts
79
82
  import { Middlewre } from '@modern-js/runtime/server';
80
83
 
81
- export const middleware = (context, next) => {
82
- const { source: { req, res } } = context;
84
+ export const middleware: Middlewre = (context, next) => {
85
+ const {
86
+ source: { req, res },
87
+ } = context;
83
88
  console.log(req.url);
84
89
  next();
85
90
  };
@@ -2,50 +2,52 @@
2
2
  sidebar_position: 1
3
3
  ---
4
4
 
5
- # 入口
5
+ # 入口(Entry)
6
6
 
7
- 入口是 Modern.js 默认的文件约定,项目的每一个入口是一张独立的页面,对应一条**服务端路由**。
7
+ 通过本章节,你可以了解到 Modern.js 中的入口约定,以及如何自定义入口。
8
8
 
9
- 很多配置,如 HTML 模板、Meta 信息、是否开启 SSR、SSG、服务端路由规则都是以入口为维度划分的。
9
+ ## 什么是入口(Entry)
10
+
11
+ **入口指的是一个页面的起始模块。**
12
+
13
+ 在 Modern.js 项目中,每一个入口对应一个独立的页面,也对应一条服务端路由。默认情况下,Modern.js 会基于目录约定来自动确定页面的入口,同时也支持通过配置项来自定义入口。
14
+
15
+ Modern.js 提供的很多配置项都是以入口为维度进行划分的,比如页面标题、HTML 模板、页面 Meta 信息、是否开启 SSR/SSG、服务端路由规则等。
10
16
 
11
17
  ## 单入口与多入口
12
18
 
13
- Modern.js 初始化的项目是单入口的,项目结构如下:
19
+ Modern.js 初始化的项目是单入口的(SPA),项目结构如下:
14
20
 
15
21
  ```
16
22
  .
17
23
  ├── src
18
- │ ├── modern-app-env.d.ts
19
24
  │ └── routes
20
25
  │ ├── index.css
21
26
  │ ├── layout.tsx
22
27
  │ └── page.tsx
23
28
  ├── package.json
24
29
  ├── modern.config.ts
25
- ├── pnpm-lock.yaml
26
- ├── README.md
27
30
  └── tsconfig.json
28
31
  ```
29
32
 
30
- Modern.js 可以很方便的将单入口切换成多入口。可以在项目下执行 `pnpm run new`,通过生成器创建入口:
33
+ Modern.js 项目中,你可以很方便的将单入口切换成多入口,直接在项目下执行 `pnpm run new`,通过生成器创建入口即可:
31
34
 
32
35
  ```bash
33
- ? 请选择你想要的操作 创建工程元素
34
- ? 创建工程元素 新建「应用入口」
35
- ? 请填写入口名称 new-entry
36
+ ? 请选择你想要的操作:创建工程元素
37
+ ? 创建工程元素:新建「应用入口」
38
+ ? 请填写入口名称:new-entry
36
39
  ```
37
40
 
38
- 执行后,`src/` 目录将会变成如下结构:
41
+ 执行后,Modern.js 会自动生成一个新的入口目录,此时可以看到 `src/` 目录变成如下结构:
39
42
 
40
- ```
43
+ ```bash
41
44
  .
42
- ├── modern-app-env.d.ts
43
- ├── myapp
45
+ ├── myapp # 原入口
44
46
  │ └── routes
45
47
  │ ├── index.css
46
48
  │ ├── layout.tsx
47
49
  │ └── page.tsx
48
- └── new-entry
50
+ └── new-entry # 新入口
49
51
  └── routes
50
52
  ├── index.css
51
53
  ├── layout.tsx
@@ -54,10 +56,12 @@ Modern.js 可以很方便的将单入口切换成多入口。可以在项目下
54
56
 
55
57
  原本的代码被移动到了和 `package.json` 中 `name` 同名的目录下,并创建了新的目录。
56
58
 
57
- 执行 `pnpm run dev` 后,可以看到新增一条 `/new-entry` 的路由,并且被迁移的代码路由并未发生变化。
59
+ 执行 `pnpm run dev` 后,可以看到新增了一条名为 `/new-entry` 的路由,并且被迁移的代码路由并未发生变化。
60
+
61
+ :::tip
62
+ Modern.js 会将与 package.json 文件中 `name` 字段同名的入口作为主入口,主入口的路由为 `/`,其他入口的路由为 `/{entryName}`。
58
63
 
59
- :::note
60
- Modern.js 会将和 `package.json` 中 `name` 字段同名的入口作为主入口,默认路由为 `/`,其他入口默认路由为 `/{entryName}`。
64
+ 比如,package.json 中的 `name` 为 `myapp` 时,`src/myapp` 会作为项目的主入口。
61
65
 
62
66
  :::
63
67
 
@@ -82,7 +86,7 @@ Modern.js 会将和 `package.json` 中 `name` 字段同名的入口作为主入
82
86
  当 `src/` 目录满足入口特征时,Modern.js 会认为当前项目为单入口应用。
83
87
 
84
88
  :::tip
85
- 单入口默认的入口名为 `main`。
89
+ 在单入口应用中,默认的入口名为 `main`。
86
90
 
87
91
  :::
88
92
 
@@ -168,35 +172,32 @@ ReactDOM.render(<App />, document.getElementById('root'));
168
172
 
169
173
  Modern.js **不推荐**使用这种方式,这种方式丧失了框架的一些能力,如 **`modern.config.js` 文件中的 `runtime` 配置将不会再生效**。但是在项目从其他框架迁移到 Modern.js,例如 CRA,或是自己手动搭建的 webpack 时,这种方式会非常有用。
170
174
 
171
- ## 使用配置文件定义入口
175
+ ## 自定义入口
172
176
 
173
- 有些时候,已有的项目并不是按照 Modern.js 的目录结构来搭建的。如果强行要按照这种结构来工作,会有比较大的迁移成本。
177
+ 大部分存量项目并不是按照 Modern.js 的目录结构来搭建的。如果要改成 Modern.js 约定的目录结构,会存在一定的迁移成本。
174
178
 
175
- Modern.js 中,除了使用文件约定生成入口外,还可以在 `modern.config.[jt]s` 中手动配置入口。
179
+ 在这种情况下,除了使用文件约定生成入口外,你可以在 `modern.config.[jt]s` 中手动配置入口。
176
180
 
177
- ```ts
181
+ ```ts title="modern.config.ts"
178
182
  export default defineConfig({
179
183
  source: {
180
184
  entries: {
181
185
  // 指定一个名称为 entry_customize 的新入口
182
- entry_customize: './src/home/test/index.js',
186
+ entry_customize: './src/home/test/index.ts',
183
187
  },
188
+ // 禁用默认入口扫描
189
+ disableDefaultEntries: true,
184
190
  },
185
191
  });
186
192
  ```
187
193
 
188
- :::tip
189
- 详情可以查看 [source.entries](/configure/app/source/entries)。
190
-
191
- :::
192
-
193
- ## 禁用默认入口扫描
194
+ ### 禁用默认入口扫描
194
195
 
195
- 另外,项目的部分结构可能恰巧命中了 Modern.js 的约定,但实际上这部分并不是真实的入口。
196
+ 当使用自定义入口时,项目的部分结构可能恰巧命中了 Modern.js 的目录约定,但实际上这部分目录并不是真实的入口。
196
197
 
197
- Modern.js 提供了配置,来禁用默认的入口扫描。与配置的入口结合使用,大部分项目可以在不修改目录结构的情况下,快速的进行迁移。
198
+ Modern.js 提供了 `disableDefaultEntries` 配置,来禁用默认的入口扫描规则。当你需要自定义入口时,一般需要将 `disableDefaultEntries` 与 `entries` 结合使用。这样,一些存量项目可以在不修改目录结构的情况下,快速地进行迁移。
198
199
 
199
- ```ts
200
+ ```ts title="modern.config.ts"
200
201
  export default defineConfig({
201
202
  source: {
202
203
  disableDefaultEntries: true,
@@ -205,6 +206,6 @@ export default defineConfig({
205
206
  ```
206
207
 
207
208
  :::tip
208
- 详情可以查看 [source.disableDefaultEntries](/configure/app/source/disable-default-entries)。
209
+ 详细用法请查看 [source.entries](/configure/app/source/entries) 和 [source.disableDefaultEntries](/configure/app/source/disable-default-entries)。
209
210
 
210
211
  :::
@@ -106,6 +106,8 @@ info File sizes after production build:
106
106
  └── js
107
107
  ```
108
108
 
109
+ > 如果你需要自定义构建产物的目录,请参考 [构建产物目录](https://modernjs.dev/builder/guide/basic/output-files.html)。
110
+
109
111
  ## 本地验证
110
112
 
111
113
  在项目中执行 `pnpm run serve` 即可在本地验证构建产物是否正常运行:
@@ -191,8 +191,8 @@ foo
191
191
 
192
192
  - 功能:在退出进程前,重置一些文件状态
193
193
  - 执行阶段:进程退出之前
194
- - Hook 模型:AsyncWorkflow
195
- - 类型:`AsyncWorkflow<void, void>`
194
+ - Hook 模型:Workflow
195
+ - 类型:`Workflow<void, void>`
196
196
  - 使用示例:
197
197
 
198
198
  ```ts
@@ -209,6 +209,10 @@ export default (): CliPlugin => ({
209
209
  });
210
210
  ```
211
211
 
212
+ :::tip
213
+ 由于 Node.js 中退出进程时的回调函数是同步的,所以 `beforeExit` Hook 的类型是 `Workflow`,不能执行异步操作。
214
+ :::
215
+
212
216
  ### `beforeDev`
213
217
 
214
218
  - 功能:运行 dev 主流程的之前的任务
@@ -2,6 +2,7 @@
2
2
  title: 插件 API
3
3
  sidebar_position: 6
4
4
  ---
5
+
5
6
  # 插件 API
6
7
 
7
8
  插件的 `setup` 函数会接收一个 `api` 入参,你可以调用 api 上提供的一些方法来获取到配置、应用上下文等信息。
@@ -36,16 +37,39 @@ interface UserConfig {
36
37
  source?: SourceConfig;
37
38
  output?: OutputConfig;
38
39
  server?: ServerConfig;
39
- dev?: DevConfig;
40
40
  deploy?: DeployConfig;
41
- tools?: ToolsConfig;
42
- plugins?: PluginConfig;
43
- runtime?: RuntimeConfig;
44
- runtimeByEntries?: RuntimeByEntriesConfig;
41
+ // ...other fields
42
+ }
43
+ ```
44
+
45
+ 具体配置字段的意义请参考 [配置](/configure/app/usage)。
46
+
47
+ :::tip
48
+ 该方法获取到的是只读配置,不可修改。如果需要修改配置,请使用 [config hook](/guides/topic-detail/framework-plugin/hook-list.html#config)。
49
+ :::
50
+
51
+ ### useResolvedConfigContext
52
+
53
+ 用于获取被解析、合并之后的最终配置。
54
+
55
+ ```ts
56
+ const useResolvedConfigContext: () => NormalizedConfig;
57
+
58
+ interface NormalizedConfig {
59
+ source: NormalizedSourceConfig;
60
+ output: NormalizedOutputConfig;
61
+ server: NormalizedServerConfig;
62
+ deploy: NormalizedDeployConfig;
63
+ _raw: UserConfig; // 原始配置对象
64
+ // ...other fields
45
65
  }
46
66
  ```
47
67
 
48
- 具体配置字段的意义请参考【[配置](/configure/app/usage)】。
68
+ 配置字段的完整内容请参考 [配置](/configure/app/usage)
69
+
70
+ :::tip
71
+ 该方法获取到的是只读配置,不可修改。如果需要修改配置,请使用 [config hook](/guides/topic-detail/framework-plugin/hook-list.html#config)。
72
+ :::
49
73
 
50
74
  ### useAppContext
51
75
 
@@ -75,29 +99,6 @@ interface IAppContext {
75
99
  }
76
100
  ```
77
101
 
78
- ### useResolvedConfigContext
79
-
80
- 用于获取解析之后的最终配置。
81
-
82
- ```ts
83
- const useResolvedConfigContext: () => NormalizedConfig;
84
-
85
- interface NormalizedConfig {
86
- source: NormalizedSourceConfig;
87
- output: OutputConfig;
88
- server: ServerConfig;
89
- dev: DevConfig;
90
- deploy: DeployConfig;
91
- tools: NormalizedToolsConfig;
92
- plugins: PluginConfig;
93
- runtime: RuntimeConfig;
94
- runtimeByEntries?: RuntimeByEntriesConfig;
95
- _raw: UserConfig;
96
- }
97
- ```
98
-
99
- 具体配置字段的意义请参考【[配置](/configure/app/usage)】。
100
-
101
102
  ### useHookRunners
102
103
 
103
104
  用于获取 Hooks 的执行器,并触发特定的 Hook 执行。
@@ -12,8 +12,8 @@ sidebar_position: 3
12
12
  import { FsAPI } from '@modern-js/codesmith-api-fs';
13
13
 
14
14
  export default async (context: GeneratorContext, generator: GeneratorCore) => {
15
- const handlebarApi = new HandlebarsAPI(generator);
16
- await handlebarsAPI.renderFile(
15
+ const fsApi = new FsAPI(generator);
16
+ await fsApi.renderFile(
17
17
  material.get('templates/a.js'),
18
18
  target: 'b.js'
19
19
  );