模块联邦通过构建时动态生成远程模块入口，使应用能像导入本地模块一样使用其他应用暴露的组件。1. 远程应用配置ModuleFederationPlugin暴露模块，生成remoteEntry.js入口；2. 宿主应用在插件中声明远程依赖地址；3. 代码中直接import “remoteApp/模块路径”；4. shared配置确保react等依赖单例共享，避免重复加载。该机制实现微前端间高效代码复用，关键在于合理暴露模块边界并统一依赖版本。
模块联邦通过在构建时让不同应用直接引用彼此的模块，实现跨应用代码共享。它不是在运行时加载代码，而是在构建阶段动态生成可远程调用的模块入口，使一个应用能像导入本地模块一样使用另一个应用暴露出来的组件、函数或状态。
模块联邦的基本原理
模块联邦是 Webpack 5 提供的功能，允许将一个打包构建的应用作为“容器”，暴露出部分模块供其他应用（“宿主”）动态加载。这种方式打破了传统打包中每个应用独立封闭的限制。
核心机制包括：
远程应用通过 ModuleFederationPlugin 暴露指定模块 宿主应用声明从远程容器中引入模块 浏览器运行时动态解析并加载远程模块，实现按需使用
配置远程应用暴露模块
在需要共享代码的应用（比如 UI 组件库或微前端子应用）中，配置 Webpack 插件以暴露模块：
立即学习“Java免费学习笔记（深入）”；
new ModuleFederationPlugin({
name: “remoteApp”,
filename: “remoteEntry.js”,
exposes: {
“./Button”: “./src/components/Button”,
“./utils”: “./src/utils”
},
shared: { react: { singleton: true }, “react-dom”: { singleton: true } }
})
上述配置会生成 remoteEntry.js，作为外部应用接入的入口文件。
宿主应用引入远程模块
另一个应用可以在其 Webpack 配置中引入该远程应用：
new ModuleFederationPlugin({
name: “hostApp”,
remotes: {
remoteApp: “remoteApp@http://localhost:3001/remoteEntry.js”
},
shared: { react: { singleton: true }, “react-dom”: { singleton: true } }
})
之后即可在代码中像普通模块一样导入：
import Button from “remoteApp/Button”;
import { format } from “remoteApp/utils”;
Webpack 会在运行时自动下载并初始化远程模块，确保类型和依赖正确匹配。
共享依赖避免重复加载
多个应用通常使用相同的技术栈（如 React、Lodash）。通过 shared 配置，模块联邦可以识别这些公共依赖，只加载一次。
例如设置 { react: { singleton: true } } 后，所有参与方必须使用相同版本的 React，防止冲突和内存浪费。
基本上就这些。模块联邦让跨应用共享变得像写 import 语句一样简单，特别适合微前端架构中的组件复用和逻辑解耦。关键在于合理划分暴露边界，并统一基础依赖版本。不复杂但容易忽略细节。
以上就是JavaScript的模块联邦如何实现跨应用代码共享？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1523478.html
微信扫一扫 
支付宝扫一扫 
