remotes

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

Tip

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

PluginRemoteOptions 类型如下：

type ModuleFederationInfo = string;
type ShareScope = string | string[];

type RemoteConfig = {
  external: ModuleFederationInfo | ModuleFederationInfo[];
  shareScope?: ShareScope;
};

interface PluginRemoteOptions {
  [remoteAlias: string]: ModuleFederationInfo | RemoteConfig;
}

remoteAlias 为实际用户引用的名称，可自行配置，例如设置了 remoteAlias 为 demo ，那么消费方式为 import xx from 'demo' 。
ModuleFederationInfo 由 ModuleFederation name + @ + ModuleFederation entry 组成：
- ModuleFederation name 是生产者设置的名称
- entry 可以为 mf-manifest.json 和 remoteEntry.js
- entry 为 mf-manifest.json 拥有以下额外能力
  - 动态模块类型提示
  - 资源预加载
  - chrome devtool 调试工具

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      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',
      },
    }),
  ],
};

shareScope

类型：string | string[]
是否必填：否
默认值：'default'

host 与某个 remote 对齐哪些共享池（share scope）。可以用于把某些 shared 依赖从默认共享池里隔离出去（例如 scope1 用于公司内设计系统，default 仍用于 React 生态）。

new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    remote: {
      external: 'app_remote@http://localhost:2001/remoteEntry.js',
      shareScope: ['default', 'scope1'],
    },
  },
});

与之配套的配置：

生产者（remote）需要声明自己要初始化的共享池，见 shareScope。
具体某个 shared 依赖要注册在哪个共享池，见 shared.shareScope。

#remotes

#shareScope

remotes

shareScope