@modern-js/main-doc 0.0.0-nightly-20250514160342 → 0.0.0-nightly-20250518160324

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 (175) hide show
  1. package/docs/en/apis/app/hooks/server/server.mdx +10 -0
  2. package/docs/en/apis/app/hooks/src/routes.mdx +3 -3
  3. package/docs/en/apis/app/runtime/bff/use-hono-context.mdx +30 -0
  4. package/docs/en/components/enable-bff.mdx +1 -27
  5. package/docs/en/components/rsbuild-config-tooltip.mdx +2 -2
  6. package/docs/en/components/tech-stack-node-framework.mdx +1 -1
  7. package/docs/en/configure/app/dev/asset-prefix.mdx +2 -3
  8. package/docs/en/configure/app/dev/client.mdx +2 -3
  9. package/docs/en/configure/app/dev/hmr.mdx +2 -3
  10. package/docs/en/configure/app/dev/live-reload.mdx +2 -3
  11. package/docs/en/configure/app/dev/progress-bar.mdx +2 -3
  12. package/docs/en/configure/app/dev/setup-middlewares.mdx +2 -3
  13. package/docs/en/configure/app/dev/watch-files.mdx +2 -3
  14. package/docs/en/configure/app/dev/write-to-disk.mdx +2 -3
  15. package/docs/en/configure/app/html/app-icon.mdx +2 -3
  16. package/docs/en/configure/app/html/crossorigin.mdx +2 -3
  17. package/docs/en/configure/app/html/favicon.mdx +2 -3
  18. package/docs/en/configure/app/html/inject.mdx +2 -3
  19. package/docs/en/configure/app/html/meta.mdx +2 -3
  20. package/docs/en/configure/app/html/mount-id.mdx +2 -3
  21. package/docs/en/configure/app/html/output-structure.mdx +2 -3
  22. package/docs/en/configure/app/html/script-loading.mdx +2 -3
  23. package/docs/en/configure/app/html/tags.mdx +2 -3
  24. package/docs/en/configure/app/html/template-parameters.mdx +2 -3
  25. package/docs/en/configure/app/html/template.mdx +2 -3
  26. package/docs/en/configure/app/html/title.mdx +2 -3
  27. package/docs/en/configure/app/output/asset-prefix.mdx +2 -3
  28. package/docs/en/configure/app/output/charset.mdx +2 -3
  29. package/docs/en/configure/app/output/copy.mdx +2 -3
  30. package/docs/en/configure/app/output/css-modules.mdx +2 -3
  31. package/docs/en/configure/app/output/data-uri-limit.mdx +2 -3
  32. package/docs/en/configure/app/output/dist-path.mdx +2 -3
  33. package/docs/en/configure/app/output/externals.mdx +2 -3
  34. package/docs/en/configure/app/output/filename-hash.mdx +2 -3
  35. package/docs/en/configure/app/output/filename.mdx +2 -3
  36. package/docs/en/configure/app/output/inject-styles.mdx +2 -3
  37. package/docs/en/configure/app/output/inline-scripts.mdx +2 -3
  38. package/docs/en/configure/app/output/inline-styles.mdx +2 -3
  39. package/docs/en/configure/app/output/legal-comments.mdx +2 -3
  40. package/docs/en/configure/app/output/minify.mdx +2 -3
  41. package/docs/en/configure/app/output/override-browserslist.mdx +2 -3
  42. package/docs/en/configure/app/output/polyfill.mdx +2 -3
  43. package/docs/en/configure/app/output/source-map.mdx +2 -3
  44. package/docs/en/configure/app/performance/build-cache.mdx +2 -3
  45. package/docs/en/configure/app/performance/bundle-analyze.mdx +2 -3
  46. package/docs/en/configure/app/performance/chunk-split.mdx +2 -3
  47. package/docs/en/configure/app/performance/dns-prefetch.mdx +2 -3
  48. package/docs/en/configure/app/performance/preconnect.mdx +2 -3
  49. package/docs/en/configure/app/performance/prefetch.mdx +2 -3
  50. package/docs/en/configure/app/performance/preload.mdx +2 -3
  51. package/docs/en/configure/app/performance/print-file-size.mdx +2 -3
  52. package/docs/en/configure/app/performance/profile.mdx +2 -3
  53. package/docs/en/configure/app/performance/remove-console.mdx +2 -3
  54. package/docs/en/configure/app/performance/remove-moment-locale.mdx +2 -3
  55. package/docs/en/configure/app/plugins.mdx +13 -33
  56. package/docs/en/configure/app/runtime/master-app.mdx +1 -5
  57. package/docs/en/configure/app/runtime/plugins.mdx +58 -0
  58. package/docs/en/configure/app/security/nonce.mdx +2 -3
  59. package/docs/en/configure/app/security/sri.mdx +0 -1
  60. package/docs/en/configure/app/server/port.mdx +2 -3
  61. package/docs/en/configure/app/source/alias-strategy.mdx +2 -3
  62. package/docs/en/configure/app/source/alias.mdx +2 -3
  63. package/docs/en/configure/app/source/decorators.mdx +2 -3
  64. package/docs/en/configure/app/source/define.mdx +2 -3
  65. package/docs/en/configure/app/source/exclude.mdx +2 -3
  66. package/docs/en/configure/app/source/include.mdx +2 -3
  67. package/docs/en/configure/app/source/pre-entry.mdx +2 -3
  68. package/docs/en/configure/app/source/transform-import.mdx +2 -3
  69. package/docs/en/configure/app/tools/css-extract.mdx +2 -3
  70. package/docs/en/configure/app/tools/css-loader.mdx +2 -2
  71. package/docs/en/configure/app/tools/html-plugin.mdx +2 -3
  72. package/docs/en/configure/app/tools/lightningcss-loader.mdx +2 -3
  73. package/docs/en/configure/app/tools/postcss.mdx +2 -3
  74. package/docs/en/configure/app/tools/rspack.mdx +2 -3
  75. package/docs/en/configure/app/tools/style-loader.mdx +2 -3
  76. package/docs/en/guides/advanced-features/bff/extend-server.mdx +33 -82
  77. package/docs/en/guides/advanced-features/bff/frameworks.mdx +12 -68
  78. package/docs/en/guides/advanced-features/custom-server.mdx +13 -9
  79. package/docs/en/plugin/cli-plugins/api.mdx +6 -0
  80. package/docs/en/plugin/runtime-plugins/api.mdx +6 -0
  81. package/docs/en/tutorials/first-app/c04-routes.mdx +4 -2
  82. package/docs/en/tutorials/first-app/c05-loader.mdx +4 -1
  83. package/docs/zh/apis/app/hooks/server/server.mdx +10 -0
  84. package/docs/zh/apis/app/hooks/src/routes.mdx +3 -3
  85. package/docs/zh/apis/app/runtime/bff/use-hono-context.mdx +31 -0
  86. package/docs/zh/components/enable-bff.mdx +2 -27
  87. package/docs/zh/components/rsbuild-config-tooltip.mdx +2 -2
  88. package/docs/zh/components/tech-stack-node-framework.mdx +1 -1
  89. package/docs/zh/configure/app/dev/asset-prefix.mdx +2 -3
  90. package/docs/zh/configure/app/dev/client.mdx +2 -3
  91. package/docs/zh/configure/app/dev/hmr.mdx +2 -3
  92. package/docs/zh/configure/app/dev/live-reload.mdx +2 -3
  93. package/docs/zh/configure/app/dev/progress-bar.mdx +2 -3
  94. package/docs/zh/configure/app/dev/setup-middlewares.mdx +2 -3
  95. package/docs/zh/configure/app/dev/watch-files.mdx +2 -3
  96. package/docs/zh/configure/app/dev/write-to-disk.mdx +2 -3
  97. package/docs/zh/configure/app/html/app-icon.mdx +2 -3
  98. package/docs/zh/configure/app/html/crossorigin.mdx +2 -3
  99. package/docs/zh/configure/app/html/favicon.mdx +2 -3
  100. package/docs/zh/configure/app/html/inject.mdx +2 -3
  101. package/docs/zh/configure/app/html/meta.mdx +2 -3
  102. package/docs/zh/configure/app/html/mount-id.mdx +2 -3
  103. package/docs/zh/configure/app/html/output-structure.mdx +2 -3
  104. package/docs/zh/configure/app/html/script-loading.mdx +2 -3
  105. package/docs/zh/configure/app/html/tags.mdx +2 -3
  106. package/docs/zh/configure/app/html/template-parameters.mdx +2 -3
  107. package/docs/zh/configure/app/html/template.mdx +2 -3
  108. package/docs/zh/configure/app/html/title.mdx +2 -3
  109. package/docs/zh/configure/app/output/asset-prefix.mdx +2 -3
  110. package/docs/zh/configure/app/output/charset.mdx +2 -3
  111. package/docs/zh/configure/app/output/copy.mdx +2 -3
  112. package/docs/zh/configure/app/output/css-modules.mdx +2 -3
  113. package/docs/zh/configure/app/output/data-uri-limit.mdx +2 -3
  114. package/docs/zh/configure/app/output/dist-path.mdx +2 -3
  115. package/docs/zh/configure/app/output/externals.mdx +2 -3
  116. package/docs/zh/configure/app/output/filename-hash.mdx +2 -3
  117. package/docs/zh/configure/app/output/filename.mdx +2 -3
  118. package/docs/zh/configure/app/output/inject-styles.mdx +2 -3
  119. package/docs/zh/configure/app/output/inline-scripts.mdx +2 -3
  120. package/docs/zh/configure/app/output/inline-styles.mdx +2 -3
  121. package/docs/zh/configure/app/output/legal-comments.mdx +2 -3
  122. package/docs/zh/configure/app/output/minify.mdx +2 -3
  123. package/docs/zh/configure/app/output/override-browserslist.mdx +2 -3
  124. package/docs/zh/configure/app/output/polyfill.mdx +2 -3
  125. package/docs/zh/configure/app/output/source-map.mdx +2 -3
  126. package/docs/zh/configure/app/performance/build-cache.mdx +2 -3
  127. package/docs/zh/configure/app/performance/bundle-analyze.mdx +2 -3
  128. package/docs/zh/configure/app/performance/chunk-split.mdx +2 -3
  129. package/docs/zh/configure/app/performance/dns-prefetch.mdx +2 -3
  130. package/docs/zh/configure/app/performance/preconnect.mdx +2 -3
  131. package/docs/zh/configure/app/performance/prefetch.mdx +2 -3
  132. package/docs/zh/configure/app/performance/preload.mdx +2 -3
  133. package/docs/zh/configure/app/performance/print-file-size.mdx +2 -3
  134. package/docs/zh/configure/app/performance/profile.mdx +2 -3
  135. package/docs/zh/configure/app/performance/remove-console.mdx +2 -3
  136. package/docs/zh/configure/app/performance/remove-moment-locale.mdx +2 -3
  137. package/docs/zh/configure/app/plugins.mdx +3 -24
  138. package/docs/zh/configure/app/runtime/master-app.mdx +1 -5
  139. package/docs/zh/configure/app/runtime/plugins.mdx +58 -0
  140. package/docs/zh/configure/app/security/nonce.mdx +2 -3
  141. package/docs/zh/configure/app/security/sri.mdx +0 -1
  142. package/docs/zh/configure/app/server/port.mdx +2 -3
  143. package/docs/zh/configure/app/source/alias-strategy.mdx +2 -3
  144. package/docs/zh/configure/app/source/alias.mdx +2 -3
  145. package/docs/zh/configure/app/source/decorators.mdx +2 -3
  146. package/docs/zh/configure/app/source/define.mdx +2 -3
  147. package/docs/zh/configure/app/source/exclude.mdx +2 -3
  148. package/docs/zh/configure/app/source/include.mdx +2 -3
  149. package/docs/zh/configure/app/source/pre-entry.mdx +2 -3
  150. package/docs/zh/configure/app/source/transform-import.mdx +2 -3
  151. package/docs/zh/configure/app/tools/css-extract.mdx +2 -3
  152. package/docs/zh/configure/app/tools/css-loader.mdx +2 -3
  153. package/docs/zh/configure/app/tools/html-plugin.mdx +2 -3
  154. package/docs/zh/configure/app/tools/lightningcss-loader.mdx +2 -3
  155. package/docs/zh/configure/app/tools/postcss.mdx +2 -3
  156. package/docs/zh/configure/app/tools/rspack.mdx +2 -3
  157. package/docs/zh/configure/app/tools/style-loader.mdx +2 -3
  158. package/docs/zh/guides/advanced-features/bff/extend-server.mdx +28 -76
  159. package/docs/zh/guides/advanced-features/bff/frameworks.mdx +6 -66
  160. package/docs/zh/guides/advanced-features/custom-server.mdx +12 -8
  161. package/docs/zh/plugin/cli-plugins/api.mdx +6 -0
  162. package/docs/zh/plugin/runtime-plugins/api.mdx +6 -0
  163. package/docs/zh/tutorials/first-app/c04-routes.mdx +4 -2
  164. package/docs/zh/tutorials/first-app/c05-loader.mdx +4 -1
  165. package/package.json +6 -4
  166. package/rspress.config.ts +6 -1
  167. package/src/components/RsbuildLink/index.tsx +2 -2
  168. package/src/index.ts +1 -5
  169. package/src/pages/index.tsx +3 -3
  170. package/docs/en/apis/app/hooks/api/middleware.mdx +0 -11
  171. package/docs/en/apis/app/runtime/bff/hook.mdx +0 -44
  172. package/docs/en/apis/app/runtime/bff/use-context.mdx +0 -38
  173. package/docs/zh/apis/app/hooks/api/middleware.mdx +0 -11
  174. package/docs/zh/apis/app/runtime/bff/hook.mdx +0 -44
  175. package/docs/zh/apis/app/runtime/bff/use-context.mdx +0 -38
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: removeConsole
3
- configName: performance.removeConsole
4
3
  ---
