@modern-js/main-doc 2.0.0-beta.1 → 2.0.0-beta.2

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 (157) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/build.md +1 -1
  3. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/dev.md +1 -1
  4. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/lint.md +1 -1
  5. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/new.md +1 -2
  6. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/start.md +1 -1
  7. package/en/docusaurus-plugin-content-docs/current/apis/app/commands/test.md +1 -1
  8. package/en/docusaurus-plugin-content-docs/current/apis/app/overview.md +1 -1
  9. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/model/auto-actions.md +1 -1
  10. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/model/connect.md +1 -1
  11. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/model/create-app.md +1 -1
  12. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/model/create-store.md +1 -1
  13. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/model/handle-effect.md +1 -1
  14. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/model/model_.md +1 -1
  15. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/model/use-local-model.md +1 -1
  16. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/model/use-model.md +1 -1
  17. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/model/use-static-model.md +1 -1
  18. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/model/use-store.md +1 -1
  19. package/en/docusaurus-plugin-content-docs/current/components/command-tip.md +56 -0
  20. package/en/docusaurus-plugin-content-docs/current/components/reduck-tip.md +5 -0
  21. package/en/docusaurus-plugin-content-docs/current/configure/app/output/disable-css-extract.md +12 -0
  22. package/en/docusaurus-plugin-content-docs/current/configure/app/runtime/router.md +1 -1
  23. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/_category_.json +4 -0
  24. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/_category_.json +4 -0
  25. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/api/_category_.json +4 -0
  26. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/api/app.md +152 -0
  27. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/api/ejs.md +56 -0
  28. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/api/fs.md +54 -0
  29. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/api/git.md +49 -0
  30. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/api/handlebars.md +58 -0
  31. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/api/json.md +59 -0
  32. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/api/npm.md +49 -0
  33. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/develop.md +52 -0
  34. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/introduce.md +46 -0
  35. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/run-in-js.md +48 -0
  36. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/codesmith/structure.md +87 -0
  37. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/config/_category_.json +4 -0
  38. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/config/common.md +106 -0
  39. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/config/module.md +39 -0
  40. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/config/monorepo.md +28 -0
  41. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/config/mwa.md +89 -0
  42. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/_category_.json +4 -0
  43. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/abstract.md +26 -0
  44. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/_category_.json +4 -0
  45. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/file/_category_.json +4 -0
  46. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/file/addFile.md +52 -0
  47. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/file/addHelper.md +26 -0
  48. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/file/addManyFile.md +58 -0
  49. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/file/addPartial.md +26 -0
  50. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/file/introduce.md +38 -0
  51. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/file/rmDir.md +24 -0
  52. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/file/rmFile.md +24 -0
  53. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/file/updateJSONFile.md +54 -0
  54. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/file/updateModernConfig.md +26 -0
  55. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/file/updateTextRawFile.md +33 -0
  56. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/git/_category_.json +4 -0
  57. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/git/gitAddAndCommit.md +20 -0
  58. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/git/initGitRepo.md +16 -0
  59. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/git/isInGitRepo.md +16 -0
  60. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/hook/_category_.json +4 -0
  61. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/hook/afterForged.md +35 -0
  62. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/hook/onForged.md +36 -0
  63. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/info/_category_.json +4 -0
  64. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/info/isFileExit.md +22 -0
  65. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/info/locale.md +17 -0
  66. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/info/readDir.md +22 -0
  67. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/input/_category_.json +4 -0
  68. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/input/addInputAfter.md +57 -0
  69. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/input/addInputBefore.md +56 -0
  70. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/input/setInput.md +42 -0
  71. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/input/setInputValue.md +30 -0
  72. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/input/type.md +65 -0
  73. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/introduce.md +91 -0
  74. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/new/_category_.json +4 -0
  75. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/new/createElement.md +33 -0
  76. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/new/createSubProject.md +35 -0
  77. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/new/enableFunc.md +44 -0
  78. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/new/introduce.md +15 -0
  79. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/npm/_category_.json +4 -0
  80. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/api/npm/install.md +18 -0
  81. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/develop.md +125 -0
  82. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/plugin/use.md +61 -0
  83. package/en/docusaurus-plugin-content-docs/current/guides/topic-detail/generator/project.md +118 -0
  84. package/en/docusaurus-plugin-content-docs/current.json +39 -3
  85. package/package.json +3 -3
  86. package/scripts/summary.en.json +1 -1
  87. package/scripts/summary.zh.json +1 -1
  88. package/zh/apis/app/commands/new.md +0 -1
  89. package/zh/apis/app/hooks/server/test.md +2 -2
  90. package/zh/apis/app/runtime/web-server/hook.md +4 -4
  91. package/zh/apis/app/runtime/web-server/middleware.md +4 -4
  92. package/zh/configure/app/output/disable-css-extract.md +12 -0
  93. package/zh/guides/advanced-features/bff/_category_.json +5 -1
  94. package/zh/guides/advanced-features/bff/bff-proxy.md +5 -3
  95. package/zh/guides/advanced-features/bff/frameworks.md +72 -51
  96. package/zh/guides/advanced-features/bff/function.md +16 -30
  97. package/zh/guides/advanced-features/bff/index.md +20 -0
  98. package/zh/guides/advanced-features/bff/type.md +43 -0
  99. package/zh/guides/advanced-features/custom-app.md +63 -1
  100. package/zh/guides/advanced-features/web-server.md +21 -110
  101. package/zh/guides/basic-features/data-fetch.md +61 -0
  102. package/zh/guides/basic-features/env-vars.md +88 -41
  103. package/zh/guides/basic-features/routes.md +267 -0
  104. package/zh/guides/concept/entries.md +112 -0
  105. package/zh/guides/concept/lifecycle.md +10 -0
  106. package/zh/guides/get-started/quick-start.md +199 -1
  107. package/zh/guides/get-started/upgrade.md +75 -1
  108. package/zh/guides/topic-detail/generator/codesmith/api/_category_.json +4 -0
  109. package/zh/guides/topic-detail/generator/codesmith/api/app.md +152 -0
  110. package/zh/guides/topic-detail/generator/codesmith/api/ejs.md +56 -0
  111. package/zh/guides/topic-detail/generator/codesmith/api/fs.md +54 -0
  112. package/zh/guides/topic-detail/generator/codesmith/api/git.md +48 -0
  113. package/zh/guides/topic-detail/generator/codesmith/api/handlebars.md +56 -0
  114. package/zh/guides/topic-detail/generator/codesmith/api/json.md +58 -0
  115. package/zh/guides/topic-detail/generator/codesmith/api/npm.md +45 -0
  116. package/zh/guides/topic-detail/generator/codesmith/develop.md +52 -0
  117. package/zh/guides/topic-detail/generator/codesmith/introduce.md +42 -1
  118. package/zh/guides/topic-detail/generator/codesmith/run-in-js.md +48 -0
  119. package/zh/guides/topic-detail/generator/codesmith/structure.md +86 -0
  120. package/zh/guides/topic-detail/generator/config/mwa.md +4 -8
  121. package/zh/guides/topic-detail/generator/plugin/api/file/addFile.md +1 -1
  122. package/zh/guides/topic-detail/generator/plugin/api/file/addHelper.md +1 -1
  123. package/zh/guides/topic-detail/generator/plugin/api/file/addPartial.md +2 -2
  124. package/zh/guides/topic-detail/generator/plugin/api/file/introduce.md +1 -1
  125. package/zh/guides/topic-detail/generator/plugin/api/file/rmDir.md +1 -1
  126. package/zh/guides/topic-detail/generator/plugin/api/file/rmFile.md +1 -1
  127. package/zh/guides/topic-detail/generator/plugin/api/file/updateJSONFile.md +3 -2
  128. package/zh/guides/topic-detail/generator/plugin/api/file/updateModernConfig.md +2 -2
  129. package/zh/guides/topic-detail/generator/plugin/api/file/updateTextRawFile.md +1 -1
  130. package/zh/guides/topic-detail/generator/plugin/api/hook/afterForged.md +3 -3
  131. package/zh/guides/topic-detail/generator/plugin/api/hook/onForged.md +3 -3
  132. package/zh/guides/topic-detail/generator/plugin/api/input/addInputAfter.md +1 -1
  133. package/zh/guides/topic-detail/generator/plugin/api/input/addInputBefore.md +1 -1
  134. package/zh/guides/topic-detail/generator/plugin/api/input/type.md +1 -1
  135. package/zh/guides/topic-detail/generator/plugin/api/new/createElement.md +1 -1
  136. package/zh/guides/topic-detail/generator/plugin/api/new/createSubProject.md +1 -1
  137. package/zh/guides/topic-detail/generator/plugin/api/new/enableFunc.md +1 -1
  138. package/zh/guides/topic-detail/generator/plugin/api/npm/install.md +1 -1
  139. package/zh/guides/topic-detail/generator/plugin/develop.md +11 -7
  140. package/zh/guides/topic-detail/monorepo/sub-project-interface.md +0 -2
  141. package/zh/tutorials/first-app/c01-getting-started/1.1-prerequisites.md +2 -2
  142. package/zh/tutorials/first-app/c02-generator-and-studio/2.1-generator.md +0 -8
  143. package/zh/tutorials/first-app/c02-generator-and-studio/2.2-boilerplates.md +15 -7
  144. package/zh/tutorials/first-app/c07-app-entry/7.1-intro.md +1 -1
  145. package/zh/tutorials/first-app/c07-app-entry/7.2-add-entry-in-cli.md +1 -5
  146. package/zh/tutorials/first-app/c08-client-side-routing/8.2-file-based-routing.md +0 -8
  147. package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/env.md +0 -72
  148. package/zh/apis/app/runtime/env.md +0 -70
  149. package/zh/components/deploy.md +0 -60
  150. package/zh/components/dev-ide.md +0 -1
  151. package/zh/components/entry-name.md +0 -15
  152. package/zh/components/env-prepare.md +0 -1
  153. package/zh/components/launch-bff-choices.md +0 -6
  154. package/zh/guides/advanced-features/bff/bff-server.md +0 -142
  155. package/zh/guides/advanced-features/typescript.md +0 -4
  156. package/zh/guides/concept/integrated.md +0 -4
  157. package/zh/guides/concept/solutions.md +0 -4
