@modern-js/main-doc 2.35.0 → 2.35.1

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 (48) hide show
  1. package/docs/en/apis/app/commands.mdx +12 -11
  2. package/docs/en/components/debug-app.mdx +1 -3
  3. package/docs/en/components/global-proxy-config.mdx +4 -13
  4. package/docs/en/components/global-proxy.mdx +2 -4
  5. package/docs/en/components/init-app.mdx +1 -1
  6. package/docs/en/configure/app/builder-plugins.mdx +2 -2
  7. package/docs/en/configure/app/plugins.mdx +3 -4
  8. package/docs/en/configure/app/server/base-url.mdx +0 -2
  9. package/docs/en/configure/app/source/enable-async-entry.mdx +1 -1
  10. package/docs/en/guides/basic-features/alias.mdx +1 -1
  11. package/docs/en/guides/basic-features/css.mdx +35 -15
  12. package/docs/en/guides/basic-features/data-fetch.mdx +12 -12
  13. package/docs/en/guides/basic-features/html.mdx +2 -2
  14. package/docs/en/guides/basic-features/routes.mdx +27 -15
  15. package/docs/en/guides/get-started/quick-start.mdx +8 -17
  16. package/docs/en/guides/get-started/upgrade.mdx +10 -4
  17. package/docs/en/guides/topic-detail/framework-plugin/implement.mdx +2 -0
  18. package/docs/en/guides/topic-detail/micro-frontend/c01-introduction.mdx +1 -0
  19. package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx +24 -17
  20. package/docs/en/guides/topic-detail/micro-frontend/c03-main-app.mdx +51 -37
  21. package/docs/en/guides/topic-detail/micro-frontend/c04-communicate.mdx +1 -0
  22. package/docs/en/guides/topic-detail/micro-frontend/c05-mixed-stack.mdx +1 -1
  23. package/docs/en/tutorials/first-app/c02-component.mdx +4 -3
  24. package/docs/zh/apis/app/commands.mdx +10 -9
  25. package/docs/zh/apis/app/hooks/api/api.mdx +2 -1
  26. package/docs/zh/apis/app/hooks/server/index_.mdx +2 -1
  27. package/docs/zh/components/debug-app.mdx +1 -3
  28. package/docs/zh/components/global-proxy-config.mdx +4 -13
  29. package/docs/zh/components/global-proxy.mdx +2 -4
  30. package/docs/zh/configure/app/builder-plugins.mdx +1 -1
  31. package/docs/zh/configure/app/plugins.mdx +1 -2
  32. package/docs/zh/configure/app/server/base-url.mdx +0 -2
  33. package/docs/zh/configure/app/source/enable-async-entry.mdx +1 -1
  34. package/docs/zh/guides/basic-features/alias.mdx +1 -1
  35. package/docs/zh/guides/basic-features/css.mdx +35 -15
  36. package/docs/zh/guides/basic-features/data-fetch.mdx +11 -12
  37. package/docs/zh/guides/basic-features/html.mdx +4 -5
  38. package/docs/zh/guides/basic-features/routes.mdx +26 -19
  39. package/docs/zh/guides/get-started/quick-start.mdx +8 -17
  40. package/docs/zh/guides/get-started/upgrade.mdx +10 -4
  41. package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx +1 -1
  42. package/docs/zh/guides/topic-detail/framework-plugin/implement.mdx +2 -0
  43. package/docs/zh/guides/topic-detail/micro-frontend/c02-development.mdx +45 -21
  44. package/docs/zh/guides/topic-detail/micro-frontend/c03-main-app.mdx +51 -33
  45. package/docs/zh/guides/topic-detail/micro-frontend/c04-communicate.mdx +1 -0
  46. package/docs/zh/guides/topic-detail/micro-frontend/c05-mixed-stack.mdx +1 -0
  47. package/docs/zh/tutorials/first-app/c02-component.mdx +4 -3
  48. package/package.json +7 -7
@@ -1,10 +1,11 @@
1
1
  ---
2
- sidebar_position: 4
2
+ title: 数据获取
3
+ sidebar_position: 3
3
4
  ---
4
5
 
5
6
  # 数据获取
6
7
 
