remotes

  • 类型:PluginRemoteOptions
  • 是否必填:否
  • 默认值:undefined
  • 使用场景:用 Module Federation 消费远程模块
TIP

消费者者特有参数,设置了 remotes 则可认为这是一个消费者

PluginRemoteOptions 类型如下:

type ModuleFederationInfo = string;
interface PluginRemoteOptions {
  [remoteAlias: string]: ModuleFederationInfo;
}
  • remoteAlias 为实际用户引用的名称,可自行配置,例如设置了 remoteAliasdemo ,那么消费方式为 import xx from 'demo'
  • ModuleFederationInfoModuleFederation name + @ + ModuleFederation entry 组成
    • ModuleFederation name 是生产者设置的名称
    • entry 可以为 mf-manifest.jsonremoteEntry.js
    • entrymf-manifest.json 拥有以下额外能力
      • 动态模块类型提示
      • 资源预加载
      • chrome devtool 调试工具
module.exports = {
  plugins: [
    new ModuleFederation({
      name: 'host',
      // 下面的 remotes 中定义了两个 remote,分别是名称为:manifest_provider 在 3011 端口启动的项目、js_entry_provider 在 3012 端口启动的项目
      remotes: {
        'manifest-provider':
          'manifest_provider@http://localhost:3011/mf-manifest.json',
        'js-entry-provider':
          'js_entry_provider@http://localhost:3012/remoteEntry.js',
      },
    }),
  ],
};