File tree Expand file tree Collapse file tree 5 files changed +19
-9
lines changed Expand file tree Collapse file tree 5 files changed +19
-9
lines changed Original file line number Diff line number Diff line change @@ -62,13 +62,13 @@ loadRemote("app2/util").then((md)=>{
62
62
### 解绑 Webpack,支持跨工具共享模块
63
63
64
64
65
- 新版 Module Federation 插件采用了全新的 Runtime 架构。这一变化使得构建工具不再需要与 Runtime 强绑定。开发者有望在项目中自由地引入由不同构建工具的产物,并灵活地组装它们进行运行 。
65
+ 新版 Module Federation 插件采用了全新的 Runtime 架构。这一变化使得构建工具不再需要与 Runtime 强绑定。开发者可在项目中自由地引入由不同构建工具的产物,并灵活地组装它们运行 。
66
66
67
67
目前,已经有多个构建工具与之兼容,包括 Webpack、Rspack 。其他构建工具也可以依据这一标准实现 Module Federation,这将保持运行时的一致性和标准化。
68
68
69
69
### 类型提示
70
70
71
- Module Federation 插件的新版本引入了一项突破性的功能——动态模块类型提示!这一功能有效地解决了将本地模块转换为动态远程模块时,在 TypeScript 项目中遇到的类型丢失问题。现在,使用该插件不仅可以自动生成和使用远程类型,而且当所有项目都在本地运行时,还能实现类似于 npm link 的类型实时更新体验。
71
+ Module Federation 插件的新版本引入了一项突破性的功能——动态模块类型提示!这一功能有效地解决了将本地模块转换为动态远程模块时,在 TypeScript 项目中遇到的类型丢失问题。现在,使用该插件不仅可以自动生成和使用远程类型,而且当所有项目都在本地运行时,还能实现媲美 npm link 的类型实时更新体验。
72
72
73
73
![ ] ( https://module-federation-assest.netlify.app/document/announcement/blog/announcement/demo-type-hint.gif )
74
74
Original file line number Diff line number Diff line change 16
16
17
17
| 功能 | 描述 |
18
18
| ------------------------------ | ---------------------------------------------- |
19
+ | [ Modern.js] ( ../framework/modernjs ) | 基于 modern.js 提供了 Module federation SSR 能力 |
19
20
| [ Next.js] ( ../framework/nextjs ) | 基于 Next.js 提供了 Module federation SSR 能力 |
Original file line number Diff line number Diff line change 6
6
7
7
这使得可以创建微前端风格的应用程序,多个系统可以共享代码,并在不需要重新构建整个应用程序的情况下进行动态更新。
8
8
9
+
9
10
## 生产者
10
11
11
12
通过 Module federation 构建插件设置了 ` exposes ` 暴露其他模块给其他 JavaScript 应用消费的应用在 Module federation 中称之为 Provider(生产者),生产者可以同时作为一个消费者。
20
21
21
22
它主要解决了两个问题:
22
23
23
- 随着项目迭代应用越来越庞大,难以维护。
24
- 跨团队或跨部门协作开发项目导致效率低下的问题。
24
+ - 随着项目迭代应用越来越庞大,难以维护。
25
+
26
+ - 跨团队或跨部门协作开发项目导致效率低下的问题。
25
27
26
28
## Bundler
27
29
Original file line number Diff line number Diff line change @@ -11,7 +11,14 @@ Module Federation 是一种 JavaScript 应用分治的架构模式(类似于
11
11
12
12
### ✨ 什么是 Module Federation 2.0?
13
13
14
- ` Module Federation 2.0 ` 不同于 ` Webpack5 ` 内置的 ` Module Federation ` 它提供了除 ` Module Federation ` 有的:模块导出、模块加载、依赖共享,还提供了额外的动态类型提示、` Manifest ` 、` Federation Runtime ` 、` Runtime Plugin System ` ,这些功能能让 ` Module Federation ` 更适合作为大型 ` Web ` 应用的微前端架构。
14
+ 与 Webpack 5 内置的 Module Federation 相比,Module Federation 2.0 除了支出原有的模块导出、模块加载和依赖共享等核心功能,还新增了:
15
+ - 动态类型提示
16
+ - ` Manifest `
17
+ - ` Federation Runtime `
18
+ - ` Runtime Plugin System `
19
+ - ` Chrome Devtool `
20
+
21
+ 等特性。这些增强功能使得 Module Federation 2.0 更加适合作为构建和管理大型 Web 应用的微前端架构标准。
15
22
16
23
### 🔥 特性
17
24
Original file line number Diff line number Diff line change @@ -110,7 +110,7 @@ export default pluginFooBar;
110
110
111
111
` SyncWaterfallHook `
112
112
113
- 在远程容器的初始化过程之前更新联合主机配置 。
113
+ 在远程容器的初始化过程之前更新 Federation 实例配置 。
114
114
115
115
- 类型
116
116
@@ -201,7 +201,7 @@ type AfterResolveOptions = {
201
201
202
202
` AsyncHook `
203
203
204
- 联合模块加载完毕时触发 ,允许访问和修改已加载文件的导出内容。
204
+ 远程模块加载完毕时触发 ,允许访问和修改已加载文件的导出内容。
205
205
206
206
- 类型
207
207
@@ -240,7 +240,7 @@ interface RemoteInfo {
240
240
241
241
` SyncHook `
242
242
243
- 处理联合模块预加载逻辑 。
243
+ 处理远程模块预加载逻辑 。
244
244
245
245
- 类型
246
246
@@ -259,7 +259,7 @@ type HandlePreloadModuleOptions = {
259
259
260
260
` AsyncHook `
261
261
262
- 当联合模块加载失败时 ,此钩子将被触发,允许自定义错误处理策略。
262
+ 当远程模块加载失败时 ,此钩子将被触发,允许自定义错误处理策略。
263
263
264
264
它被设计为在模块加载的各个生命周期阶段失败时触发。
265
265
You can’t perform that action at this time.
0 commit comments