7
- Modern.js 中提供了开箱即用的数据获取能力,开发者可以通过这些 API,在 CSR 和 SSR 环境同构的进行开发。
8
+ Modern.js 中提供了开箱即用的数据获取能力,开发者可以通过这些 API,在项目中获取数据。
8
9
 
9
10
  需要注意的是,这些 API 并不帮助应用发起请求,而是帮助开发者更好地管理数据,提升项目的性能。
10
11
 
@@ -216,26 +217,25 @@ export default function UserLayout() {
216
217
 
217
218
  :::info
218
219
  此功能目前是实验性质,后续 API 可能有调整。
219
- 目前仅支持 CSR,敬请期待 Streaming SSR。
220
220
 
221
221
  :::
222
222
 
223
223
  创建 `user/layout.loader.ts`,并添加以下代码:
224
224
 
225
225
  ```ts title="routes/user/layout.loader.ts"
226
- import { defer } from "@modern-js/runtime/router"
226
+ import { defer } from '@modern-js/runtime/router';
227
227
 
228
228
  const loader = () =>
229
- defer({
230
- userInfo: new Promise((resolve) => {
229
+ defer({
230
+ userInfo: new Promise(resolve => {
231
231
  setTimeout(() => {
232
232
  resolve({
233
233
  age: 1,
234
- name: 'user layout'
235
- })
236
- }, 1000)
237
- })
238
- })
234
+ name: 'user layout',
235
+ });
236
+ }, 1000);
237
+ }),
238
+ });
239
239
 
240
240
  export default loader;
241
241
  ```
@@ -346,7 +346,6 @@ export default async (): Promise<ProfileData> => {
346
346
 
347
347
  在 SSR 项目中,每个 `loader` 也是一个服务端接口,我们推荐使用 `loader` 替代 http method 为 `get` 的 BFF 函数,作为接口层,避免多一层转发和执行。
348
348
 
349
-
350
349
  ## useLoader(旧版)
351
350
 
352
351
  **`useLoader`** 是 Modern.js 老版本中的 API。该 API 是一个 React Hook,专门提供给 SSR 应用使用,让开发者能同构的在组件中获取数据。
@@ -135,7 +135,7 @@ export default function Document(): React.ReactElement {
135
135
  <!--<?- html ?>-->
136
136
  <h1 style="color:red">以下为构建时传过来的参数:</h1>
137
137
  <h2>entryName: sub</h2>
138
- <h2>title: </h2>
138
+ <h2>title:</h2>
139
139
  <h2>rootId: root</h2>
140
140
  </div>
141
141
  <h1>bottom</h1>
@@ -166,12 +166,11 @@ export default function Document(): React.ReactElement {
166
166
  }
167
167
  ```
168
168
 
169
+ ## HTML 语法
169
170
 
170
- ## Html 语法
171
+ Modern.js 也支持通过 HTML(EJS) 语法来生成 HTML 文件。
171
172
 
172
- Modern.js 也支持 HTML 语法。默认情况下,Modern.js 的应用工程中会内置一份 HTML 模板,用于生成 HTML 代码。
173
-
174
- 基于 HTML 语法的模板,Modern.js 提供了**自定义 HTML 片段**和**完全自定义 HTML 模板**两种方式来自定义模板。
173
+ 默认情况下,Modern.js 的工程中会内置一份 HTML 模板,用于生成 HTML 代码。如果你需要自定义 HTML 模板,可以使用**自定义 HTML 片段**和**完全自定义 HTML 模板**两种方式。
175
174
 
176
175
  ### 自定义 HTML 片段
177
176
 
@@ -1,5 +1,5 @@
1
1
  ---
2
- sidebar_position: 1
2
+ sidebar_position: 2
3
3
  ---
4
4
 
5
5
  # 路由方案
@@ -151,13 +151,13 @@ export default () => {
151
151
 
152
152
  #### Config
153
153
 
154
- 每个 `Layout` 或 `Page` 文件都可以定义一个自己的 `config` 文件,如 `page.config.ts`,该文件中我们约定了一个具名导出 `handle`,
154
+ 每个 `Layout`, `$` 或 `Page` 文件都可以定义一个自己的 `config` 文件,如 `page.config.ts`,该文件中我们约定了一个具名导出 `handle`,
155
155
  这个字段中你可以定义任意属性:
156
156
 
157
157
  ```ts title="routes/page.config.ts"
158
158
  export const handle = {
159
- breadcrumbName: 'profile'
160
- }
159
+ breadcrumbName: 'profile',
160
+ };
161
161
  ```
162
162
 
163
163
  定义的这些属性可以通过 [`useMatches`](https://reactrouter.com/en/main/hooks/use-matches) hook 获取:
@@ -165,15 +165,13 @@ export const handle = {
165
165
  ```ts title="routes/layout.ts"
166
166
  export default () => {
167
167
  const matches = useMatches;
168
- const breadcrumbs = matches.map(matchedRoute => matchedRoute?.handle?.breadcrumbName);
169
- return (
170
- <Breadcrumb names={breadcrumbs}>
171
- </Breadcrumb>
172
- )
173
- }
168
+ const breadcrumbs = matches.map(
169
+ matchedRoute => matchedRoute?.handle?.breadcrumbName,
170
+ );
171
+ return <Breadcrumb names={breadcrumbs}></Breadcrumb>;
172
+ };
174
173
  ```
175
174
 
176
-
177
175
  ### 动态路由
178
176
 
179
177
  通过 `[]` 命名的文件目录,生成的路由会作为动态路由。例如以下文件目录:
@@ -233,6 +231,7 @@ export default () => {
233
231
  ```
234
232
 
235
233
  当访问任何匹配不到的路径时(如 `/blog/a`),都会渲染 `routes/$.tsx` 组件,因为这里有 `layout.tsx`,渲染的 UI 如下:
234
+
236
235
  ```tsx
237
236
  <RootLayout>
238
237
  <BlogLayout>
@@ -254,7 +253,6 @@ params['*']; // => 'aaa/bbb'
254
253
 
255
254
  `$.tsx` 可以加入到 `routes` 目录下的任意目录中,一个常见的使用示例是添加 `routes/$.tsx` 文件去定制任意层级的 404 内容。
256
255
 
257
-
258
256
  ### 无路径布局
259
257
 
260
258
  当目录名以 \_\_ 开头时,对应的目录名不会转换为实际的路由路径,例如以下文件目录:
@@ -368,6 +366,17 @@ export default () => {
368
366
  };
369
367
  ```
370
368
 
369
+ 在组件内做重定向,则可以通过 `useNavigate` hook,示例如下:
370
+
371
+ ```ts title="routes/user/page.ts"
372
+ import { useNavigate } from '@modern-js/runtime/router';
373
+
374
+ export default () => {
375
+ const navigate = useNavigate();
376
+ navigate('/login');
377
+ };
378
+ ```
379
+
371
380
  ### 错误处理
372
381
 
373
382
  `routes/` 下每一层目录中,开发者同样可以定义一个 `error.tsx` 文件,默认导出一个 `<ErrorBoundary>` 组件。
@@ -493,6 +502,7 @@ export const init = (context: RuntimeContext) => {
493
502
  ```
494
503
 
495
504
  :::info
505
+
496
506
  - 该功能目前仅在 Webpack 项目中支持,Rspack 项目暂不支持。
497
507
  - 对数据的预加载目前只会预加载 SSR 项目中 [Data Loader](/guides/basic-features/data-fetch) 中返回的数据。
498
508
 
@@ -512,14 +522,13 @@ export const init = (context: RuntimeContext) => {
512
522
  - 使用 `render`,仅在空闲时对静态资源进行加载,不会与首屏静态资源抢占网络。
513
523
  - 在 SSR 场景下,也会对数据进行预取。
514
524
 
515
- import Motivation from '@site-docs/components/convention-routing-motivation'
516
-
517
- <Motivation/>
525
+ import Motivation from '@site-docs/components/convention-routing-motivation';
518
526
 
519
- import Practice from '@site-docs/components/routes-practice'
527
+ <Motivation />
520
528
 
521
- <Practice/>
529
+ import Practice from '@site-docs/components/routes-practice';
522
530
 
531
+ <Practice />
523
532
 
524
533
  ## 自控式路由
525
534
 
@@ -569,5 +578,3 @@ export default defineConfig({
569
578
  ```
570
579
 
571
580
  如上述配置, 如果关闭了 [`runtime.router`](/configure/app/runtime/router) 配置,并直接使用 `react-router-dom` 进行项目路由管理时,还需要根据 React Router 文档自行包裹 `Provider`。
572
-
573
-
@@ -91,23 +91,15 @@ $ pnpm run build
91
91
 
92
92
  > modern build
93
93
 
94
- info Create a production build...
95
-
96
- info File sizes after production build:
94
+ info Staring production build...
95
+ ready Client compiled in 50ms
96
+ info Production file sizes:
97
97
 
98
98
  File Size Gzipped
99
- dist/static/js/lib-corejs.ffeb7fb8.js 214.96 kB 67.23 kB
100
- dist/static/js/lib-react.09721b5c.js 152.61 kB 49.02 kB
101
- dist/static/js/218.102e2f39.js 85.45 kB 28.5 kB
102
- dist/static/js/lib-babel.a7bba875.js 11.93 kB 3.95 kB
103
- dist/html/main/index.html 5.84 kB 2.57 kB
104
- dist/static/js/main.3568a38e.js 3.57 kB 1.44 kB
105
- dist/static/css/async/304.c3c481a5.css 2.62 kB 874 B
106
- dist/asset-manifest.json 1.48 kB 349 B
107
- dist/static/js/async/304.c45706bc.js 1.4 kB 575 B
108
- dist/static/js/async/509.fcb06e14.js 283 B 230 B
109
-
110
- Client ✔ done in 3.57s
99
+ dist/static/js/lib-react.09721b5c.js 152.6 kB 49.0 kB
100
+ dist/html/main/index.html 5.8 kB 2.5 kB
101
+ dist/static/js/main.3568a38e.js 3.5 kB 1.4 kB
102
+ dist/static/css/main.03221f72.css 1.4 kB 741 B
111
103
  ```
112
104
 
113
105
  构建产物默认生成到 `dist/`,目录结构如下:
@@ -135,8 +127,7 @@ $ pnpm run serve
135
127
 
136
128
  > modern serve
137
129
 
138
- Starting the modern server...
139
- info App running at:
130
+ Starting production server...
140
131
 
141
132
  > Local: http://localhost:8080/
142
133
  > Network: http://192.168.0.1:8080/
@@ -8,11 +8,13 @@ sidebar_position: 3
8
8
 
9
9
  Modern.js 提供了 `upgrade` 命令支持项目升级到最新的 Modern.js 版本。
10
10
 
11
- 在项目中执行 `pnpm run upgrade`:
11
+ 在项目中执行 `upgrade` 命令:
12
12
 
13
- ```bash
14
- $ pnpm run upgrade
13
+ import { PackageManagerTabs } from '@theme';
14
+
15
+ <PackageManagerTabs command="run upgrade" />
15
16
 
17
+ ```bash
16
18
  > modern upgrade
17
19
 
18
20
  [INFO] [项目类型]: Web 应用
@@ -22,11 +24,15 @@ $ pnpm run upgrade
22
24
 
23
25
  可以看到项目 `package.json` 中的依赖已经更改到最新。
24
26
 
27
+ :::tip
28
+ 如果项目的 package.json 中没有声明 upgrade 命令,你可以执行 `npx modern upgrade`,效果是等价的。
29
+ :::
30
+
25
31
  ## 指定版本升级
26
32
 
27
33
  Modern.js 所有的官方包目前都使用**统一版本号**进行发布。
28
34
 
29
- import ReleaseNote from "@site-docs/components/release-note"
35
+ import ReleaseNote from '@site-docs/components/release-note';
30
36
 
31
37
  <ReleaseNote />
32
38
 
@@ -736,7 +736,7 @@ export const myPlugin = (): CliPlugin<AppTools> => ({
736
736
 
737
737
  :::
738
738
 
739
- 应用工程中的 Server 部分也支持了插件。其中的 Hook 将会提供一些特定阶段调用和特殊功能的 Hook。
739
+ Modern.js 工程中的 Server 部分也支持了插件。其中的 Hook 将会提供一些特定阶段调用和特殊功能的 Hook。
740
740
 
741
741
  ### `create`
742
742
 
@@ -177,6 +177,8 @@ export const myPlugin = (): CliPlugin => ({
177
177
  });
178
178
  ```
179
179
 
180
+ 注意,只有当前插件的 setup 异步函数执行完毕,才会继续执行下一个插件的 setup 函数。因此,你需要避免在 setup 函数中进行耗时过长的异步操作,防止影响 CLI 启动性能。
181
+
180
182
  ## 添加插件
181
183
 
182
184
  自定义插件的使用方式可以查看:[plugins (框架插件)](/configure/app/plugins)。下面会介绍 Modern.js 中推荐的插件实现方法。
@@ -2,6 +2,7 @@
2
2
  sidebar_position: 2
3
3
  title: 体验微前端
4
4
  ---
5
+
5
6
  # 体验微前端
6
7
 
7
8
  通过本章你可以了解到:
@@ -10,7 +11,9 @@ title: 体验微前端
10
11
  - 微前端项目开发的基本流程。
11
12
 
12
13
  ## 创建应用
14
+
13
15
  目前支持两种路由模式
16
+
14
17
  - 自控式路由
15
18
  - 约定式路由
16
19
 
@@ -27,7 +30,7 @@ mkdir masterApp && cd masterApp
27
30
  npx @modern-js/create@latest
28
31
  ```
29
32
 
30
- import DefaultMWAGenerate from "@site-docs/components/default-mwa-generate";
33
+ import DefaultMWAGenerate from '@site-docs/components/default-mwa-generate';
31
34
 
32
35
  <DefaultMWAGenerate />
33
36
 
@@ -40,17 +43,19 @@ import DefaultMWAGenerate from "@site-docs/components/default-mwa-generate";
40
43
 
41
44
  接下来,让我们注册微前端插件并添加开启微前端主应用,并增加子应用列表:
42
45
 
43
- import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
46
+ import EnableMicroFrontend from '@site-docs/components/enable-micro-frontend';
44
47
 
45
48
  <EnableMicroFrontend />
46
49
 
47
50
  然后我们在 routes 文件夹下新建两个目录
51
+
48
52
  - table (用于加载约定式路由子应用)
49
53
  - dashboard (用于加载自控式路由子应用)
50
54
 
51
55
  在这两个目录下我们需要新建一个 `$.tsx` 文件作为主应用约定式路由的入口($ 代表模糊匹配,即 `/table` 和 `/table/test` 都会匹配到这个 `$.tsx` 作为该路由的入口文件,这会保证在微前端场景下正确加载子应用路由)
52
56
 
53
57
  #### 加载约定式路由子应用
58
+
54
59
  ```js title="src/routes/table/$.tsx"
55
60
  import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
56
61
 
@@ -61,13 +66,14 @@ const Index = () => {
61
66
  <div>
62
67
  <Table />
63
68
  </div>
64
- )
65
- }
69
+ );
70
+ };
66
71
 
