模块联邦基础
了解模块联邦如何实现微前端共享
模块联邦基础 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
什么是模块联邦
模块联邦允许 JavaScript 应用在运行时加载并执行来自另一个独立部署应用的代码。该模式起源于 Webpack 5，如今也可以通过原生导入映射表和动态导入实现。
使用场景
大型组织会将单体应用拆分为多个独立部署的“微前端”——一个外壳宿主加上多个功能应用。模块联邦允许外壳按需加载每个功能，而无需在构建时将它们打包在一起。
Webpack 联邦
在 Webpack 5 中，宿主会声明 remotes（要使用的其他应用），而远程应用会声明 exposes（它们提供的内容）。运行时会在启动时从每个远程应用获取一个很小的清单，并在宿主导入这些内容时下载相应的代码块。
原生替代方案
不使用 Webpack 时，同样的理念可以通过指向远程 ESM 包的导入映射表，以及用于加载的动态导入来实现。宿主的导入映射表会将 "feature-cart": "https://cart-team.example.com/entry.js" 作为映射；import("feature-cart") 会加载最新部署的版本。
<script type="importmap">
{
"imports": {
"feature-cart": "https://cart.example.com/v1/entry.js",
"feature-checkout": "https://checkout.example.com/v2/entry.js"
}
}
</script>共享依赖
如果没有协调，每个远程应用都会携带自己的一份 React。联邦工具允许声明共享依赖——第一个加载 React 的远程应用会让它可供其他所有应用使用。原生方案则使用导入映射表，让每个远程应用都指向同一个 React 网址。
独立部署
每个团队负责自己的远程应用，并可以随时部署。宿主无需重新构建；它会在下次加载页面时（或通过更新缓存键）获取新版本。这样可以完全解耦发布周期。
版本管理策略
请将远程应用固定到带版本号的网址（/v1/entry.js、/v2/entry.js），这样宿主升级就是有意为之，而不是隐式发生的。一些团队会借助 JSPM 等工具，在导入映射表层面进行语义化版本匹配。
权衡
模块联邦会增加运行时复杂性：网络请求更多、跨源调试更困难，并且共享依赖可能不兼容。只有在确实需要独立部署时才应使用它；对于较小的项目，单一构建更简单、更快速。
错误隔离
一个远程模块崩溃不应导致宿主应用崩溃。请将动态导入放在错误边界（React）或 try/catch 结构（原生 JavaScript）中，并在远程模块失败时渲染回退界面。即使某项功能暂时损坏，外壳应用仍应保持可用。
类型安全
远程导出在宿主应用中没有编译时类型信息。请在独立软件包中生成由双方共同使用的 TypeScript 类型，或者在联邦边界处使用运行时验证（Zod、io-ts）。
原生方案与工具链
原生联邦（导入映射 + ESM）更简单，也基于标准，但缺少 Webpack 的共享依赖协调能力。对于共享依赖较多的复杂应用，请选择 Webpack/模块联邦；对于更简单的微前端方案，请选择原生联邦。
未来方向
W3C 正在探索更丰富的模块加载原语，让原生联邦具备更强的能力，包括更完善的共享依赖协商。如今，请将导入映射视为基础，并在其上构建联邦工具链。
知识检查
在大型应用中使用模块联邦的主要动机是什么？
总结
模块联邦允许宿主应用在运行时从独立部署的远程模块加载代码。Webpack 5 的工具链增加了共享依赖协商；原生联邦使用导入映射和动态导入。请将其用于包含多个团队的微前端架构，并接受随之增加的复杂性，以换取独立部署的自由。
常见问题解答
「模块联邦基础」课时是免费的吗？
是的 — 「模块联邦基础」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「模块联邦基础」这节课中我会学到什么？
了解模块联邦如何实现微前端共享 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「模块联邦基础」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。