@@ -0,0 +1,118 @@
1
+ ---
2
+ sidebar_position: 2
3
+ ---
4
+
5
+ # Project Generator
6
+
7
+ Modern.js provides `@modern-js/create` as a project generator for Modern.js project creation.
8
+
9
+ ## Use
10
+
11
+ There is no need to install `@modern-js/create` globally, just execute the tool directly with npx:
12
+
13
+ ```bash
14
+ npx @modern-js/create [projectDir]
15
+ ```
16
+
17
+ :::info
18
+ Use npx to get the latest version of `@modern-js/create` every time.
19
+ :::
20
+
21
+ ## Params
22
+
23
+ ### [projectDir]
24
+
25
+ Project directory name.
26
+
27
+ When executing the above command, the 'projectDir` folder will be created in the current directory by default, and the initialization project will be in this folder. When this parameter is empty, the initialization project will be directly generated in the current directory.
28
+
29
+ ### --version
30
+
31
+ Get the `@modern-js/create` tool version.
32
+
33
+ ```bash
34
+ $ npx @modern-js/create --version
35
+
36
+ [INFO] @modern-js/create v2.0.0
37
+ ```
38
+
39
+ ### --lang
40
+
41
+ Specifies the execution language, supports `zh` and `en`.
42
+
43
+ By default, `@modern-js/create` will automatically identify the user's system language, choose to use Chinese or English, if the recognition fails or you want to specify the language manually, you can use this parameter.
44
+
45
+ ### -c, --config
46
+
47
+ Specifies the project default configuration.
48
+
49
+ By default, `@modern-js/create` will have interaction problems such as language selection and package management tools during execution. When you need to specify these configuration contents in advance, you can pass in this field.
50
+
51
+ This field is a JSON character string, for example when running a package management tool:
52
+
53
+ ```bash
54
+ npx @modern-js/create --config '{"packageManager": "pnpm"}'
55
+ ```
56
+
57
+ Specific configuration information viewable [Project Configuration](/docs/guides/topic-detail/generator/config/common).
58
+
59
+ ### --no-need-install
60
+
61
+ By default, `@modern-js/create` automatically installs dependency after the project is created, use this parameter to ignore the install dependency step.
62
+
63
+ ### --dist-tag <distTag\>
64
+
65
+ Specifies the generator and Modern.js dependency versions.
66
+
67
+ A smaller micro-generator will be executed during the execution of `@modern-js/create`, and the version number of the micro-generator that can be executed with this parameter and the version number of the corresponding installation Modern.js related dependencies.
68
+
69
+ ### --registry <registry/>
70
+
71
+ Execute the npm registry to get the generator and npm packages.
72
+
73
+ ### --debug
74
+
75
+ Displays debug log information during generator execution.
76
+
77
+ ### --mwa
78
+
79
+ One-click to create an application engineering solution project.
80
+
81
+ With this parameter, `@modern-js/create` will create the application project with the configuration default value.
82
+
83
+ ### --module
84
+
85
+ One-click to create a module engineering solution project.
86
+
87
+ With this parameter, `@modern-js/create` will create the module project with the configuration default value.
88
+
89
+ ### --monorepo
90
+
91
+ One-click to create a Monorepo engineering solution project.
92
+
93
+ With this parameter, `@modern-js/create` will create the Monorepo project with the configuration default value.
94
+
95
+ ### --plugin <plugin\>
96
+
97
+ Specifies the generator plugin.
98
+
99
+ Modern.js support the use of the generator plug-in custom Modern.js the default project type or add the project type scenes, the parameter user specifies the customized generator plugin.
100
+
101
+ For custom generator plugins, please refer to [Development Generator Plugin](/docs/guides/topic-detail/generator/plugin/abstract).
102
+
103
+ ### --generator <generator\>
104
+
105
+ Specifies the microgenerator.
106
+
107
+ By default, `@modern-js/create` will execute the microgenerator Modern.js framework build-in. If you need to execute a customized microgenerator, and you need to use the posture of'npx @modern-js/create ', you can use this parameter directly.
108
+
109
+ For custom microgenerators, please refer to [Develop Microgenerator](/docs/guides/topic-detail/generator/codesmith/introduce).
110
+
111
+ ### --packages <packages\>
112
+
113
+ A project is created by specifying a specific package version dependency.
114
+
115
+ If you need to specify a specific package version when creating a project, you can use this parameter. This parameter will lock the package version number in the `package.json` of the project root directory by configuration `pnpm.overrides` (package management tool selects pnpm) or `resolutions`.
116
+
117
+
118
+ The parameter value is a JSON character string.
@@ -103,9 +103,41 @@
103
103
  "message": "自定义插件",
