配置宿主与远程 React 应用

远程应用会在 Webpack 配置中添加 ModuleFederationPlugin，并设置三个关键属性：name（唯一标识符，例如“buttonApp”）、filename（“remoteEntry.js”——清单输出文件）和 exposes（将公开名称映射到源文件路径的映射表）。

exposes 配置会将公开的模块路径映射到本地文件：{ './Button': './src/Button' }。这意味着宿主应用可以导入 'buttonApp/Button'，并从 ./src/Button.tsx 接收该组件。您可以公开多个组件、工具函数，甚至完整页面。

shared 属性会告诉 Module Federation 哪些模块应在宿主应用和远程应用之间共享，而不是重复加载。对于 React，配置可以是：shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } }。singleton:true 可以防止同时加载多个实例。

宿主应用的 ModuleFederationPlugin 配置包含 remotes 属性：{ buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' }。键是导入命名空间，值是用 @ 连接的远程应用名称和网址——它会告诉 Webpack 在运行时从哪里获取远程应用。

在宿主应用的 React 代码中，使用动态导入来导入远程组件：const Button = React.lazy(() => import('buttonApp/Button'))。导入路径与远程应用的命名空间及公开模块名称相匹配。React.lazy 会使导入按代码分割并异步加载。

由于远程模块是异步加载的，请始终将通过延迟导入的远程组件放在 Suspense 边界中：Suspense fallback=Loading... /。当 Module Federation 从远程网址获取 remoteEntry.js 和组件分块时，fallback 会负责渲染。

React 的钩子（useState、useContext、useEffect）依赖单一的内部 React 实例来跟踪组件状态。如果宿主应用和远程应用各自加载一份 React，钩子就会抛出“invalid hook call”错误。singleton:true 会强制两者共享同一个 React 实例，从根本上解决这类错误。

当宿主应用使用 react@18.2.0 而远程应用使用 react@18.3.0 时，Module Federation 的共享作用域会协商要使用的版本。使用 singleton:true 和 requiredVersion 时，如果版本兼容，通常会使用较高的版本。将 requiredVersion: '>=18.0.0' 设置为灵活的版本范围，而不是固定版本。

TypeScript 在编译时不了解远程模块，因此如果没有声明，像 import('buttonApp/Button') 这样的导入会产生类型错误。请使用 @module-federation/typescript，或手动创建用于声明模块类型的 .d.ts 文件，从而确保远程组件属性具有类型安全性。

同时运行两个应用：远程应用使用 3001 端口，宿主应用使用 3000 端口。打开宿主应用——其 Module Federation 运行时会获取 http://localhost:3001/remoteEntry.js，发现 Button 模块，下载其分块，并在宿主应用内将其渲染为本地组件。

在生产环境中，将 localhost:3001 替换为已部署远程应用的网址。常见做法是使用环境变量存储远程网址，以便 CI/CD 为每个环境注入正确的网址：buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'。

为什么必须在 Module Federation 的共享配置中将 React 配置为单例？

配置 Module Federation 时，需要在远程应用（设置 name、filename、exposes）和宿主应用（设置 remotes）上都配置 ModuleFederationPlugin。通过 React.lazy 和动态导入使用远程组件，并用 Suspense 包裹。React 和 React DOM 必须作为共享单例，以防止多实例钩子错误。TypeScript 声明和使用环境变量配置的远程网址共同构成可用于生产环境的完整方案。