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 Pageimplementation
Next Pagedev

#dts

  • 类型:boolean | PluginDtsOptions
  • 是否必填:否
  • 默认值:true
  • 使用场景:用于控制生成/消费类型行为

配置之后,生产者会在构建时自动生成一个压缩的类型文件 @mf-types.zip(默认名称),消费者会自动拉取 remotes 的类型文件并解压至 @mf-types(默认名称)。

PluginDtsOptions 类型如下:

interface PluginDtsOptions {
  generateTypes?: boolean | DtsRemoteOptions;
  consumeTypes?: boolean | DtsHostOptions;
  tsConfigPath?: string;
}

#generateTypes

  • 类型:boolean | DtsRemoteOptions
  • 是否必填:否
  • 默认值:true
  • 使用场景:用于控制生成类型行为

DtsRemoteOptions 类型如下:

interface DtsRemoteOptions {
  tsConfigPath?: string;
  typesFolder?: string;
  deleteTypesFolder?: boolean;
  additionalFilesToCompile?: string[];
  compilerInstance?: 'tsc' | 'vue-tsc';
  compileInChildProcess?: boolean;
  generateAPITypes?: boolean;
  extractThirdParty?: boolean;
  extractRemoteTypes?: boolean;
  abortOnError?: boolean;
  deleteTsConfig?: boolean;
}

当配置 generateTypes 为 true 时,默认会生成下列配置:

{
  "generateAPITypes": true,
  "abortOnError": false,
  "extractThirdParty": false,
  "extractRemoteTypes": false,
  "compileInChildProcess": true,
  "deleteTsConfig": true
}

#extractRemoteTypes

  • 类型:boolean
  • 是否必填:否
  • 默认值:undefined
  • 使用场景:当生产者 exposes 的内容中有重导出自身的 remotes 模块,那么 extractRemoteTypes: true 能够确保消费者能正常获取生产者 exposes 的模块类型
  • 示例:嵌套类型重导出

是否抽取 remotes 的类型。

#extractThirdParty

  • 类型:boolean
  • 是否必填:否
  • 默认值:undefined
  • 使用场景:当生产者 exposes 的内容中有包含 antd 的模块,并且消费者没装 antd ,那么 extractThirdParty: true 能够确保消费者能正常获取生产者 exposes 的模块类型
  • 示例:第三方包类型抽取

是否抽取第三方包类型。

#generateAPITypes

  • 类型:boolean
  • 是否必填:否
  • 默认值:undefined
  • 示例:Federation Runtime API 类型提示

是否生成 Federation Runtime 中 loadRemote 类型

#compileInChildProcess

  • 类型:boolean
  • 是否必填:否
  • 默认值:undefined

是否在子进程中编译生成类型

#abortOnError

  • 类型:boolean
  • 是否必填:否
  • 默认值:false

是否抛出错误当类型生成过程中碰到问题

#tsConfigPath

  • 类型:string
  • 是否必填:否
  • 默认值:path.join(process.cwd(),'./tsconfig.json')

优先级:dts.generateTypes.tsConfigPath > dts.tsConfigPath

tsconfig 配置文件路径

#typesFolder

  • 类型:string
  • 是否必填:否
  • 默认值:'@mf-types'

生成的压缩类型文件名称,例如设置了typesFolder为 custom,那么生成的压缩类型文件名称为: custom.zip

#deleteTypesFolder

  • 类型:boolean
  • 是否必填:否
  • 默认值:true

是否删除生成的类型文件夹

#compilerInstance

  • 类型:'tsc' | 'tsgo' | 'vue-tsc' | 'tspc' | string
  • 是否必填:否
  • 默认值:'tsc'

编译类型的示例

#deleteTsConfig

  • 类型:boolean
  • 是否必填:否
  • 默认值:true

是否删除临时 tsconfig 配置文件。

#consumeTypes

  • 类型:boolean | DtsHostOptions
  • 是否必填:否
  • 默认值:true
  • 使用场景:用于控制 Module Federation 消费(加载)类型行为

DtsHostOptions 类型如下:

interface DtsHostOptions {
  typesFolder?: string;
  abortOnError?: boolean;
  remoteTypesFolder?: string;
  deleteTypesFolder?: boolean;
  maxRetries?: number;
  consumeAPITypes?: boolean;
}

当配置 consumeTypes 为 true 时,默认会生成下列配置:

{
  "abortOnError": false,
  "consumeAPITypes": true
}

#consumeAPITypes

  • 类型:boolean
  • 是否必填:否
  • 默认值:true
  • 示例:Federation Runtime API 类型提示

是否生成运行时 loadRemote API 的类型

#maxRetries

  • 类型:number
  • 是否必填:否
  • 默认值:3

最大加载失败重试次数

#abortOnError

  • 类型:boolean
  • 是否必填:否
  • 默认值:false

是否抛出错误当类型加载过程中碰到问题

#typesFolder

  • 类型:string
  • 是否必填:否
  • 默认值:'@mf-types'

加载成功后的的类型存放目录

#deleteTypesFolder

  • 类型:boolean
  • 是否必填:否
  • 默认值:true

加载类型文件之前,是否删除之前加载的 typesFolder 目录

#remoteTypesFolder

  • 类型:string
  • 是否必填:否
  • 默认值:'@mf-types'

对应 remotes 目录配置的 typesFolder

#remoteTypeUrls

  • 类型:(() => Promise<RemoteTypeUrls>) | RemoteTypeUrls
  • 是否必填:否
  • 默认值:undefined

用于获取 remote 类型文件的地址。

应用场景:

  • 只使用了 runtime API 加载生产者,没使用构建插件,通过创建 module-federation.config.ts 配置文件,并设置此配置,来告知 MF 类型文件地址。
module-federation.config.ts
import { createModuleFederationConfig, type moduleFederationPlugin } from '@module-federation/enhanced';

export default createModuleFederationConfig({
  // ...
  remotes: {
    'remote1-alias': 'remote1@http://localhost:80801/remoteEntry.js'
  },
  dts:{
    consumeTypes:{
      remoteTypeUrls: async()=>{
        // 模拟请求接口获取类型文件地址
        const data = await new Promise<moduleFederationPlugin.RemoteTypeUrls>(resolve=>{
          setTimeout(()=>{
            resolve({
              remote1:{
                alias: 'remote1-alias',
                api:'http://localhost:8081/custom-dir/@mf-types.d.ts',
                zip:'http://localhost:8081/custom-dir/@mf-types.zip'
              }
            } )
          },1000)
        });

        return data;
      }
    }
  }
});
  • 当 remote 为 remoteEntry.js 时,类型文件地址通常会直接替换 js 文件为对应的类型文件,例如 @mf-types.zip ,但是实际上传的类型文件地址不是这个,那么可以通过设置此配置来告知 MF 真正的类型文件地址。
module-federation.config.ts
import { createModuleFederationConfig } from '@module-federation/enhanced';

export default createModuleFederationConfig({
  // ...
  remotes: {
    'remote1-alias': 'remote1@http://localhost:80801/remoteEntry.js'
  },
  dts:{
    consumeTypes:{
      remoteTypeUrls: {
        // remote name
        remote1:{
          alias: 'remote1-alias',
          api:'http://localhost:8081/custom-dir/@mf-types.d.ts',
          zip:'http://localhost:8081/custom-dir/@mf-types.zip'
        }
      }
    }
  }
});

#family

  • Type: 4 | 6
  • Required: No
  • Default value: 4

配置 ip 版本,用于加载生产者类型文件。

#typesOnBuild

  • 类型:boolean
  • 是否必填:否
  • 默认值:false

默认情况下,MF 不会在生产环境(process.env.NODE_ENV === 'production')去加载类型文件。如果需要在生产环境去加载类型文件,需要设置 typesOnBuild 为 true。

#tsConfigPath

  • 类型:string
  • 是否必填:否
  • 默认值:path.join(process.cwd(),'./tsconfig.json')

tsconfig 配置文件路径

#cwd

  • 类型:string
  • 是否必填:否
  • 默认值:undefined

运行 tsc 的路径,默认为项目根目录。

#displayErrorInTerminal

  • 类型:boolean
  • 是否必填:否
  • 默认值:true

是否在 terminal 输出错误日志