104
104
  "description": "The label for category 自定义插件 in sidebar guidesSidebar"
105
105
  },
106
- "sidebar.guidesSidebar.category.自定义生成器插件": {
107
- "message": "自定义生成器插件",
108
- "description": "The label for category 自定义生成器插件 in sidebar guidesSidebar"
106
+ "sidebar.guidesSidebar.category.项目生成器": {
107
+ "message": "Project Generator",
108
+ "description": "The label for category 项目生成器 in sidebar guidesSidebar"
109
+ },
110
+ "sidebar.guidesSidebar.category.工程方案配置": {
111
+ "message": "Engineering configuration",
112
+ "description": "The label for category 工程方案配置 in sidebar guidesSidebar"
113
+ },
114
+ "sidebar.guidesSidebar.category.开发生成器插件": {
115
+ "message": "Development Generator Plugin",
116
+ "description": "The label for category 开发生成器插件 in sidebar guidesSidebar"
117
+ },
118
+ "sidebar.guidesSidebar.category.开发微生成器": {
119
+ "message": "Develop microgenerator",
120
+ "description": "The label for category 开发微生成器 in sidebar guidesSidebar"
121
+ },
122
+ "sidebar.guidesSidebar.category.自定义输入 API": {
123
+ "message": "Customized Input API",
124
+ "description": "The label for category 自定义输入 API in sidebar guidesSidebar"
125
+ },
126
+ "sidebar.guidesSidebar.category.获取信息 API": {
127
+ "message": "Get Information API",
128
+ "description": "The label for category 获取信息 API in sidebar guidesSidebar"
129
+ },
130
+ "sidebar.guidesSidebar.category.Hook 函数 API": {
131
+ "message": "Hook Function API",
132
+ "description": "The label for category Hook 函数 in sidebar guidesSidebar"
133
+ },
134
+ "sidebar.guidesSidebar.category.文件操作 API": {
135
+ "message": "File API",
136
+ "description": "The label for category 文件操作 API in sidebar guidesSidebar"
137
+ },
138
+ "sidebar.guidesSidebar.category.启用功能 API": {
139
+ "message": "Enable function API",
140
+ "description": "The label for category 启用功能 API in sidebar guidesSidebar"
109
141
  },
110
142
  "sidebar.guidesSidebar.category.常见问题": {
111
143
  "message": "常见问题",
@@ -243,6 +275,10 @@
243
275
  "message": "server",
244
276
  "description": "The label for category server in sidebar configsAppSidebar"
245
277
  },
278
+ "sidebar.configsAppSidebar.category.deploy (部署)": {
279
+ "message": "deploy",
280
+ "description": "The label for category deploy in sidebar configsAppSidebar"
281
+ },
246
282
  "sidebar.configsAppSidebar.category.bff (BFF API)": {
247
283
  "message": "bff",
248
284
  "description": "The label for category bff in sidebar configsAppSidebar"
package/package.json CHANGED
@@ -11,20 +11,20 @@
11
11
  "modern",
12
12
  "modern.js"
13
13
  ],
14
- "version": "2.0.0-beta.1",
14
+ "version": "2.0.0-beta.2",
15
15
  "publishConfig": {
16
16
  "registry": "https://registry.npmjs.org/",
17
17
  "access": "public"
18
18
  },
19
19
  "peerDependencies": {
20
- "@modern-js/builder-doc": "2.0.0-beta.1"
20
+ "@modern-js/builder-doc": "2.0.0-beta.2"
21
21
  },
22
22
  "devDependencies": {
23
23
  "ts-node": "^10",
24
24
  "fs-extra": "^10",
25
25
  "@types/node": "^16",
26
26
  "@types/fs-extra": "^9",
27
- "@modern-js/builder-doc": "2.0.0-beta.1"
27
+ "@modern-js/builder-doc": "2.0.0-beta.2"
28
28
  },
29
29
  "scripts": {
30
30
  "build": "npx ts-node ./scripts/sync.ts"
@@ -1 +1 @@
1
- [{"name":"assetPrefix","dirname":"dev"},{"name":"hmr","dirname":"dev"},{"name":"https","dirname":"dev"},{"name":"port","dirname":"dev"},{"name":"progressBar","dirname":"dev"},{"name":"startUrl","dirname":"dev"},{"name":"lazyCompilation","dirname":"experiments"},{"name":"appIcon","dirname":"html"},{"name":"crossorigin","dirname":"html"},{"name":"disableHtmlFolder","dirname":"html"},{"name":"favicon","dirname":"html"},{"name":"faviconByEntries","dirname":"html"},{"name":"inject","dirname":"html"},{"name":"injectByEntries","dirname":"html"},{"name":"meta","dirname":"html"},{"name":"metaByEntries","dirname":"html"},{"name":"mountId","dirname":"html"},{"name":"template","dirname":"html"},{"name":"templateByEntries","dirname":"html"},{"name":"templateParameters","dirname":"html"},{"name":"templateParametersByEntries","dirname":"html"},{"name":"title","dirname":"html"},{"name":"titleByEntries","dirname":"html"},{"name":"assetPrefix","dirname":"output"},{"name":"assetsRetry","dirname":"output"},{"name":"charset","dirname":"output"},{"name":"cleanDistPath","dirname":"output"},{"name":"convertToRem","dirname":"output"},{"name":"copy","dirname":"output"},{"name":"cssModuleLocalIdentName","dirname":"output"},{"name":"dataUriLimit","dirname":"output"},{"name":"disableCssModuleExtension","dirname":"output"},{"name":"disableFilenameHash","dirname":"output"},{"name":"disableInlineRuntimeChunk","dirname":"output"},{"name":"disableMinimize","dirname":"output"},{"name":"disableSourceMap","dirname":"output"},{"name":"disableTsChecker","dirname":"output"},{"name":"distPath","dirname":"output"},{"name":"enableAssetFallback","dirname":"output"},{"name":"enableAssetManifest","dirname":"output"},{"name":"enableCssModuleTSDeclaration","dirname":"output"},{"name":"enableInlineScripts","dirname":"output"},{"name":"enableInlineStyles","dirname":"output"},{"name":"enableLatestDecorators","dirname":"output"},{"name":"externals","dirname":"output"},{"name":"filename","dirname":"output"},{"name":"legalComments","dirname":"output"},{"name":"overrideBrowserslist","dirname":"output"},{"name":"polyfill","dirname":"output"},{"name":"svgDefaultExport","dirname":"output"},{"name":"buildCache","dirname":"performance"},{"name":"bundleAnalyze","dirname":"performance"},{"name":"chunkSplit","dirname":"performance"},{"name":"printFileSize","dirname":"performance"},{"name":"profile","dirname":"performance"},{"name":"removeConsole","dirname":"performance"},{"name":"removeMomentLocale","dirname":"performance"},{"name":"sri","dirname":"security"},{"name":"alias","dirname":"source"},{"name":"compileJsDataURI","dirname":"source"},{"name":"define","dirname":"source"},{"name":"exclude","dirname":"source"},{"name":"globalVars","dirname":"source"},{"name":"include","dirname":"source"},{"name":"moduleScopes","dirname":"source"},{"name":"preEntry","dirname":"source"},{"name":"resolveExtensionPrefix","dirname":"source"},{"name":"resolveMainFields","dirname":"source"},{"name":"autoprefixer","dirname":"tools"},{"name":"babel","dirname":"tools"},{"name":"cssExtract","dirname":"tools"},{"name":"cssLoader","dirname":"tools"},{"name":"devServer","dirname":"tools"},{"name":"htmlPlugin","dirname":"tools"},{"name":"inspector","dirname":"tools"},{"name":"less","dirname":"tools"},{"name":"minifyCss","dirname":"tools"},{"name":"postcss","dirname":"tools"},{"name":"pug","dirname":"tools"},{"name":"sass","dirname":"tools"},{"name":"styleLoader","dirname":"tools"},{"name":"styledComponents","dirname":"tools"},{"name":"terser","dirname":"tools"},{"name":"tsChecker","dirname":"tools"},{"name":"tsLoader","dirname":"tools"},{"name":"webpack","dirname":"tools"},{"name":"webpackChain","dirname":"tools"}]
1
+ [{"name":"assetPrefix","dirname":"dev"},{"name":"hmr","dirname":"dev"},{"name":"https","dirname":"dev"},{"name":"port","dirname":"dev"},{"name":"progressBar","dirname":"dev"},{"name":"startUrl","dirname":"dev"},{"name":"lazyCompilation","dirname":"experiments"},{"name":"appIcon","dirname":"html"},{"name":"crossorigin","dirname":"html"},{"name":"disableHtmlFolder","dirname":"html"},{"name":"favicon","dirname":"html"},{"name":"faviconByEntries","dirname":"html"},{"name":"inject","dirname":"html"},{"name":"injectByEntries","dirname":"html"},{"name":"meta","dirname":"html"},{"name":"metaByEntries","dirname":"html"},{"name":"mountId","dirname":"html"},{"name":"template","dirname":"html"},{"name":"templateByEntries","dirname":"html"},{"name":"templateParameters","dirname":"html"},{"name":"templateParametersByEntries","dirname":"html"},{"name":"title","dirname":"html"},{"name":"titleByEntries","dirname":"html"},{"name":"assetPrefix","dirname":"output"},{"name":"assetsRetry","dirname":"output"},{"name":"charset","dirname":"output"},{"name":"cleanDistPath","dirname":"output"},{"name":"convertToRem","dirname":"output"},{"name":"copy","dirname":"output"},{"name":"cssModuleLocalIdentName","dirname":"output"},{"name":"dataUriLimit","dirname":"output"},{"name":"disableCssExtract","dirname":"output"},{"name":"disableCssModuleExtension","dirname":"output"},{"name":"disableFilenameHash","dirname":"output"},{"name":"disableInlineRuntimeChunk","dirname":"output"},{"name":"disableMinimize","dirname":"output"},{"name":"disableSourceMap","dirname":"output"},{"name":"disableTsChecker","dirname":"output"},{"name":"distPath","dirname":"output"},{"name":"enableAssetFallback","dirname":"output"},{"name":"enableAssetManifest","dirname":"output"},{"name":"enableCssModuleTSDeclaration","dirname":"output"},{"name":"enableInlineScripts","dirname":"output"},{"name":"enableInlineStyles","dirname":"output"},{"name":"enableLatestDecorators","dirname":"output"},{"name":"externals","dirname":"output"},{"name":"filename","dirname":"output"},{"name":"legalComments","dirname":"output"},{"name":"overrideBrowserslist","dirname":"output"},{"name":"polyfill","dirname":"output"},{"name":"svgDefaultExport","dirname":"output"},{"name":"buildCache","dirname":"performance"},{"name":"bundleAnalyze","dirname":"performance"},{"name":"chunkSplit","dirname":"performance"},{"name":"printFileSize","dirname":"performance"},{"name":"profile","dirname":"performance"},{"name":"removeConsole","dirname":"performance"},{"name":"removeMomentLocale","dirname":"performance"},{"name":"sri","dirname":"security"},{"name":"alias","dirname":"source"},{"name":"compileJsDataURI","dirname":"source"},{"name":"define","dirname":"source"},{"name":"exclude","dirname":"source"},{"name":"globalVars","dirname":"source"},{"name":"include","dirname":"source"},{"name":"moduleScopes","dirname":"source"},{"name":"preEntry","dirname":"source"},{"name":"resolveExtensionPrefix","dirname":"source"},{"name":"resolveMainFields","dirname":"source"},{"name":"autoprefixer","dirname":"tools"},{"name":"babel","dirname":"tools"},{"name":"cssExtract","dirname":"tools"},{"name":"cssLoader","dirname":"tools"},{"name":"devServer","dirname":"tools"},{"name":"htmlPlugin","dirname":"tools"},{"name":"inspector","dirname":"tools"},{"name":"less","dirname":"tools"},{"name":"minifyCss","dirname":"tools"},{"name":"postcss","dirname":"tools"},{"name":"pug","dirname":"tools"},{"name":"sass","dirname":"tools"},{"name":"styleLoader","dirname":"tools"},{"name":"styledComponents","dirname":"tools"},{"name":"terser","dirname":"tools"},{"name":"tsChecker","dirname":"tools"},{"name":"tsLoader","dirname":"tools"},{"name":"webpack","dirname":"tools"},{"name":"webpackChain","dirname":"tools"}]
@@ -1 +1 @@
1
- [{"name":"assetPrefix","dirname":"dev"},{"name":"hmr","dirname":"dev"},{"name":"https","dirname":"dev"},{"name":"port","dirname":"dev"},{"name":"progressBar","dirname":"dev"},{"name":"startUrl","dirname":"dev"},{"name":"lazyCompilation","dirname":"experiments"},{"name":"appIcon","dirname":"html"},{"name":"crossorigin","dirname":"html"},{"name":"disableHtmlFolder","dirname":"html"},{"name":"favicon","dirname":"html"},{"name":"faviconByEntries","dirname":"html"},{"name":"inject","dirname":"html"},{"name":"injectByEntries","dirname":"html"},{"name":"meta","dirname":"html"},{"name":"metaByEntries","dirname":"html"},{"name":"mountId","dirname":"html"},{"name":"template","dirname":"html"},{"name":"templateByEntries","dirname":"html"},{"name":"templateParameters","dirname":"html"},{"name":"templateParametersByEntries","dirname":"html"},{"name":"title","dirname":"html"},{"name":"titleByEntries","dirname":"html"},{"name":"assetPrefix","dirname":"output"},{"name":"assetsRetry","dirname":"output"},{"name":"charset","dirname":"output"},{"name":"cleanDistPath","dirname":"output"},{"name":"convertToRem","dirname":"output"},{"name":"copy","dirname":"output"},{"name":"cssModuleLocalIdentName","dirname":"output"},{"name":"dataUriLimit","dirname":"output"},{"name":"disableCssModuleExtension","dirname":"output"},{"name":"disableFilenameHash","dirname":"output"},{"name":"disableInlineRuntimeChunk","dirname":"output"},{"name":"disableMinimize","dirname":"output"},{"name":"disableSourceMap","dirname":"output"},{"name":"disableTsChecker","dirname":"output"},{"name":"distPath","dirname":"output"},{"name":"enableAssetFallback","dirname":"output"},{"name":"enableAssetManifest","dirname":"output"},{"name":"enableCssModuleTSDeclaration","dirname":"output"},{"name":"enableInlineScripts","dirname":"output"},{"name":"enableInlineStyles","dirname":"output"},{"name":"enableLatestDecorators","dirname":"output"},{"name":"externals","dirname":"output"},{"name":"filename","dirname":"output"},{"name":"legalComments","dirname":"output"},{"name":"overrideBrowserslist","dirname":"output"},{"name":"polyfill","dirname":"output"},{"name":"svgDefaultExport","dirname":"output"},{"name":"buildCache","dirname":"performance"},{"name":"bundleAnalyze","dirname":"performance"},{"name":"chunkSplit","dirname":"performance"},{"name":"printFileSize","dirname":"performance"},{"name":"profile","dirname":"performance"},{"name":"removeConsole","dirname":"performance"},{"name":"removeMomentLocale","dirname":"performance"},{"name":"sri","dirname":"security"},{"name":"alias","dirname":"source"},{"name":"compileJsDataURI","dirname":"source"},{"name":"define","dirname":"source"},{"name":"exclude","dirname":"source"},{"name":"globalVars","dirname":"source"},{"name":"include","dirname":"source"},{"name":"moduleScopes","dirname":"source"},{"name":"preEntry","dirname":"source"},{"name":"resolveExtensionPrefix","dirname":"source"},{"name":"resolveMainFields","dirname":"source"},{"name":"autoprefixer","dirname":"tools"},{"name":"babel","dirname":"tools"},{"name":"cssExtract","dirname":"tools"},{"name":"cssLoader","dirname":"tools"},{"name":"devServer","dirname":"tools"},{"name":"htmlPlugin","dirname":"tools"},{"name":"inspector","dirname":"tools"},{"name":"less","dirname":"tools"},{"name":"minifyCss","dirname":"tools"},{"name":"postcss","dirname":"tools"},{"name":"pug","dirname":"tools"},{"name":"sass","dirname":"tools"},{"name":"styleLoader","dirname":"tools"},{"name":"styledComponents","dirname":"tools"},{"name":"terser","dirname":"tools"},{"name":"tsChecker","dirname":"tools"},{"name":"tsLoader","dirname":"tools"},{"name":"webpack","dirname":"tools"},{"name":"webpackChain","dirname":"tools"}]
1
+ [{"name":"assetPrefix","dirname":"dev"},{"name":"hmr","dirname":"dev"},{"name":"https","dirname":"dev"},{"name":"port","dirname":"dev"},{"name":"progressBar","dirname":"dev"},{"name":"startUrl","dirname":"dev"},{"name":"lazyCompilation","dirname":"experiments"},{"name":"appIcon","dirname":"html"},{"name":"crossorigin","dirname":"html"},{"name":"disableHtmlFolder","dirname":"html"},{"name":"favicon","dirname":"html"},{"name":"faviconByEntries","dirname":"html"},{"name":"inject","dirname":"html"},{"name":"injectByEntries","dirname":"html"},{"name":"meta","dirname":"html"},{"name":"metaByEntries","dirname":"html"},{"name":"mountId","dirname":"html"},{"name":"template","dirname":"html"},{"name":"templateByEntries","dirname":"html"},{"name":"templateParameters","dirname":"html"},{"name":"templateParametersByEntries","dirname":"html"},{"name":"title","dirname":"html"},{"name":"titleByEntries","dirname":"html"},{"name":"assetPrefix","dirname":"output"},{"name":"assetsRetry","dirname":"output"},{"name":"charset","dirname":"output"},{"name":"cleanDistPath","dirname":"output"},{"name":"convertToRem","dirname":"output"},{"name":"copy","dirname":"output"},{"name":"cssModuleLocalIdentName","dirname":"output"},{"name":"dataUriLimit","dirname":"output"},{"name":"disableCssExtract","dirname":"output"},{"name":"disableCssModuleExtension","dirname":"output"},{"name":"disableFilenameHash","dirname":"output"},{"name":"disableInlineRuntimeChunk","dirname":"output"},{"name":"disableMinimize","dirname":"output"},{"name":"disableSourceMap","dirname":"output"},{"name":"disableTsChecker","dirname":"output"},{"name":"distPath","dirname":"output"},{"name":"enableAssetFallback","dirname":"output"},{"name":"enableAssetManifest","dirname":"output"},{"name":"enableCssModuleTSDeclaration","dirname":"output"},{"name":"enableInlineScripts","dirname":"output"},{"name":"enableInlineStyles","dirname":"output"},{"name":"enableLatestDecorators","dirname":"output"},{"name":"externals","dirname":"output"},{"name":"filename","dirname":"output"},{"name":"legalComments","dirname":"output"},{"name":"overrideBrowserslist","dirname":"output"},{"name":"polyfill","dirname":"output"},{"name":"svgDefaultExport","dirname":"output"},{"name":"buildCache","dirname":"performance"},{"name":"bundleAnalyze","dirname":"performance"},{"name":"chunkSplit","dirname":"performance"},{"name":"printFileSize","dirname":"performance"},{"name":"profile","dirname":"performance"},{"name":"removeConsole","dirname":"performance"},{"name":"removeMomentLocale","dirname":"performance"},{"name":"sri","dirname":"security"},{"name":"alias","dirname":"source"},{"name":"compileJsDataURI","dirname":"source"},{"name":"define","dirname":"source"},{"name":"exclude","dirname":"source"},{"name":"globalVars","dirname":"source"},{"name":"include","dirname":"source"},{"name":"moduleScopes","dirname":"source"},{"name":"preEntry","dirname":"source"},{"name":"resolveExtensionPrefix","dirname":"source"},{"name":"resolveMainFields","dirname":"source"},{"name":"autoprefixer","dirname":"tools"},{"name":"babel","dirname":"tools"},{"name":"cssExtract","dirname":"tools"},{"name":"cssLoader","dirname":"tools"},{"name":"devServer","dirname":"tools"},{"name":"htmlPlugin","dirname":"tools"},{"name":"inspector","dirname":"tools"},{"name":"less","dirname":"tools"},{"name":"minifyCss","dirname":"tools"},{"name":"postcss","dirname":"tools"},{"name":"pug","dirname":"tools"},{"name":"sass","dirname":"tools"},{"name":"styleLoader","dirname":"tools"},{"name":"styledComponents","dirname":"tools"},{"name":"terser","dirname":"tools"},{"name":"tsChecker","dirname":"tools"},{"name":"tsLoader","dirname":"tools"},{"name":"webpack","dirname":"tools"},{"name":"webpackChain","dirname":"tools"}]
@@ -32,7 +32,6 @@ $ npx modern new
32
32
  ? 请选择你想要的操作 创建工程元素
33
33
  ? 创建工程元素 新建「应用入口」
34
34
  ? 请填写入口名称 entry
35
- ? 是否需要调整默认配置? 否
36
35
  ```
37
36
 
38
37
  ### 启用启用可选功能
@@ -3,9 +3,9 @@ title: test.[tj]s
3
3
  sidebar_position: 2
4
4
  ---
5
5
 
6
- 扩展 Web Server 测试目录。
6
+ 自定义 Web Server 测试目录。
7
7
 
8
- 应用支持对扩展 Web Server 逻辑进行测试,可直接在项目 `server/` 目录下创建后缀为 `.test.[tj]s` 文件进行编写测试用例。
8
+ 应用支持对自定义 Web Server 逻辑进行测试,可直接在项目 `server/` 目录下创建后缀为 `.test.[tj]s` 文件进行编写测试用例。
9
9
 
10
10
  :::info 注
11
11
  使用单元测试、集成测试需要提前在项目下执行 new 命令启用「单元测试 / 集成测试」功能。
@@ -5,7 +5,7 @@ title: Hook
5
5
  用于拓展 Modern.js 内置的 Web Server,非 BFF 请求会经过这些中 Hook 的处理。
6
6
 
7
7
  :::note
8
- 更多内容可以查看[扩展 Web Server](/docs/guides/advanced-features/web-server)。
8
+ 更多内容可以查看[自定义 Web Server](/docs/guides/advanced-features/web-server)。
9
9
  :::
10
10
 
11
11
  ## 使用姿势
@@ -17,13 +17,13 @@ export const afterMatch: AfterMatchHook = (context, next) => {}
17
17
  export const afterRender: AfterRenderHook = (context, next) => {}
18
18
  ```
19
19
 
20
- :::info 扩展 Web Server
21
- 使用该 API 前,请先执行 `pnpm run new` 新建「Web Server 扩展」源码目录。
20
+ :::info 自定义 Web Server
21
+ 使用该 API 前,请先执行 `pnpm run new` 新建「自定义 Web Serve」源码目录。
22
22
 
23
23
  ```bash
24
24
  pnpm run new
25
25
  ? 请选择你想要的操作 创建工程元素
26
- ? 新建「Web Server 扩展」源码目录
26
+ ? 新建「自定义 Web Server」源码目录
27
27
  ```
28
28
  :::
29
29
 
@@ -7,7 +7,7 @@ title: Middleware
7
7
  与 [Hook](/docs/apis/app/runtime/web-server/hook) 不同的是,Middleware 可以使用 Server 运行时框架拓展。
8
8
 
9
9
  :::note
10
- 更多内容可以查看[扩展 Web Server](/docs/guides/advanced-features/web-server)。
10
+ 更多内容可以查看[自定义 Web Server](/docs/guides/advanced-features/web-server)。
11
11
  :::
12
12
 
13
13
  ## 使用姿势
@@ -22,13 +22,13 @@ export const middleware: Middleware[] = [
22
22
  ]
23
23
  ```
24
24
 
25
- :::info 扩展 Web Server
26
- 使用该 API 前,请先执行 `pnpm run new` 新建「Web Server 扩展」源码目录。
25
+ :::info 自定义 Web Server
26
+ 使用该 API 前,请先执行 `pnpm run new` 新建「自定义 Web Server」源码目录。
27
27
 
28
28
  ```bash
29
29
  pnpm run new
30
30
  ? 请选择你想要的操作 创建工程元素
31
- ? 新建「Web Server 扩展」源码目录
31
+ ? 新建「自定义 Web Server」源码目录
32
32
  ```
33
33
  :::
34
34
 
@@ -0,0 +1,12 @@
1
+ ---
2
+ title: output.disableCssExtract
3
+ sidebar_label: disableCssExtract
4
+ ---
5
+
6
+ :::info BUILDER
7
+ 该配置为 Modern.js Builder 配置,可能存在无法跳转的链接。详细信息可参考 [output.disableCssExtract](https://modernjs.dev/builder/zh/api/config-output.html#output-disablecssextract)。
8
+ :::
9
+
10
+ import Main from '@modern-js/builder-doc/zh/config/output/disableCssExtract.md'
11
+
12
+ <Main />
@@ -1,4 +1,8 @@
1
1
  {
2
2
  "label": "BFF",
3
- "position": 1
3
+ "position": 1,
4
+ "link": {
5
+ "type": "doc",
6
+ "id": "guides/advanced-features/bff/index"
7
+ }
4
8
  }
@@ -1,5 +1,5 @@
1
1
  ---
2
- sidebar_position: 6
2
+ sidebar_position: 5
3
3
  title: 使用 BFF 代理
4
4
  ---
5
5
 
@@ -9,7 +9,7 @@ title: 使用 BFF 代理
9
9
  使用 BFF 代理需确保请求能进入 BFF handler。(例如请求路径必须包含 bff prefix)
10
10
  :::
11
11
 
12
- 在 `modern.server-runtime.config.js` 文件中编写以下 BFF 代理配置,会将发送到 `localhost:8080/api/v1/topics` 的请求代理到 `https://cnodejs.org/api/v1/topics`。
12
+ 在 `modern.server-runtime.config.js` 文件中编写以下 BFF 代理配置,会将发送到 `http://localhost:8080/api/v1/topics` 的请求代理到 `https://cnodejs.org/api/v1/topics`。
13
13
 
14
14
  ```js title="modern.server-runtime.config.js"
15
15
  import { defineConfig } from '@modern-js/app-tools/server';
@@ -22,4 +22,6 @@ export default defineConfig({
22
22
  };
23
23
  ```
24
24
 
25
- 具体 API 请查看 [BFF 代理](/docs/configure/app/bff/proxy),更多 Modern.js 代理的能力可查看[调试代理](/docs/guides/basic-features/proxy)。
25
+ :::note
26
+ 详细 API 请查看 [BFF 代理](/docs/configure/app/bff/proxy)。更多 Modern.js 代理的能力可查看[调试代理](/docs/guides/basic-features/proxy)。
27
+ :::
@@ -1,81 +1,106 @@
1
1
  ---
2
- sidebar_position: 4
2
+ sidebar_position: 3
3
3
  title: 运行时框架
4
4
  ---
5
5
 
6
- 如前面章节所说,目前 Modern.js 的 BFF 支持 4 种主流的 Server 框架,可以根据自身偏好选择。
7
-
8
- 多框架支持也是【 一体化 BFF 】中重要的一环,多数情况下,开发者直接使用钩子文件来扩展 BFF 函数,无需关心通过框架启动服务、日志输出等应用级别的问题。
6
+ ## 函数写法
9
7
 
10
- 所有框架均支持 BFF 函数的所有能力,并且使用方式是相同的,例如:
8
+ 在函数写法下,各类运行时框架仅中间件写法存在差异,其他实现基本相同。这里以 Express 为例,介绍如何在 `api/_app.ts` 中,手写一个中间件,添加权限校验:
11
9
 
12
- - RESTful API
13
- - Schema 模式
14
- - Hooks(useContext)
15
- - 不同的数据类型
16
- - 动态路由
17
- - 一体化调用
10
+ ```ts
11
+ import { hook } from '@modern-js/runtime/server';
12
+ import { Request, Response, NextFunction } from 'express';
18
13
 
19
- Modern.js BFF 中兼容了这些框架大部分的规范,开发者可以直接使用对应 Server 框架的约定和生态。
14
+ export default hook(({ addMiddleware }) => {
15
+ addMiddleware(async (req: Request, res: Response, next: NextFunction) => {
16
+ if (req.url !== '/api/login') {
17
+ const sid = req?.cookies?.sid;
18
+ if (!sid) {
19
+ res.status(400);
20
+ res.json({ code: -1, message: 'need login' });
21
+ } else {
22
+ next();
23
+ }
24
+ } else {
25
+ next();
26
+ }
27
+ });
28
+ });
29
+ ```
20
30
 
21
- 每一种框架都提供了两类扩展写法 BFF 函数的方式,分别是【 函数写法 】和【 框架写法 】。
31
+ 然后添加一个普通的 BFF 函数 `/api/hello.ts`:
22
32
 
23
- ## 函数写法
33
+ ```ts
34
+ export default async () => {
35
+ return 'Hello Modern.js';
36
+ };
37
+ ```
24
38
 
25
- 在上一章节中,简单的演示了 Express 扩展 BFF 函数的示例。
39
+ 最后在前端 `src/App.tsx` 添加接口的访问代码,直接使用一体化的方式调用:
26
40
 
27
- 函数写法就是通过添加钩子文件 `_app.ts` 的方式,编写中间件逻辑来扩展 BFF 函数。
41
+ ```ts
42
+ import { useState, useEffect } from 'react';
43
+ import { get as hello } from '@api/hello';
28
44
 
29
- ### [Express](https://expressjs.com/)
45
+ export default () => {
46
+ const [text, setText] = useState('');
30
47
 
31
- Express 的函数写法,可以通过在 `_app.[tj]s` 下添加 `express` 的中间件:
48
+ useEffect(() => {
49
+ async function fetchMyApi() {
50
+ const { message } = await hello();
51
+ setText(message);
52
+ }
32
53
 
33
- ```ts
34
- import { hook } from "@modern-js/runtime/server";
54
+ fetchMyApi();
55
+ }, []);
35
56
 
