# remotes - 类型:`PluginRemoteOptions` - 是否必填:否 - 默认值:`undefined` - 使用场景:用 `Module Federation` 消费远程模块 :::tip 消费者者特有参数,设置了 `remotes` 则可认为这是一个消费者 ::: `PluginRemoteOptions` 类型如下: ```tsx type ModuleFederationInfo = string; interface PluginRemoteOptions { [remoteAlias: string]: ModuleFederationInfo; } ``` - `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 调试工具 ```js 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', }, }), ], }; ```