logologo
指南
实践
配置
插件
案例
博客
生态
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
指南
实践
配置
插件
案例
博客
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
logologo
Overview
name
filename
remotes
exposes
shared
runtimePlugins
getPublicPath
implementation
dts
dev
manifest
shareStrategy
experiments
Edit this page on GitHub
Previous Pagefilename
Next Pageexposes

#remotes

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

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

PluginRemoteOptions 类型如下:

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 调试工具
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',
      },
    }),
  ],
};