5
4
 
6
5
  # performance.removeConsole
@@ -10,6 +9,6 @@ configName: performance.removeConsole
10
9
 
11
10
  在生产环境构建时,是否自动移除代码中的 `console.[methodName]`。
12
11
 
13
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
12
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
14
13
 
15
- <RsbuildConig />
14
+ <RsbuildConfig configName="performance.removeConsole" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: removeMomentLocale
3
- configName: performance.removeMomentLocale
4
3
  ---
5
4
 
6
5
  # performance.removeMomentLocale
@@ -10,6 +9,6 @@ configName: performance.removeMomentLocale
10
9
 
11
10
  是否移除 [moment.js](https://momentjs.com/) 的语言包文件。
12
11
 
13
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
12
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
14
13
 
15
- <RsbuildConig />
14
+ <RsbuildConfig configName="performance.removeMomentLocale" />
@@ -1,39 +1,18 @@
1
- ---
2
- sidebar_position: 9
3
- ---
4
-
5
1
  # plugins
6
2
 
7
3
  - **类型:** `CliPlugin[]`
8
4
  - **默认值:** `[]`
9
5
 
10
- 用于配置自定义的 Modern.js 框架插件。
11
-
12
- 自定义插件的编写方式请参考 [如何编写插件](/plugin/plugin-system)。
6
+ 用于配置自定义的 Modern.js 框架 CLI 插件。自定义 CLI 插件的编写方式请参考 [如何编写 CLI 插件](/plugin/introduction.html#cli-插件)。
13
7
 
14
8
  ## 注意事项
15
9
 
16
- 该选项**用于配置框架插件**,如果你需要配置其他类型的插件,请选择对应的配置方式:
10
+ 该选项**用于配置框架 CLI 插件**,如果你需要配置其他类型的插件,请选择对应的配置方式:
17
11
 
18
12
  - 配置 Rsbuild 插件,请使用 [builderPlugins](/configure/app/builder-plugins) 配置项。
19
13
  - 配置 Rspack 或 webpack 插件,请使用 [tools.bundlerChain](/configure/app/tools/bundler-chain) 配置项。
20
14
  - 配置 Babel 插件,请使用 [tools.babel](/configure/app/tools/babel) 配置项。
21
-
22
- ## 插件类型
23
-
24
- Modern.js 中内置了三种不同的框架插件:
25
-
26
- - `CLI 插件`,适用于本地开发、编译构建阶段,可以在命令行和编译阶段扩展各种能力。
27
- - `Server 插件`,适用于服务端。
28
- - `Runtime 插件`,适用于前端运行时。
29
-
30
- 目前 Modern.js 开放了自定义 CLI 插件的能力,Server 插件和 Runtime 插件会在后续开放。
31
-
32
- ## 插件执行顺序
33
-
34
- 默认情况下,自定义插件会按照 `plugins` 数组的顺序依次执行,Modern.js 内置插件的执行时机早于自定义插件。
35
-
36
- 当插件内部使用了控制顺序的相关字段,比如 `pre`、`post` 时,会基于声明的字段对执行顺序进行调整,详见 [插件结构](/plugin/plugin-system)。
15
+ - 配置框架 Runtime 插件,请使用 [runtime 配置文件 plugins](/configure/app/runtime/plugins) 配置项。
37
16
 
38
17
  ## 示例
39
18
 
@@ -1,8 +1,4 @@
1
- ---
2
- title: masterApp
3
- ---
4
-
5
- # runtime.masterApp
1
+ # masterApp
6
2
 
7
3
  - **类型:** `Object`
8
4
 
@@ -0,0 +1,58 @@
1
+ # plugins
2
+
3
+ - **类型:** `RuntimePlugin[]`
4
+ - **默认值:** `[]`
5
+
6
+ 用于配置自定义的 Modern.js Runtime 插件。自定义 Runtime 插件的编写方式请参考 [如何编写 Runtime 插件](/plugin/introduction.html#runtime-插件)。
7
+
8
+ :::info
9
+
10
+ Runtime 插件需要在 `src/modern.runtime.ts` 文件中的 plugins 中进行配置。
11
+
12
+ :::
13
+
14
+ ## 示例
15
+
16
+ 下面是 Runtime 插件的使用示例。
17
+
18
+ ### 使用 npm 上的插件
19
+
20
+ 使用 npm 上的插件,需要通过包管理器安装插件,并通过 import 引入。
21
+
22
+ ```ts title="src/modern.runtime.ts"
23
+ import { defineRuntimeConfig } from '@modern-js/runtime';
24
+ import { myPlugin } from 'my-plugin';
25
+
26
+ export default defineRuntimeConfig({
27
+ plugins: [myPlugin()],
28
+ });
29
+ ```
30
+
31
+ ### 使用本地插件
32
+
33
+ 使用本地代码仓库中的插件,直接通过相对路径 import 引入即可。
34
+
35
+ ```ts title="src/modern.runtime.ts"
36
+ import { defineRuntimeConfig } from '@modern-js/runtime';
37
+ import { myPlugin } from './config/plugin/myPlugin';
38
+
39
+ export default defineRuntimeConfig({
40
+ plugins: [myPlugin()],
41
+ });
42
+ ```
43
+
44
+ ### 插件配置项
45
+
46
+ 如果插件提供了一些自定义的配置项,可以通过插件函数的参数传入配置。
47
+
48
+ ```ts title="src/modern.runtime.ts"
49
+ import { defineRuntimeConfig } from '@modern-js/runtime';
50
+ import { myPlugin } from './config/plugin/myPlugin';
51
+
52
+ export default defineRuntimeConfig({
53
+ plugins: [myPlugin({
54
+ foo: 1,
55
+ bar: 2,
56
+ })],
57
+ });
58
+ ```
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: nonce
3
- configName: security.nonce
4
3
  ---
5
4
 
6
5
  # security.nonce
@@ -15,6 +14,6 @@ type Nonce = string;
15
14
 
16
15
  为 HTML 所引入的脚本资源添加随机属性值 nonce,使浏览器在解析到带有匹配 nonce 值的内联脚本时,能判断该脚本是否能执行。
17
16
 
18
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
17
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
19
18
 
20
- <RsbuildConig />
19
+ <RsbuildConfig configName="security.nonce" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: sri
3
- configName: security.sri
4
3
  ---
5
4
 
6
5
  # security.sri
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: port
3
- configName: server.port
4
3
  ---
5
4
 
6
5
  # server.port
@@ -38,6 +37,6 @@ export default defineConfig({
38
37
  });
39
38
  ```
40
39
 
41
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
40
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
42
41
 
43
- <RsbuildConig />
42
+ <RsbuildConfig configName="server.port" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: aliasStrategy
3
- configName: source.aliasStrategy
4
3
  ---
5
4
 
6
5
  # source.aliasStrategy
@@ -10,6 +9,6 @@ configName: source.aliasStrategy
10
9
 
11
10
  `source.aliasStrategy` 用于控制 `tsconfig.json` 中的 `paths` 选项与打包工具的 `alias` 选项的优先级。
12
11
 
13
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
12
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
14
13
 
15
- <RsbuildConig />
14
+ <RsbuildConfig configName="source.aliasStrategy" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: alias
3
- configName: source.alias
4
3
  ---
5
4
 
6
5
  # source.alias
@@ -19,6 +18,6 @@ type Alias = Record<string, string | false | (string | false)[]> | Function;
19
18
  对于 TypeScript 项目,你只需要在 `tsconfig.json` 中配置 [compilerOptions.paths](https://www.typescriptlang.org/tsconfig#paths) 即可,Rsbuild 会自动识别它,不需要额外配置 `source.alias` 字段,详见 [「路径别名」](https://modernjs.dev/guides/basic-features/alias.html)。
20
19
  :::
21
20
 
22
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
21
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
23
22
 
24
- <RsbuildConig />
23
+ <RsbuildConfig configName="source.alias" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: decorators
3
- configName: source.decorators
4
3
  ---
5
4
 
6
5
  # source.decorators
@@ -23,6 +22,6 @@ const defaultDecorators = {
23
22
 
24
23
  用于配置装饰器语法。
25
24
 
26
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
25
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
27
26
 
28
- <RsbuildConig />
27
+ <RsbuildConfig configName="source.decorators" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: define
3
- configName: source.define
4
3
  ---
5
4
 
6
5
  # source.define
@@ -16,6 +15,6 @@ const defaultDefine = {
16
15
 
17
16
  构建时将代码中的变量替换成其它值或者表达式,可以用于在代码逻辑中区分开发环境与生产环境等场景。
18
17
 
19
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
18
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
20
19
 
21
- <RsbuildConig />
20
+ <RsbuildConfig configName="source.define" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: exclude
3
- configName: source.exclude
4
3
  ---
5
4
 
6
5
  # source.exclude
@@ -10,6 +9,6 @@ configName: source.exclude
10
9
 
11
10
  指定不需要编译的 JavaScript/TypeScript 文件。用法与 Rspack 中的 [Rule.exclude](https://rspack.dev/zh/config/module#ruleexclude) 一致,支持传入字符串或正则表达式来匹配模块的路径。
12
11
 
13
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
12
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
14
13
 
15
- <RsbuildConig />
14
+ <RsbuildConfig configName="source.exclude" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: include
3
- configName: source.include
4
3
  ---
5
4
 
6
5
  # source.include
@@ -21,6 +20,6 @@ const defaultInclude = [
21
20
 
22
21
  `source.include` 用于指定额外需要编译的 JavaScript 文件。
23
22
 
24
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
23
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
25
24
 
26
- <RsbuildConig />
25
+ <RsbuildConfig configName="source.include" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: preEntry
3
- configName: source.preEntry
4
3
  ---
5
4
 
6
5
  # source.preEntry
@@ -10,6 +9,6 @@ configName: source.preEntry
10
9
 
11
10
  在每个页面的入口文件前添加一段代码,这段代码会早于页面的代码执行,因此可以用于执行一些全局的代码逻辑,比如注入 polyfill、设置全局样式等。
12
11
 
13
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
12
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
14
13
 
15
- <RsbuildConig />
14
+ <RsbuildConfig configName="source.preEntry" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: transformImport
3
- configName: source.transformImport
4
3
  ---
5
4
 
6
5
  # source.transformImport
@@ -59,9 +58,9 @@ const defaultArcoConfig = [
59
58
  当你添加了 `antd` 或 `@arco-design/web-react` 相关的配置时,优先级会高于上述默认配置。
60
59
  :::
61
60
 
62
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
61
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
63
62
 
64
- <RsbuildConig />
63
+ <RsbuildConfig configName="source.transformImport" />
65
64
 
66
65
  ### 禁用默认配置
67
66
 
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: cssExtract
3
- configName: tools.cssExtract
4
3
  ---
5
4
 
6
5
  # tools.cssExtract
@@ -30,6 +29,6 @@ const defaultOptions = {
30
29
 
31
30
  通过 `tools.cssExtract` 可以更改 [CssExtractRspackPlugin](https://www.rspack.dev/zh/plugins/rspack/css-extract-rspack-plugin) 或 [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) 的配置。
32
31
 
33
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
32
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
34
33
 
35
- <RsbuildConig />
34
+ <RsbuildConfig configName="tools.cssExtract" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: cssLoader
3
- configName: tools.cssLoader
4
3
  ---
5
4
 
6
5
  # tools.cssLoader
@@ -17,6 +16,6 @@ const defaultOptions = {
17
16
 
18
17
  修改 [css-loader](https://github.com/webpack-contrib/css-loader) 的配置项。
19
18
 
20
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
19
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
21
20
 
22
- <RsbuildConig />
21
+ <RsbuildConfig configName="tools.cssLoader" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: htmlPlugin
3
- configName: tools.htmlPlugin
4
3
  ---
5
4
 
6
5
  # tools.htmlPlugin
@@ -36,6 +35,6 @@ const defaultOptions = {
36
35
 
37
36
  通过 `tools.htmlPlugin` 可以修改 [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin) 或 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 的配置项。
38
37
 
39
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
38
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
40
39
 
41
- <RsbuildConig />
40
+ <RsbuildConfig configName="tools.htmlPlugin" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: lightningcssLoader
3
- configName: tools.lightningcssLoader
4
3
  ---
5
4
 
6
5
  # tools.lightningcssLoader
@@ -36,6 +35,6 @@ const defaultOptions = {
36
35
 
37
36
  需要注意的是,开启 `lightningcss-loader` 时,将会默认关闭 `postcss-loader`。
38
37
 
39
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
38
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
40
39
 
41
- <RsbuildConig />
40
+ <RsbuildConfig configName="tools.lightningcssLoader" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: postcss
3
- configName: tools.postcss
4
3
  ---
5
4
 
6
5
  # tools.postcss
@@ -35,6 +34,6 @@ Modern.js 默认集成 PostCSS,你可以通过 `tools.postcss` 对 [postcss-lo
35
34
 
36
35
  需要注意的是,当你开启 `tools.lightningcss` 配置时,PostCSS 将会被默认禁用,包括 `postcss-loader` 及其默认插件。
37
36
 
38
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
37
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
39
38
 
40
- <RsbuildConig />
39
+ <RsbuildConfig configName="tools.postcss" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: rspack
3
- configName: tools.rspack
4
3
  ---
5
4
 
6
5
  # tools.rspack
@@ -10,6 +9,6 @@ configName: tools.rspack
10
9
 
11
10
  `tools.rspack` 选项用于修改 [Rspack](https://rspack.dev/) 的配置项。
12
11
 
13
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
12
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
14
13
 
15
- <RsbuildConig />
14
+ <RsbuildConfig configName="tools.rspack" />
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  title: styleLoader
3
- configName: tools.styleLoader
4
3
  ---
5
4
 
6
5
  # tools.styleLoader
@@ -10,6 +9,6 @@ configName: tools.styleLoader
10
9
 
11
10
  通过 `tools.styleLoader` 可以设置 [style-loader](https://github.com/webpack-contrib/style-loader) 的配置项。
12
11
 
13
- import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
12
+ import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
14
13
 
15
- <RsbuildConig />
14
+ <RsbuildConfig configName="tools.styleLoader" />
@@ -2,31 +2,39 @@
2
2
 
3
3
  部分应用中,开发者可能希望对所有 BFF 函数做统一的处理,例如鉴权、日志、数据处理等。
4
4
 
5
- Modern.js 提供了两种方式,允许开发者根据运行时框架自由扩展 BFF Server。
5
+ Modern.js 支持用户通过 [Custom Server](/guides/advanced-features/custom-server.html) 的方式来自由扩展 BFF Server。
6
6
 
7
- ## 中间件
8
7
 
9
- 开发者可以在编写 `api/_app.ts` 文件中编写中间件,用来扩展 BFF Server。以 Express 作为运行时框架为例,介绍如何手写一个中间件,添加权限校验:
8
+ ## 使用中间件
10
9
 
11
- ```ts title="api/_app.ts"
12
- import { hook } from '@modern-js/runtime/server';
13
- import { Request, Response, NextFunction } from 'express';
10
+ 开发者可以在 `server/modern.server.ts` 中通过 配置 middlewares 来使用中间件。下面介绍如何手写一个 BFF 中间件,添加权限校验:
14
11
 
15
- export default hook(({ addMiddleware }) => {
16
- addMiddleware(async (req: Request, res: Response, next: NextFunction) => {
17
- if (req.url !== '/api/login') {
18
- const sid = req?.cookies?.sid;
19
- if (!sid) {
20
- res.status(400);
21
- res.json({ code: -1, message: 'need login' });
22
- } else {
23
- next();
24
- }
25
- } else {
26
- next();
12
+
13
+ ```ts title="server/modern.server.ts"
14
+ import {
15
+ type MiddlewareHandler,
16
+ defineServerConfig,
17
+ } from '@modern-js/server-runtime';
18
+
19
+ const requireAuthForApi: MiddlewareHandler = async (c, next) => {
20
+ if (c.req.path.startsWith('/api') && c.req.path !== '/api/login') {
21
+ const sid = c.req.cookie('sid');
22
+ if (!sid) {
23
+ return c.json({ code: -1, message: 'need login' }, 400);
27
24
  }
28
- });
25
+ }
26
+ await next();
27
+ };
28
+
29
+ export default defineServerConfig({
30
+ middlewares: [
31
+ {
32
+ name: 'require-auth-for-api',
33
+ handler: requireAuthForApi,
34
+ },
35
+ ]
29
36
  });
37
+
30
38
  ```
31
39
 
32
40
 
@@ -97,60 +105,4 @@ export default () => {
97
105
 
98
106
  ![Network](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/network3.png)
99
107
 
100
- 以上代码模拟了在 `/api/_app.ts` 中添加中间件的方式,实现了简易的登录功能。同样,可以在这个钩子文件中实现其他功能来扩展 BFF Server。
101
-
102
- :::info
103
- 不同运行时框架中,中间件的写法不一定相同,详情可见[运行时框架](/guides/advanced-features/bff/frameworks)。
104
-
105
- :::
106
-
107
- ## 定义 Server 实例
108
-
109
- 除了中间件之外,还可以通过 `api/app.ts` 文件来定义 BFF Server 的实例。开发者需要默认导出一个能被运行时框架插件识别的实例。这里简单展示一下 Koa 和 Express 如何定义 Server 实例。
110
-
111
- import { Tabs, Tab as TabItem } from "@theme";
112
-
113
- <Tabs>
114
- <TabItem value="express" label="Express.js" default>
115
-
116
- ```ts title="api/app.ts"
117
- import express from 'express';
118
-
119
- const app = express();
120
- app.use(async (req, res, next) => {
121
- console.info(`access url: ${req.url}`);
122
- next();
123
- });
124
-
125
- export default app;
126
- ```
127
-
128
- </TabItem>
129
- <TabItem value="koa" label="Koa.js">
130
-
131
- ```ts title="api/app.ts"
132
- import koa from 'koa';
133
-
134
- const app = new Koa();
135
- app.use(async (ctx, next) => {
136
- console.info(`access url: ${ctx.url}`);
137
- await next();
138
- });
139
-
140
- export default app;
141
- ```
142
-
143
- </TabItem>
144
- </Tabs>
145
-
146
- 在复杂的 BFF 逻辑中,定义 Server 实例可以更方便通过一个入口来组织代码逻辑,设计目录结构。在这个文件中,可以执行初始化逻辑,添加全局中间件,声明路由,甚至扩展原有框架。
147
-
148
- BFF 函数定义的路由会在 `app.ts` 文件定义的路由之后注册,所以在这里你也可以拦截 BFF 函数定义的路由,进行预处理或是提前响应。
149
-
150
- :::note
151
- 此时,如果应用中同时存在 `api/_app.ts`,则定义的中间件会被放在 `api/app.ts` 导出实例的最后执行。多数情况下,中间件就能覆盖大多数 BFF 函数的定制需求。只有当应用的服务端逻辑比较复杂时,才需要自定义 Server 实例。
152
- :::
153
-
154
- :::caution
155
- 当应用中没有 `api/app.ts` 的时候,Modern.js 默认会添加 [koa-body](https://www.npmjs.com/package/koa-body)。当应用中存在 `api/app.ts` 时,如果开发者希望使用带有 Body 的 BFF 函数,需要**自行添加** `koa-body`。
156
- :::
108
+ 以上代码模拟了在 `server/Modern.server.ts` 中定义中间件的方式,实现了简易的登录功能。同样,可以在这个配置文件中实现其他功能来扩展 BFF Server。
@@ -5,82 +5,22 @@ title: 运行时框架
5
5
 
6
6
  # 运行时框架
7
7
 
8
- Modern.js BFF 支持不同的运行时框架,当前 Modern.js 的 BFF 支持两种运行时框架 [Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/)。
9
-
10
- 使用不同运行时框架时,有部分 API 会存在差异。
8
+ Modern.js [Hono.js](https://hono.dev/) 作为 BFF Server 运行时框架,因此可以基于 Hono.js 生态[扩展 BFF Server](/guides/advanced-features/bff/extend-server.html)。
11
9
 
12
10
  ## 获取请求上下文
13
11
 
14
- 在 BFF 函数中,有时需要获取请求上下文,来处理更多逻辑。此时,根据不同的运行时框架,你需要从通过不同的 API 来获取:
15
-
16
- import { Tabs, Tab as TabItem } from "@theme";
17
-
18
- <Tabs>
19
- <TabItem value="express" label="Express.js" default>
20
-
21
- ```ts title="api/lambda/hello.ts"
22
- import { useContext } from '@modern-js/runtime/express'
23
- export const get = async () => {
24
- const { req } = useContext();
25
- console.info(`access url: ${req.url}`);
26
- return 'Hello Modern.js'
27
- };
28
- ```
29
-
30
- </TabItem>
31
- <TabItem value="koa" label="Koa.js">
12
+ 在 BFF 函数中,有时需要获取请求上下文,来处理更多逻辑。此时,你可以通过 `useHonoContext` 来获取:
32
13
 
33
14
  ```ts title="api/lambda/hello.ts"
34
- import { useContext } from '@modern-js/runtime/koa'
15
+ import { useHonoContext } from '@modern-js/plugin-bff/hono'
35
16
  export const get = async () => {
36
- const ctx = useContext();
37
- console.info(`access url: ${req.url}`);
17
+ const c = useHonoContext();
18
+ console.info(`access url: ${c.req.url}`);
38
19
  return 'Hello Modern.js'
39
20
  };
40
21
  ```
41
22
 
42
- </TabItem>
43
- </Tabs>
44
-
45
23
  :::info
46
- 详细内容可以参考 [useContext](/apis/app/runtime/bff/use-context)。
24
+ 详细内容可以参考 [useHonoContext](/apis/app/runtime/bff/use-hono-context)。
47
25
  :::
48
26
 
49
- ## 使用中间件
50
-
51
- 在 BFF 函数中,有时需要使用中间件,来处理更多逻辑。此时,根据不同的运行时框架,你需要从通过不同的 API 来获取:
52
-
53
- <Tabs>
54
- <TabItem value="express" label="Express.js" default>
55
-
56
- ```ts title="api/_app.ts"
57
- import { hook } from '@modern-js/runtime/express';
58
-
59
- export default hook(({ addMiddleware }) => {
60
- addMiddleware((req, res, next) => {
61
- req.query.id = 'koa';
62
- next();
63
- });
64
- });
65
- ```
66
-
67
- </TabItem>
68
- <TabItem value="koa" label="Koa.js">
69
-
70
- ```ts title="api/_app.ts"
71
- import { hook } from '@modern-js/runtime/koa';
72
-
73
- export default hook(({ addMiddleware }) => {
74
- addMiddleware(async (ctx, next) => {
75
- ctx.req.query.id = 'koa';
76
- await next();
77
- });
78
- });
79
- ```
80
-
81
- </TabItem>
82
- </Tabs>
83
-
84
- :::info
85
- 详细内容可以参考 [hook](/apis/app/runtime/bff/hook)。
86
- :::