36
- export default hook(({ addMiddleware }) => {
37
- addMiddleware(async (req, res, next) => {
38
- req.query.id = "express";
39
- await next();
40
- });
41
- });
57
+ return <p>{text}</p>;
58
+ };
42
59
  ```
43
60
 
44
- ### [Koa](https://koajs.com/)
61
+ 然后 `pnpm run dev` 启动项目,访问 `http://localhost:8080/` 会发现 `/api/hello` 的请求被拦截了:
45
62
 
46
- Koa 函数写法下,可以通过在 `_app.[tj]s` 下添加 koa 的中间件:
63
+ ![Network](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/network2.png)
47
64
 
48
- ```ts
49
- import { hook } from "@modern-js/runtime/server";
65
+ 最后再修改前端代码 `src/App.tsx`,在访问 `/api/hello` 前先调用登录接口:
50
66
 
51
- export default hook(({ addMiddleware }) => {
52
- addMiddleware(async (ctx, next) => {
53
- console.info(`access url: ${ctx.url}`);
54
- next();
55
- });
56
- });
67
+ ```ts
68
+ import { useState, useEffect } from 'react';
69
+ import { get as hello } from '@api/hello';
70
+ import { post as login } from '@api/login';
71
+
72
+ export default () => {
73
+ const [text, setText] = useState('');
74
+
75
+ useEffect(() => {
76
+ async function fetchAfterLogin() {
77
+ const { code } = await login();
78
+ if (code === 0) {
79
+ const { message } = await hello();
80
+ setText(message);
81
+ }
82
+ }
83
+ fetchAfterLogin();
84
+ }, []);
85
+
86
+ return <p>{text}</p>;
87
+ };
57
88
  ```
58
89
 
59
- ## 框架写法
90
+ 刷新页面,可以看到 `/api/hello` 访问成功:
60
91
 
61
- 框架写法是一种使用框架分层结构来扩展 BFF 函数的方式。
92
+ ![Network](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/network3.png)
62
93
 
63
- 和函数写法相比,框架写法虽然能够利用更多框架的结构,在复杂场景下让整个 BFF Server 更加清晰,但也相的更加复杂,需要关心更多框架层面的内容。
94
+ 以上代码模拟了在 `/api/_app.ts` 中添加中间件的方式,实现了简易的登录功能。同样,可以在这个钩子文件中实现其他功能来扩展 BFF Server
64
95
 
65
- :::info
66
- 多数情况下,函数写法就能覆盖大多数 BFF 函数的定制需求。只有当你的项目服务端逻辑比较复杂,代码需要分层,或者需要使用更多框架的元素时(如 egg 插件),才需要使用框架写法。
67
- :::
96
+ ## 框架写法
68
97
 
69
- 框架写法中,所有的 BFF 函数都需要写在 `api/lambda/` 目录下,并且无法使用钩子文件 `_app.[tj]s`。
98
+ 框架写法下,Modern.js 不会收集 `api/_app.ts` 中的中间件,运行流程由插件自行控制。
70
99
 
71
100
  ### Express
72
101
 
73
102
  Express 的框架写法支持可在 `api/app.[tj]s` 定义 API Server 的启动逻辑,执行应用的初始化工作,添加全局中间件,声明路由,甚至扩展原有框架等。
74
103
 
75
- :::info 注
76
- 注意这里是 `app.[tj]s`,而不是函数写法中的钩子文件 `_app.[tj]s`。
77
- :::
78
-
79
104
  BFF 函数定义的路由会在 `app.ts` 文件定义的路由之后注册,所以在这里你也可以拦截 BFF 函数定义的路由,进行预处理或是提前响应。
80
105
 
81
106
  ```ts title="api/app.ts"
