Module Federation 的 shared 配置如何工作？如何解决版本冲突？

Module Federation 的 shared 配置用于管理多个应用之间共享的依赖，避免重复加载相同版本的库。以下是详细说明：

基本配置语法：

javascript
new ModuleFederationPlugin({
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
    lodash: { singleton: false }
  }
})

关键配置选项：

1. singleton（单例模式）

   • true：确保整个应用只有一个该依赖的实例
   • false：允许多个版本共存
   • 适用场景：React、Vue 等需要全局单例的库必须设为 true

2. requiredVersion（版本要求）

   javascript
   shared: {
     react: {
       singleton: true,
       requiredVersion: '^17.0.0'
     }
   }

   • 指定所需的版本范围
   • 如果加载的版本不符合要求，会加载本地版本

3. strictVersion（严格版本）

   • true：严格匹配版本，不满足则报错
   • false：允许版本不匹配（默认）

4. eager（急切加载）

   • true：在初始加载时就加载该依赖，不使用异步加载
   • false：按需异步加载（默认）
   • 适用场景：某些库需要在应用启动时就初始化

版本冲突解决策略：

Module Federation 使用以下策略解决版本冲突：

1. 优先使用已加载的版本：如果某个依赖已经被加载，其他应用会复用该版本
2. 版本协商：多个应用需要不同版本时，会选择满足所有应用要求的版本
3. 降级处理：如果无法满足所有要求，会降级到本地版本

实际应用示例：

javascript
// Remote 应用
new ModuleFederationPlugin({
  name: 'remoteApp',
  filename: 'remoteEntry.js',
  exposes: {
    './Button': './src/Button'
  },
  shared: {
    react: {
      singleton: true,
      requiredVersion: deps.react,
      eager: true
    },
    'react-dom': {
      singleton: true,
      requiredVersion: deps['react-dom']
    }
  }
})

// Host 应用
new ModuleFederationPlugin({
  name: 'hostApp',
  remotes: {
    remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
  },
  shared: {
    react: {
      singleton: true,
      requiredVersion: deps.react
    },
    'react-dom': {
      singleton: true,
      requiredVersion: deps['react-dom']
    }
  }
})

注意事项：

• 共享依赖时，确保所有应用使用相同的版本范围
• 对于有副作用的库，考虑设置 eager: true
• 使用 package.json 中的版本信息作为 requiredVersion