67
72
  export default Index;
68
73
  ```
69
74
 
70
75
  #### 加载自控式路由子应用
76
+
71
77
  ```js title="src/routes/dashboard/$.tsx"
72
78
  import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
73
79
 
@@ -78,21 +84,30 @@ const Index = () => {
78
84
  <div>
79
85
  <Dashboard />
80
86
  </div>
81
- )
82
- }
87
+ );
88
+ };
83
89
 
84
90
  export default Index;
85
91
  ```
92
+
86
93
  #### 路由跳转
94
+
87
95
  此时主应用配置已经完成,通过路由即可加载子应用,修改主应用的 `layout.tsx` 来跳转路由
96
+
88
97
  ```js title="src/route/layout.tsx"
89
98
  import { Outlet, Link } from '@modern-js/runtime/router';
90
99
 
91
100
  const Layout = () => (
92
101
  <div>
93
- <div><Link to={'/table'}>加载约定式路由子应用</Link></div>
94
- <div><Link to={'/dashboard'}>加载自控式路由子应用</Link></div>
95
- <div><Link to={'/'}>卸载子应用</Link></div>
102
+ <div>
103
+ <Link to={'/table'}>加载约定式路由子应用</Link>
104
+ </div>
105
+ <div>
106
+ <Link to={'/dashboard'}>加载自控式路由子应用</Link>
107
+ </div>
108
+ <div>
109
+ <Link to={'/'}>卸载子应用</Link>
110
+ </div>
96
111
  <Outlet />
97
112
  </div>
98
113
  );