@@ -99,10 +124,6 @@ export default app;
99
124
 
100
125
  Koa 框架写法与 Express 类似,支持在 `app.[tj]s` 定义 API Server 的启动逻辑,执行应用的初始化工作,添加全局中间件,声明路由,扩展原有框架等。
101
126
 
102
- :::info 注
103
- 注意这里是 `app.[tj]s`,而不是函数写法中的钩子文件 `_app.[tj]s`。
104
- :::
105
-
106
127
  BFF 函数定义的路由会在 `app.ts` 文件定义的路由之后注册,所以在这里你也可以拦截 BFF 函数定义的路由,进行预处理或是提前响应。
107
128
 
108
129
  :::caution 注意
@@ -1,41 +1,23 @@
1
1
  ---
2
2
  sidebar_position: 1
3
- title: BFF 函数
3
+ title: 一体化调用
4
4
  ---
5
5
 
6
- 在[一体化 Web 专题](/docs/guides/basic-features/routes)中,介绍过 Modern.js Serverless Web Development 开发方式,包括自动化路由、内置 Web Server、一体化 SSG/SSR/SPR 等。其中的 SSR 技术,可以称作 Serverless SSR,实现了 SSR 在开发、运行、部署全流程中的 Serverless。
6
+ Modern.js 允许在 React 组件中直接调用 `api/` 目录下满足一定条件的函数,称为**一体化调用**。
7
7
 
