@modern-js/main-doc 2.65.3 → 2.65.5
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.
- package/docs/en/apis/app/commands.mdx +1 -0
- package/docs/en/apis/app/hooks/config/_meta.json +1 -0
- package/docs/en/apis/app/hooks/config/favicon.mdx +29 -0
- package/docs/en/apis/app/hooks/config/icon.mdx +3 -30
- package/docs/en/guides/basic-features/html.mdx +5 -1
- package/docs/en/guides/basic-features/routes.mdx +8 -4
- package/docs/en/guides/topic-detail/module-federation/application.mdx +5 -2
- package/docs/en/guides/topic-detail/module-federation/usage.mdx +47 -3
- package/docs/zh/apis/app/commands.mdx +1 -0
- package/docs/zh/apis/app/hooks/config/_meta.json +1 -0
- package/docs/zh/apis/app/hooks/config/favicon.mdx +29 -0
- package/docs/zh/apis/app/hooks/config/icon.mdx +3 -30
- package/docs/zh/guides/basic-features/html.mdx +5 -1
- package/docs/zh/guides/basic-features/routes.mdx +8 -4
- package/docs/zh/guides/topic-detail/module-federation/application.mdx +5 -2
- package/docs/zh/guides/topic-detail/module-federation/usage.mdx +46 -4
- package/package.json +3 -4
@@ -78,6 +78,7 @@ Usage: modern build [options]
|
|
78
78
|
Options:
|
79
79
|
-c --config <config> specify the configuration file, which can be a relative or absolute path
|
80
80
|
-h, --help show command help
|
81
|
+
-w --watch turn on watch mode, watch for changes and rebuild
|
81
82
|
--analyze analyze the bundle and view size of each module
|
82
83
|
```
|
83
84
|
|
@@ -0,0 +1 @@
|
|
1
|
+
["html", "favicon", "icon", "mock", "public", "upload"]
|
@@ -0,0 +1,29 @@
|
|
1
|
+
---
|
2
|
+
title: favicon.*
|
3
|
+
sidebar_position: 3
|
4
|
+
---
|
5
|
+
|
6
|
+
# Favicon
|
7
|
+
|
8
|
+
When there is a `favicon.*` file in the `config` directory at the root of the project, Modern.js will automatically set the file to the [html.favicon](/configure/app/html/favicon) configuration option for generating the favicon icon on the page:
|
9
|
+
|
10
|
+
```
|
11
|
+
./config
|
12
|
+
└── favicon.ico
|
13
|
+
```
|
14
|
+
|
15
|
+
After the build is completed, you can see the following tags automatically generated in HTML:
|
16
|
+
|
17
|
+
```html
|
18
|
+
<link rel="icon" href="/favicon.ico" />
|
19
|
+
```
|
20
|
+
|
21
|
+
## Order
|
22
|
+
|
23
|
+
When setting up the favicon, Modern.js looks for files in the following order:
|
24
|
+
|
25
|
+
- `favicon.png`
|
26
|
+
- `favicon.jpg`
|
27
|
+
- `favicon.jpeg`
|
28
|
+
- `favicon.svg`
|
29
|
+
- `favicon.ico`
|
@@ -1,36 +1,9 @@
|
|
1
1
|
---
|
2
|
-
title: icon
|
2
|
+
title: icon.*
|
3
3
|
sidebar_position: 2
|
4
4
|
---
|
5
5
|
|
6
|
-
#
|
7
|
-
|
8
|
-
## Favicon
|
9
|
-
|
10
|
-
When there is a `favicon.*` file in the `config` directory at the root of the project, Modern.js will automatically set the file to the [html.favicon](/configure/app/html/favicon) configuration option for generating the favicon icon on the page:
|
11
|
-
|
12
|
-
```
|
13
|
-
./config
|
14
|
-
└── favicon.ico
|
15
|
-
```
|
16
|
-
|
17
|
-
After the build is completed, you can see the following tags automatically generated in HTML:
|
18
|
-
|
19
|
-
```html
|
20
|
-
<link rel="icon" href="/favicon.ico" />
|
21
|
-
```
|
22
|
-
|
23
|
-
### Order
|
24
|
-
|
25
|
-
When setting up the favicon, Modern.js looks for files in the following order:
|
26
|
-
|
27
|
-
- `favicon.png`
|
28
|
-
- `favicon.jpg`
|
29
|
-
- `favicon.jpeg`
|
30
|
-
- `favicon.svg`
|
31
|
-
- `favicon.ico`
|
32
|
-
|
33
|
-
## Apple Touch Icon
|
6
|
+
# Apple Touch Icon
|
34
7
|
|
35
8
|
When there is an `icon.*` file in the `config` directory at the root of the project, Modern.js will automatically set the file to the [html.appIcon](/configure/app/html/app-icon) configuration option for generating the Apple Touch Icon icon under the iOS system.
|
36
9
|
|
@@ -45,7 +18,7 @@ After the build is completed, you can see the following tags automatically gener
|
|
45
18
|
<link rel="apple-touch-icon" sizes="180x180" href="/static/image/icon.png" />
|
46
19
|
```
|
47
20
|
|
48
|
-
|
21
|
+
## Order
|
49
22
|
|
50
23
|
When setting up the app icon, Modern.js looks for files in the following order:
|
51
24
|
|
@@ -24,10 +24,14 @@ For example, consider the following directory structure:
|
|
24
24
|
└── modern-app-env.d.ts
|
25
25
|
```
|
26
26
|
|
27
|
-
`entry-a` will use the `
|
27
|
+
`entry-a` will use the `Document.[jt]sx` file under the current entry as the template. If there is no `Document.[jt]sx` file under the current entry, like `entry-b`, it will look for the `Document.[jt]sx` file under the root directory.
|
28
28
|
|
29
29
|
If not found, default template will be used.
|
30
30
|
|
31
|
+
:::tip
|
32
|
+
The `Document.[jt]sx` module will be compiled by esbuild and rendered to a string as the HTML template content, similar to [Static Site Generation](/guides/basic-features/render/ssg.html). The HTML template module will not be compiled by the Bundler. The React Hooks in the component also will not be executed at browser runtime, and JavaScript resources such as images cannot be resolved and imported.
|
33
|
+
:::
|
34
|
+
|
31
35
|
### HTML Components
|
32
36
|
|
33
37
|
Modern.js provides some components for rendering pages to help developers generate templates. These components can be used from `@modern-js/runtime/document`:
|
@@ -530,7 +530,11 @@ This feature is very useful when applications require pre-rendered data, custom
|
|
530
530
|
```ts title="src/routes/layout.tsx"
|
531
531
|
import { RuntimeContext } from '@modern-js/runtime';
|
532
532
|
|
533
|
-
|
533
|
+
type InitialData = {
|
534
|
+
message: string;
|
535
|
+
}
|
536
|
+
|
537
|
+
export const init = (context: RuntimeContext): InitialData => {
|
534
538
|
return {
|
535
539
|
message: 'Hello World',
|
536
540
|
};
|
@@ -542,7 +546,7 @@ import { useRuntimeContext } from '@modern-js/runtime;
|
|
542
546
|
|
543
547
|
export default () => {
|
544
548
|
const context = useRuntimeContext();
|
545
|
-
const { message } = context.initialData;
|
549
|
+
const { message } = context.initialData as InitialData;
|
546
550
|
|
547
551
|
return <div>{message}</div>;
|
548
552
|
};
|
@@ -551,9 +555,9 @@ export default () => {
|
|
551
555
|
With SSR, the browser can obtain the data returned by `init` during SSR. Developers can decide whether to re-fetch the data on the browser side to override the SSR data. For example:
|
552
556
|
|
553
557
|
```tsx title="src/routes/layout.tsx"
|
554
|
-
import { RuntimeContext } from '@modern-js/runtime;
|
558
|
+
import type { RuntimeContext } from '@modern-js/runtime;
|
555
559
|
|
556
|
-
export const init = (
|
560
|
+
export const init = (runtimeContext: RuntimeContext) => {
|
557
561
|
if (process.env.MODERN_TARGET === 'node') {
|
558
562
|
return {
|
559
563
|
message: 'Hello World By Server',
|
@@ -46,7 +46,10 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
|
|
46
46
|
|
47
47
|
export default createModuleFederationConfig({
|
48
48
|
name: 'remote',
|
49
|
-
|
49
|
+
manifest: {
|
50
|
+
filePath:'static',
|
51
|
+
},
|
52
|
+
filename: 'static/remoteEntry.js',
|
50
53
|
exposes: {
|
51
54
|
'./app': './src/export-App.tsx',
|
52
55
|
},
|
@@ -109,4 +112,4 @@ You can refer to the example here: [Modern.js & Module Federation Application-Le
|
|
109
112
|
|
110
113
|
## Related Documentation
|
111
114
|
|
112
|
-
- [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)
|
115
|
+
- [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)
|
@@ -54,7 +54,10 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
|
|
54
54
|
|
55
55
|
export default createModuleFederationConfig({
|
56
56
|
name: 'remote',
|
57
|
-
|
57
|
+
manifest: {
|
58
|
+
filePath: 'static',
|
59
|
+
},
|
60
|
+
filename: 'static/remoteEntry.js',
|
58
61
|
exposes: {
|
59
62
|
'./Button': './src/components/Button.tsx',
|
60
63
|
},
|
@@ -65,6 +68,10 @@ export default createModuleFederationConfig({
|
|
65
68
|
});
|
66
69
|
```
|
67
70
|
|
71
|
+
:::tip
|
72
|
+
In the above code block, we have prefixed both the manifest and remoteEntry.js exported by Module Federation with `static`. This is because Modern.js requires all resources that need to be exposed to be placed in the `static/` directory, and Modern.js's server will only host the `static/` directory in production environments.
|
73
|
+
:::
|
74
|
+
|
68
75
|
Additionally, modify `modern.config.ts` to provide a development environment port for the producer, allowing the consumer to access the producer's resources through this port:
|
69
76
|
|
70
77
|
```ts title="modern.config.ts"
|
@@ -99,7 +106,7 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
|
|
99
106
|
export default createModuleFederationConfig({
|
100
107
|
name: 'host',
|
101
108
|
remotes: {
|
102
|
-
remote: 'remote@http://localhost:3051/mf-manifest.json',
|
109
|
+
remote: 'remote@http://localhost:3051/static/mf-manifest.json',
|
103
110
|
},
|
104
111
|
shared: {
|
105
112
|
react: { singleton: true },
|
@@ -173,8 +180,45 @@ After modifying the producer's code, the consumer will automatically fetch the p
|
|
173
180
|
|
174
181
|
Access `http://localhost:8080/remote`, and you will see that the page includes the `Button` component from the producer's remote module.
|
175
182
|
|
183
|
+
We can also execute `modern serve` locally to simulate the production environment.
|
184
|
+
|
185
|
+
Because the Module Federation plugin will automatically read Modern.js's `output.assetPrefix` configuration as the access address for remote modules, and this value defaults to `/` after building in the production environment.
|
186
|
+
|
187
|
+
If we want to simulate the production environment in local, but not configure `output.assetPrefix`, consumers will pull the entry file of the remote module from their own domain. So We can add the following configuration:
|
188
|
+
|
189
|
+
```ts
|
190
|
+
import { appTools, defineConfig } from '@modern-js/app-tools';
|
191
|
+
import { moduleFederationPlugin } from '@module-federation/modern-js';
|
192
|
+
|
193
|
+
const isLocal = process.env.IS_LOCAL === 'true';
|
194
|
+
|
195
|
+
// https://modernjs.dev/en/configure/app/usage
|
196
|
+
export default defineConfig({
|
197
|
+
server: {
|
198
|
+
port: 3051,
|
199
|
+
},
|
200
|
+
runtime: {
|
201
|
+
router: true,
|
202
|
+
},
|
203
|
+
output: {
|
204
|
+
// Now this configuration is only used in the local when you run modern serve command.
|
205
|
+
// If you want to deploy the application to the platform, use your own domain name.
|
206
|
+
// Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
|
207
|
+
assetPrefix: isLocal ? 'http://127.0.0.1:3051' : '/',
|
208
|
+
},
|
209
|
+
plugins: [
|
210
|
+
appTools({
|
211
|
+
bundler: 'rspack', // Set to 'webpack' to enable webpack
|
212
|
+
}),
|
213
|
+
moduleFederationPlugin(),
|
214
|
+
],
|
215
|
+
});
|
216
|
+
```
|
217
|
+
|
218
|
+
Now, in the producer, run `IS_LOCAL=true modern build && modern serve`, and in the consumer, run `modern build && modern serve` to simulate the production environment locally and access the remote modules.
|
219
|
+
|
176
220
|
You can refer to this example: [Modern.js & Module Federation Basic Example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base).
|
177
221
|
|
178
222
|
## Related Documentation
|
179
223
|
|
180
|
-
- [Module Federation Official Documentation](https://module-federation.io/zh/guide/framework/modernjs.html)
|
224
|
+
- [Module Federation Official Documentation](https://module-federation.io/zh/guide/framework/modernjs.html)
|
@@ -0,0 +1 @@
|
|
1
|
+
["html", "favicon", "icon", "mock", "public", "upload"]
|
@@ -0,0 +1,29 @@
|
|
1
|
+
---
|
2
|
+
title: favicon.*
|
3
|
+
sidebar_position: 3
|
4
|
+
---
|
5
|
+
|
6
|
+
# Favicon
|
7
|
+
|
8
|
+
当项目根目录的 `config` 目录下存在 `favicon.*` 文件时,Modern.js 会自动将该文件设置到 [html.favicon](/configure/app/html/favicon) 配置项中,用于生成页面的 favicon 图标:
|
9
|
+
|
10
|
+
```
|
11
|
+
./config
|
12
|
+
└── favicon.ico
|
13
|
+
```
|
14
|
+
|
15
|
+
构建完成后,可以看到 HTML 中自动生成了以下标签:
|
16
|
+
|
17
|
+
```html
|
18
|
+
<link rel="icon" href="/favicon.ico" />
|
19
|
+
```
|
20
|
+
|
21
|
+
## 查找顺序
|
22
|
+
|
23
|
+
在设置 app icon 时,Modern.js 会按以下顺序寻找文件:
|
24
|
+
|
25
|
+
- `favicon.png`
|
26
|
+
- `favicon.jpg`
|
27
|
+
- `favicon.jpeg`
|
28
|
+
- `favicon.svg`
|
29
|
+
- `favicon.ico`
|
@@ -1,36 +1,9 @@
|
|
1
1
|
---
|
2
|
-
title: icon
|
2
|
+
title: icon.*
|
3
3
|
sidebar_position: 2
|
4
4
|
---
|
5
5
|
|
6
|
-
#
|
7
|
-
|
8
|
-
## Favicon
|
9
|
-
|
10
|
-
当项目根目录的 `config` 目录下存在 `favicon.*` 文件时,Modern.js 会自动将该文件设置到 [html.favicon](/configure/app/html/favicon) 配置项中,用于生成页面的 favicon 图标:
|
11
|
-
|
12
|
-
```
|
13
|
-
./config
|
14
|
-
└── favicon.ico
|
15
|
-
```
|
16
|
-
|
17
|
-
构建完成后,可以看到 HTML 中自动生成了以下标签:
|
18
|
-
|
19
|
-
```html
|
20
|
-
<link rel="icon" href="/favicon.ico" />
|
21
|
-
```
|
22
|
-
|
23
|
-
### 查找顺序
|
24
|
-
|
25
|
-
在设置 app icon 时,Modern.js 会按以下顺序寻找文件:
|
26
|
-
|
27
|
-
- `favicon.png`
|
28
|
-
- `favicon.jpg`
|
29
|
-
- `favicon.jpeg`
|
30
|
-
- `favicon.svg`
|
31
|
-
- `favicon.ico`
|
32
|
-
|
33
|
-
## Apple Touch Icon
|
6
|
+
# Apple Touch Icon
|
34
7
|
|
35
8
|
当项目根目录的 `config` 目录下存在 `icon.*` 文件时,Modern.js 会自动将该文件设置到 [html.appIcon](/configure/app/html/app-icon) 配置项中,用于生成 iOS 系统下的 Apple Touch Icon 图标。
|
36
9
|
|
@@ -45,7 +18,7 @@ sidebar_position: 2
|
|
45
18
|
<link rel="apple-touch-icon" sizes="180x180" href="/static/image/icon.png" />
|
46
19
|
```
|
47
20
|
|
48
|
-
|
21
|
+
## 查找顺序
|
49
22
|
|
50
23
|
在设置 app icon 时,Modern.js 会按以下顺序寻找文件:
|
51
24
|
|
@@ -25,10 +25,14 @@ Modern.js 约定,在 `src/` 或入口目录下,可以创建 `Document.[jt]sx
|
|
25
25
|
└── modern-app-env.d.ts
|
26
26
|
```
|
27
27
|
|
28
|
-
`entry-a` 会优先使用当前入口下的 `
|
28
|
+
`entry-a` 会优先使用当前入口下的 `Document.[jt]sx` 文件。如果当前入口没有 `Document.[jt]sx` 文件,例如 `entry-b`,则会查找根目录下的 `Document.[jt]sx` 文件。
|
29
29
|
|
30
30
|
如果未找到,将会使用 Modern.js 的默认模板。
|
31
31
|
|
32
|
+
:::tip
|
33
|
+
`Document.[jt]sx` 模块将会被使用 esbuild 编译为 Node.js 产物、并在编译时以 `renderToStaticMarkup` 渲染为字符串以作为 HTML 模板的内容,其行为类似[静态站点生成](/guides/basic-features/render/ssg.html)。HTML 模板模块不会经过 Bundler 编译打包,因此组件中的 React Hooks 不会在浏览器运行时被执行,也不支持导入 JavaScript 以外的图片等资源模块。
|
34
|
+
:::
|
35
|
+
|
32
36
|
### HTML 组件
|
33
37
|
|
34
38
|
Modern.js 提供了一些列渲染页面的组件,用来帮助开发者生成模板,可以从 `@modern-js/runtime/document` 中使用这些组件:
|
@@ -533,7 +533,11 @@ export const init = (context: RuntimeContext) => {
|
|
533
533
|
```ts title="src/routes/layout.tsx"
|
534
534
|
import { RuntimeContext } from '@modern-js/runtime';
|
535
535
|
|
536
|
-
|
536
|
+
type InitialData = {
|
537
|
+
message: string;
|
538
|
+
}
|
539
|
+
|
540
|
+
export const init = (context: RuntimeContext): InitialData => {
|
537
541
|
return {
|
538
542
|
message: 'Hello World',
|
539
543
|
};
|
@@ -545,7 +549,7 @@ import { useRuntimeContext } from '@modern-js/runtime';
|
|
545
549
|
|
546
550
|
export default () => {
|
547
551
|
const context = useRuntimeContext();
|
548
|
-
const { message } = context.initialData;
|
552
|
+
const { message } = context.initialData as InitialData;
|
549
553
|
|
550
554
|
return <div>{message}</div>;
|
551
555
|
};
|
@@ -554,9 +558,9 @@ export default () => {
|
|
554
558
|
配合 SSR 功能时,浏览器端可以获取到 SSR 时 `init` 返回的数据,开发者可以自行判断是否要在浏览器端重新获取数据来覆盖 SSR 数据,例如:
|
555
559
|
|
556
560
|
```tsx title="src/routes/layout.tsx"
|
557
|
-
import { RuntimeContext } from '@modern-js/runtime';
|
561
|
+
import type { RuntimeContext } from '@modern-js/runtime';
|
558
562
|
|
559
|
-
export const init = (
|
563
|
+
export const init = (runtimeContext: RuntimeContext) => {
|
560
564
|
if (process.env.MODERN_TARGET === 'node') {
|
561
565
|
return {
|
562
566
|
message: 'Hello World By Server',
|
@@ -46,7 +46,10 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
|
|
46
46
|
|
47
47
|
export default createModuleFederationConfig({
|
48
48
|
name: 'remote',
|
49
|
-
|
49
|
+
manifest: {
|
50
|
+
filePath:'static',
|
51
|
+
},
|
52
|
+
filename: 'static/remoteEntry.js',
|
50
53
|
exposes: {
|
51
54
|
'./app': './src/export-App.tsx',
|
52
55
|
},
|
@@ -109,4 +112,4 @@ export default RemoteApp;
|
|
109
112
|
|
110
113
|
## 相关文档
|
111
114
|
|
112
|
-
- [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)
|
115
|
+
- [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)
|
@@ -55,7 +55,10 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
|
|
55
55
|
|
56
56
|
export default createModuleFederationConfig({
|
57
57
|
name: 'remote',
|
58
|
-
|
58
|
+
manifest: {
|
59
|
+
filePath: 'static',
|
60
|
+
},
|
61
|
+
filename: 'static/remoteEntry.js',
|
59
62
|
exposes: {
|
60
63
|
'./Button': './src/components/Button.tsx',
|
61
64
|
},
|
@@ -66,6 +69,10 @@ export default createModuleFederationConfig({
|
|
66
69
|
});
|
67
70
|
```
|
68
71
|
|
72
|
+
:::tip
|
73
|
+
在上述代码块中,我们为 Module Federation 导出的 manifest 和 remoteEntry.js 都设置了 `static` 前缀,这是因为 Modern.js 要求将所有需要暴露的资源都放在 `static/` 目录下,Modern.js 的服务器在生产环境时也只会托管 `static/` 目录。
|
74
|
+
:::
|
75
|
+
|
69
76
|
另外,我们还需要修改 `modern.config.ts`,为生产者提供一个开发环境的端口,让消费者可以通过此端口访问生产者的资源:
|
70
77
|
|
71
78
|
```ts title="modern.config.ts"
|
@@ -100,7 +107,7 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
|
|
100
107
|
export default createModuleFederationConfig({
|
101
108
|
name: 'host',
|
102
109
|
remotes: {
|
103
|
-
remote: 'remote@http://localhost:3051/mf-manifest.json',
|
110
|
+
remote: 'remote@http://localhost:3051/static/mf-manifest.json',
|
104
111
|
},
|
105
112
|
shared: {
|
106
113
|
react: { singleton: true },
|
@@ -142,7 +149,7 @@ export default Index;
|
|
142
149
|
}
|
143
150
|
}
|
144
151
|
}
|
145
|
-
```
|
152
|
+
```
|
146
153
|
|
147
154
|
:::tip
|
148
155
|
在消费者中,我们通过 `remote/Button` 来引用远程模块。这里简单介绍下这个路径具体代表了什么,可以先将它抽象成 `[remoteAlias]/[remoteExpose]`。
|
@@ -174,8 +181,43 @@ export default Index;
|
|
174
181
|
|
175
182
|
访问 `http://localhost:8080/remote`,可以看到页面中已经包含了生产者的远程模块 `Button` 组件。
|
176
183
|
|
184
|
+
我们也可以在本地执行 `modern serve` 来模拟生产环境。
|
185
|
+
|
186
|
+
因为 Module Federation 插件会自动读取 Modern.js 的 `output.assetPrefix` 配置作为远程模块的访问地址,而该值在生产环境下构建后默认是 `/`。如果不做特殊处理,消费者将从自己的域名下拉取远程模块的入口文件。我们可以添加如下配置:
|
187
|
+
|
188
|
+
```ts
|
189
|
+
import { appTools, defineConfig } from '@modern-js/app-tools';
|
190
|
+
import { moduleFederationPlugin } from '@module-federation/modern-js';
|
191
|
+
|
192
|
+
const isLocal = process.env.IS_LOCAL === 'true';
|
193
|
+
|
194
|
+
// https://modernjs.dev/en/configure/app/usage
|
195
|
+
export default defineConfig({
|
196
|
+
server: {
|
197
|
+
port: 3051,
|
198
|
+
},
|
199
|
+
runtime: {
|
200
|
+
router: true,
|
201
|
+
},
|
202
|
+
output: {
|
203
|
+
// Now this configuration is only used in the local when you run modern serve command.
|
204
|
+
// If you want to deploy the application to the platform, use your own domain name.
|
205
|
+
// Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
|
206
|
+
assetPrefix: isLocal ? 'http://127.0.0.1:3051' : '/',
|
207
|
+
},
|
208
|
+
plugins: [
|
209
|
+
appTools({
|
210
|
+
bundler: 'rspack', // Set to 'webpack' to enable webpack
|
211
|
+
}),
|
212
|
+
moduleFederationPlugin(),
|
213
|
+
],
|
214
|
+
});
|
215
|
+
```
|
216
|
+
|
217
|
+
现在,在生产者中运行 `IS_LOCAL=true modern build && modern serve`,在消费者中运行 `modern build && modern serve`,即可在本地模拟生产环境,访问到远程模块。
|
218
|
+
|
177
219
|
上述用例可以参考:[Modern.js & Module Federation 基础用法示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base)。
|
178
220
|
|
179
221
|
## 相关文档
|
180
222
|
|
181
|
-
- [Module Federation 官方文档](https://module-federation.io/zh/guide/framework/modernjs.html)
|
223
|
+
- [Module Federation 官方文档](https://module-federation.io/zh/guide/framework/modernjs.html)
|
package/package.json
CHANGED
@@ -15,14 +15,13 @@
|
|
15
15
|
"modern",
|
16
16
|
"modern.js"
|
17
17
|
],
|
18
|
-
"version": "2.65.
|
18
|
+
"version": "2.65.5",
|
19
19
|
"publishConfig": {
|
20
20
|
"registry": "https://registry.npmjs.org/",
|
21
|
-
"access": "public"
|
22
|
-
"provenance": true
|
21
|
+
"access": "public"
|
23
22
|
},
|
24
23
|
"dependencies": {
|
25
|
-
"@modern-js/sandpack-react": "2.65.
|
24
|
+
"@modern-js/sandpack-react": "2.65.5"
|
26
25
|
},
|
27
26
|
"devDependencies": {
|
28
27
|
"@rspress/shared": "1.42.0",
|