@@ -123,8 +138,10 @@ npx @modern-js/create@latest
123
138
  <EnableMicroFrontend />
124
139
 
125
140
  由于是自控式路由,我们删除掉 `routes` 文件夹并在 `src` 目录下增加 `App.tsx` 文件,此处如果使用的 `非 MApp` 组件,需要通过 `React Router v6` 的 `createBrowserRouter` API 来创建路由
141
+
126
142
  #### 加载子应用
127
- import CustomRouterMicroFrontend from "@site-docs/components/custom-router-micro-frontend";
143
+
144
+ import CustomRouterMicroFrontend from '@site-docs/components/custom-router-micro-frontend';
128
145
 
129
146
  <CustomRouterMicroFrontend />
130
147
 
@@ -139,7 +156,7 @@ npx @modern-js/create@latest
139
156
 
140
157
  按照如下选择,生成项目:
141
158
 
142
- <DefaultMWAGenerate/>
159
+ <DefaultMWAGenerate />
143
160
 
144
161
  我们执行 `pnpm run new` 来开启 `微前端` 功能:
145
162
 
@@ -156,7 +173,7 @@ import { garfishPlugin } from '@modern-js/plugin-garfish';
156
173
 
157
174
  export default defineConfig({
158
175
  dev: {
159
- port: 8081
176
+ port: 8081,
160
177
  },
161
178
  runtime: {
162
179
  router: true,
@@ -170,12 +187,13 @@ export default defineConfig({
170
187
  ```
171
188
 
172
189
  添加 `src/routes/page.tsx` 代码
190
+
173
191
  ```js title="src/routes/page.tsx"
174
192
  const Index = () => {
175
193
  return (
176
194
  <div className="container-box">subApp: 约定式路由的子应用的根路由</div>
177
- )
178
- }
195
+ );
196
+ };
179
197
 
180
198
  export default Index;
181
199
  ```
@@ -191,7 +209,7 @@ npx @modern-js/create@latest
191
209
 
192
210
  按照如下选择,生成项目:
193
211
 
194
- <DefaultMWAGenerate/>
212
+ <DefaultMWAGenerate />
195
213
 
196
214
  我们执行 `pnpm run new` 来开启 `微前端`:
197
215
 
@@ -208,7 +226,7 @@ import { garfishPlugin } from '@modern-js/plugin-garfish';
208
226
 
209
227
  export default defineConfig({
210
228
  dev: {
211
- port: 8082
229
+ port: 8082,
212
230
  },
213
231
  runtime: {
214
232
  router: true,
@@ -220,6 +238,7 @@ export default defineConfig({
220
238
  plugins: [appTools(), garfishPlugin()],
221
239
  });
222
240
  ```
241
+
223
242
  自控式路由需要删除掉 `routes` 文件夹并在 `src` 目录下新建 `App.tsx`
224
243
 
225
244
  并在 `src/App.tsx` 添加代码,注意需要从 `props` 中解析并传递 `basename` 给 `BrowserRouter`
@@ -227,7 +246,7 @@ export default defineConfig({
227
246
  ```js title="src/App.tsx"
228
247
  import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
229
248
 
230
- export default (props: {basename: string}) => {
249
+ export default (props: { basename: string }) => {
231
250
  const { basename } = props;
232
251
 
233
252
  return (
@@ -242,7 +261,9 @@ export default (props: {basename: string}) => {
242
261
  ```
243
262
 
244
263
  ## 调试
264
+
245
265
  按顺序在目录执行 `pnpm run dev` 命令启动应用:
266
+
246
267
  - masterApp 主应用 `http://localhost:8080`
247
268
  - table 子应用(约定式路由) `http://localhost:8081`
248
269
  - dashboard 子应用(自控式路由) `http://localhost:8082`
@@ -254,6 +275,7 @@ export default (props: {basename: string}) => {
254
275
  ## Modern.js 微前端和直接使用 Garfish 的区别
255
276
 
256
277
  使用纯 `Garfish` API 开发微前端应用时
278
+
257
279
  - 主应用:
258
280
  - 安装 Garfish 依赖并使用 `Garfish.run` 注册子应用 [参考](https://www.garfishjs.org/api/run)
259
281
  - 提供一个常驻的 `DOM` 节点供子应用挂载 [参考](https://www.garfishjs.org/api/registerApp#domgetter)
@@ -264,6 +286,7 @@ export default (props: {basename: string}) => {
264
286
  区别于直接使用 `Garfish` 运行时 API 开发微前端项目,`Modern.js` 的微前端方案更加开箱即用。
265
287
  使用 `pnpm new` 启用微前端模式后会自动在 `Modern.js` 应用中集成 `Garfish` 插件,在 `Garfish`
266
288
  插件的加持下,你只需要
289
+
267
290
  - 主应用:
268
291
  - 配置 `runtime.masterApp.apps` 参数注册子应用
269
292
  - 使用 `useModuleApps` API 获取子应用实例并在组件中完成渲染
@@ -271,10 +294,11 @@ export default (props: {basename: string}) => {
271
294
  - 配置 `deploy.microFrontend`
272
295
 
273
296
  所以插件中为你做了如下事情
274
- - 帮助你通过 `Garfish` 运行时 API 自动注册子应用(主应用)
275
- - `useModulesApps` 函数的返回值提供了一个常驻的 `DOM` 节点供子应用挂载(主应用)
276
- - 帮助你正确导出了 `provider`(子应用)
277
- - 帮助你正确设置了 `basename` 给 `Modern.js` 运行时提供 `Router` 实例,如果是`自控式路由`或`手动引入的 react-router-dom` 那么需要从 `App.tsx` 的 `props` 中获取 `basename` 手动传递给引入的 `Router 实例`(子应用)
297
+
298
+ - 帮助你通过 `Garfish` 运行时 API 自动注册子应用(主应用)
299
+ - `useModulesApps` 函数的返回值提供了一个常驻的 `DOM` 节点供子应用挂载(主应用)
300
+ - 帮助你正确导出了 `provider`(子应用)
301
+ - 帮助你正确设置了 `basename` 给 `Modern.js` 运行时提供 `Router` 实例,如果是`自控式路由`或`手动引入的 react-router-dom` 那么需要从 `App.tsx` 的 `props` 中获取 `basename` 手动传递给引入的 `Router 实例`(子应用)
278
302
 
279
303
  ## 常见问题
280
304
 
@@ -2,13 +2,14 @@
2
2
  sidebar_position: 3
3
3
  title: 开发主应用
4
4
  ---
5
+
5
6
  # 开发主应用
6
7
 
7
8
  在上一章 [体验微前端](/guides/topic-detail/micro-frontend/c02-development) 通过一个示例演示了如何创建和配置微前端子应用,通过本章你可以进一步了解如何开发主应用,以及它的常见配置。
8
9
 
9
- 在通过 `@modern-js/create` 命令创建应用工程后,可以在项目中执行 `pnpm run new`(实际执行了 `modern new` 命令),在选择了「微前端」模式后,会安装微前端依赖依赖,只需手动注册插件即可。
10
+ 在通过 `@modern-js/create` 命令创建 Modern.js 工程后,可以在项目中执行 `pnpm run new`(实际执行了 `modern new` 命令),在选择了「微前端」模式后,会安装微前端依赖依赖,只需手动注册插件即可。
10
11
 
11
- import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
12
+ import EnableMicroFrontend from '@site-docs/components/enable-micro-frontend';
12
13
 
13
14
  <EnableMicroFrontend />
14
15
 
@@ -26,7 +27,7 @@ import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
26
27
 
27
28
  :::
28
29
 
29
- import MicroRuntimeConfig from "@site-docs/components/micro-runtime-config";
30
+ import MicroRuntimeConfig from '@site-docs/components/micro-runtime-config';
30
31
 
31
32
  <MicroRuntimeConfig />
32
33
 
@@ -40,15 +41,18 @@ defineConfig(App, {
40
41
  manifest: {
41
42
  getAppList: async () => {
42
43
  // 可以从其他远程接口获取
43
- return [{
44
- name: 'Table',
45
- entry: 'http://localhost:8001',
46
- // activeWhen: '/table'
47
- }, {
48
- name: 'Dashboard',
49
- entry: 'http://localhost:8002'
50
- // activeWhen: '/dashboard'
51
- }];
44
+ return [
45
+ {
46
+ name: 'Table',
47
+ entry: 'http://localhost:8001',
48
+ // activeWhen: '/table'
49
+ },
50
+ {
51
+ name: 'Dashboard',
52
+ entry: 'http://localhost:8002',
53
+ // activeWhen: '/dashboard'
54
+ },
55
+ ];
52
56
  },
53
57
  },
54
58
  },
@@ -77,16 +81,30 @@ defineConfig(App, {
77
81
  ```js title="App.tsx"
78
82
  import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
79
83
 
80
- import { RouterProvider, Route, createBrowserRouter, createRoutesFromElements, BrowserRouter, Link, Outlet } from '@modern-js/runtime/router';
84
+ import {
85
+ RouterProvider,
86
+ Route,
87
+ createBrowserRouter,
88
+ createRoutesFromElements,
89
+ BrowserRouter,
90
+ Link,
91
+ Outlet,
92
+ } from '@modern-js/runtime/router';
81
93
 
82
94
  const AppLayout = () => (
83
95
  <>
84
- <div><Link to={'/table'}>加载约定式路由子应用</Link></div>
85
- <div><Link to={'/dashboard'}>加载自控式路由子应用</Link></div>
86
- <div><Link to={'/'}>卸载子应用</Link></div>
96
+ <div>
97
+ <Link to={'/table'}>加载约定式路由子应用</Link>
98
+ </div>
99
+ <div>
100
+ <Link to={'/dashboard'}>加载自控式路由子应用</Link>
101
+ </div>
102
+ <div>
103
+ <Link to={'/'}>卸载子应用</Link>
104
+ </div>
87
105
  <Outlet />
88
106
  </>
89
- )
107
+ );
90
108
 
91
109
  export default () => {
92
110
  const { apps, MApp } = useModuleApps();
@@ -103,25 +121,25 @@ export default () => {
103
121
  key={app.name}
104
122
  path={`${app.name.toLowerCase()}/*`}
105
123
  element={
106
- <Component
107
- loadable={{
108
- loading: ({ pastDelay, error }: any) => {
109
- if (error) {
110
- return <div>error: {error?.message}</div>;
111
- } else if (pastDelay) {
112
- return <div>loading</div>;
113
- } else {
114
- return null;
115
- }
116
- },
117
- }}
118
- />
124
+ <Component
125
+ loadable={{
126
+ loading: ({ pastDelay, error }: any) => {
127
+ if (error) {
128
+ return <div>error: {error?.message}</div>;
129
+ } else if (pastDelay) {
130
+ return <div>loading</div>;
131
+ } else {
132
+ return null;
133
+ }
134
+ },
135
+ }}
136
+ />
119
137
  }
120
138
  />
121
- )
139
+ );
122
140
  })}
123
- </Route>
124
- )
141
+ </Route>,
142
+ ),
125
143
  );
126
144
 
127
145
  return (
@@ -2,6 +2,7 @@
2
2
  sidebar_position: 4
3
3
  title: 主子应用通信
4
4
  ---
5
+
5
6
  # 主子应用通信
6
7
 
7
8
  ## props 通信
@@ -2,6 +2,7 @@
2
2
  sidebar_position: 5
3
3
  title: 混合技术栈
4
4
  ---
5
+
5
6
  # 混合技术栈
6
7
 
7
8
  Modern.js 微前端方案是基于 [Garfish](https://garfishjs.org/) 封装的,提供了一些更开箱即用的使用方式。
@@ -1,6 +1,7 @@
1
1
  ---
2
2
  title: 编写 UI 组件
3
3
  ---
4
+
4
5
  # 编写 UI 组件
5
6
 
6
7
  上一章节中,我们学习了如何初始化项目,并使用配置修改 Modern.js 的默认行为。
@@ -9,9 +10,9 @@ title: 编写 UI 组件
9
10
 
10
11
  为了做更好的 UI 展示和交互,我们引入组件库 [Antd](https://ant.design/index-cn) 来开发,使用 `<List>` 组件来代替原始的列表。先添加依赖:
11
12
 
12
- ```bash
13
- pnpm add antd
14
- ```
13
+ import { PackageManagerTabs } from '@theme';
14
+
15
+ <PackageManagerTabs command="add antd" />
15
16
 
16
17
  修改 `src/routes/page.tsx`,在顶部导入组件:
17
18