8
- 这一专题中会详细介绍另一部分:Serverless BFF。跟 SSR 一样,能实现 BFF(Backends for Frontends)在开发、运行、部署全流程中的 Serverless。
9
-
10
- 在**前后端分离**概念出现后一段时间发展中,前端部分能够做的事越来越多,前端需要一些面向 UI 的数据接口,因此业界引入了 BFF 这一概念。
11
-
12
- 它主要为了解决的问题包括:
13
-
14
- * 根据自身业务需求,对更底层 API 的聚合、映射、裁剪、代理。
15
- * 对一些特定场景的数据进行缓存,提高性能,进而提升用户体验。
16
- * 根据已有接口快速开发新产品。
17
- * 与第三方系统对接,例如登陆鉴权。
18
-
19
- Modern.js 提供了**一体化 BFF 方案**来进一步强化 BFF 能力,主要包括以下能力:
20
-
21
- * 快速开发调试上线,在同一项目中运行、构建、部署 BFF 代码。
22
- * 极简的纯函数调用,在前端直接 import BFF 函数,调用时能自动转换成 HTTP 请求。
23
- * 无私有协议,遵循 RESTful API 规范,所有 BFF 接口都是标准化的。
24
- * 完善的 TypeScript 支持。
25
- * 满足用户使用偏好,支持多框架扩展写法。
26
- * 接口调用安全,提供 schema 的接口定义方式。
27
-
28
- ## 一体化调用
8
+ :::note
9
+ 使用一体化调用需要先开启 BFF 功能。
10
+ :::
29
11
 
