如何利用“模块联邦”（Module Federation）实现跨应用的微前端共享-js教程-PHP中文网

模块联邦不是万能跨应用通信方案，本质是webpack构建时代码分割，运行时需处理共享依赖、版本冲突与生命周期协调。

如何利用“模块联邦”（module federation）实现跨应用的微前端共享

模块联邦不是万能的跨应用通信方案，它本质是 Webpack 的构建时代码分割机制，运行时仍需处理共享依赖、版本冲突和生命周期协调问题。

为什么 `ModuleFederationPlugin` 无法直接让两个独立部署的 React 应用“自动互通”

模块联邦依赖远程容器暴露的 remoteEntry.js 入口文件，该文件必须被正确加载且与本地 ModuleFederationPlugin 配置的 name、shared 策略匹配。常见失败场景包括：

远程应用未开启 CORS，导致浏览器拦截 remoteEntry.js 加载
本地 remotes 配置写成 'app2@http://localhost:3002/remoteEntry.js'，但远程服务实际返回 404（路径或静态资源未正确托管）
shared 中指定 react 但未设 singleton: true，导致两个应用各自挂载自己的 React 实例，触发 “Invalid hook call” 错误
远程应用使用 Webpack 5.70+，而宿主应用用的是 5.40，shareScope 协议不兼容，报错 Shared module is not available for eager consumption

如何安全地在 `shared` 中声明第三方库

不能只写库名，必须显式控制版本策略、提升方式和作用域。例如 react 和 react-dom 必须成对处理，且需强制 singleton：

shared: {
  react: { singleton: true, requiredVersion: '^18.2.0', eager: true },
  'react-dom': { singleton: true, requiredVersion: '^18.2.0', eager: true },
  'lodash-es': { singleton: false, requiredVersion: '^4.17.0' },
  '@mui/material': { singleton: false, requiredVersion: '>=5.13.0' }
}

关键点：

eager: true 表示该包在容器启动时就加载并注册，避免运行时动态加载失败
requiredVersion 不是语义化通配符，而是严格匹配本地 node_modules 中的实际版本；若不一致，Webpack 会降级为本地副本，可能引发重复实例
singleton: false 适用于工具类库（如 lodash-es），但要注意不同应用导出的命名空间是否冲突（比如都用 import { debounce } from 'lodash-es' 是安全的，但若某方做了 export * as Lodash from 'lodash-es' 就可能覆盖）

如何从远程应用加载组件并规避 `React.createElement: type is invalid`

错误通常源于：远程组件被当作普通对象导入，而非 React 组件函数；或其内部依赖的上下文（如 RouterProvider、QueryClientProvider）缺失。正确做法是：

远程应用导出组件时，必须确保是具名导出或默认导出的函数组件，且不能包裹在异步逻辑里（如 const Comp = () => import('./Comp') 不行）
宿主应用中用 React.lazy + React.Suspense 动态加载，而不是直接 import() 后立即调用：
```
const RemoteButton = React.lazy(() => import('app2/Button'))
```
远程组件若依赖全局 Provider，应在宿主应用中统一提供，或由远程应用自行包裹（推荐后者，通过导出一个带 Provider 的高阶组件）
检查远程组件的 package.json 中 peerDependencies 是否与宿主一致，尤其 react 版本 —— 模块联邦不会帮你校验运行时类型兼容性

部署后 `remoteEntry.js` 404 或加载空白，该怎么查

这不是配置问题，是发布链路断了。优先验证三件事：

远程应用构建后，dist/remoteEntry.js 文件真实存在，且内容以 self.__federation__ 开头（不是空文件或 HTML）
HTTP 服务（如 Nginx）是否将 /remoteEntry.js 路径映射到对应 dist 目录，而不是 fallback 到 index.html（常见于 SPA 路由配置）
浏览器 Network 面板中查看 remoteEntry.js 响应头是否有 Content-Type: application/javascript；若为 text/html，说明服务返回了 HTML，模块联邦脚本根本没执行
打开 remoteEntry.js 控制台执行 self.__federation__?.shareScope?.default，确认是否已注册 shared 模块 —— 如果是 undefined，说明脚本加载了但没执行成功（常因语法错误或 polyfill 缺失）