30
- Modern.js 允许可以在 `src` 目录下的 React 组件中直接引入并调用在 `api` 目录下定义好函数。
12
+ ## BFF 函数
31
13
 
32
- [开启 BFF 功能](/docs/tutorials/first-app/c09-bff/9.2-enable-bff)之后,创建 `api/hello.ts` 文件,这里定义一个最简单的 BFF 函数:
14
+ 允许通过一体化调用的函数,称为 **BFF 函数**。这里写一个最简单的 BFF 函数,创建 `api/hello.ts` 文件:
33
15
 
34
16
  ```ts title="api/hello.ts"
35
17
  export const get = async () => 'Hello Modern.js';
36
18
  ```
37
19
 
38
- 接着在 `src` 下的 `App.tsx` 中直接 import 函数调用:
20
+ 接着在 `src/App.tsx` 中直接引入函数并调用:
39
21
 
40
22
  ```tsx title=src/App.tsx
41
23
  import { useState, useEffect } from 'react';
@@ -57,7 +39,7 @@ Modern.js 生成器已经在 `tsconfig.json` 中配置 `@api` 别名,因此可
57
39
 
58
40
  在 `src/App.tsx` 中引入的函数,会自动转换成接口调用,不需要再去通过 fetch 去调用接口。
59
41
 
60
- 执行 `pnpm run dev` 打开 <http://localhost:8080/> 可以看到页面已经展示了 BFF 函数返回的内容,在Network,可以看到页面向 <http://localhost:8080/api/hello> 发送了请求:
42
+ 执行 `pnpm run dev` 打开 `http://localhost:8080/` 可以看到页面已经展示了 BFF 函数返回的内容,在 Network 中可以看到页面向 `http://localhost:8080/api/hello` 发送了请求:
61
43
 
62
44
  ![Network](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/hello-modern.png)
63
45
 
@@ -65,12 +47,16 @@ Modern.js 生成器已经在 `tsconfig.json` 中配置 `@api` 别名,因此可
65
47
 
66
48
  Modern.js 中,BFF 函数对应的路由系统是基于文件系统实现的,也是一种**约定式路由**。
67
49
 
68
- 函数模式下 `api` 下的所有文件中的每个 BFF 函数都会映射为一个接口,框架模式下 `api/lambda` 下的所有文件中的每个 BFF 函数都会映射为一个接口。
50
+ 函数写法下 `api/` 下的所有文件中的每个 BFF 函数都会映射为一个接口。框架写法下 `api/lambda` 下的所有文件中的每个 BFF 函数都会映射为一个接口。
51
+
52
+ :::note
53
+ 函数写法和框架写法会在下一节详细介绍。
54
+ :::
69
55
 
70
56
  以下的 `$BASENAME` 指的是 BFF 函数的[路由前缀](/docs/configure/app/bff/prefix),可以在 `modern.config.js` 中进行配置,默认值为 `/api`。
71
57
 
72
58
  :::info 注
73
- 你可以通过 [prefix](/docs/configure/app/bff/prefix) 设置公共路由的前缀。
59
+ 可以通过 [bff.prefix](/docs/configure/app/bff/prefix) 设置公共路由的前缀。
74
60
  :::
75
61
 
76
62
  ### 默认路由
@@ -89,7 +75,7 @@ Modern.js 中,BFF 函数对应的路由系统是基于文件系统实现的,
89
75
 
90
76
  ### 动态路由
91
77
 
92
- 同样的,你可以通过创建命名带有 `[xxx]` 的文件夹或者文件来支持动态的命名路由参数。
78
+ 同样的,创建命名带有 `[xxx]` 的文件夹或者文件,支持动态的命名路由参数。
93
79
 
94
80
  * `api/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
95
81
  * `api/user/username/[action].ts` -> `$BASENAME/user/username/:action`