dts#

• Type: boolean | PluginDtsOptions
• Required: No
• Default value: true
• Usage scenario: used to control Module Federation generation/consumption type behavior

After configuration, the producer will automatically generate a compressed type file @mf-types.zip (default name) during build, and the consumer will automatically pull the type file of remotes and decompress it to @mf-types (default name).

The PluginDtsOptions types are as follows:

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

generateTypes#

• Type: boolean | DtsRemoteOptions
• Required: No
• Default value: true
• Usage scenario: used to control Module Federation generation type behavior

The DtsRemoteOptions types are as follows:

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

When configuring generateTypes to true, the following configuration will be generated by default:

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

extractRemoteTypes#

• Type: boolean
• Required: No
• Default value: undefined
• Usage scenario: When the content of the producer exposes has its own remotes module that re-exports itself, then extractRemoteTypes: true can ensure that the consumer can normally obtain the module type of the producer exposes
• Example: [Nested type re-export](../guide/basic/type-prompt#Nested type re-export)

Whether to extract the type of remotes.

extractThirdParty#

• Type: boolean
• Required: No
• Default value: undefined
• Usage scenario: When the content of the producer exposes contains a module containing antd, and the consumer does not have antd installed, then extractThirdParty: true can ensure that the consumer can normally obtain the module of the producer exposes type
• Example: [Third-party package type extraction](../guide/basic/type-prompt#Third-party package type extraction)

Whether to extract third-party package types.

generateAPITypes#

• Type: boolean
• Required: No
• Default value: undefined
• Example: Federation Runtime API type prompt

Whether to generate the loadRemote type in Federation Runtime

compileInChildProcess#

• Type: boolean
• Required: No
• Default value: undefined

Whether generate types in child process

abortOnError#

• Type: boolean
• Required: No
• Default value: false

Whether to throw an error when a problem is encountered during type generation

tsConfigPath#

• Type: string
• Required: No
• Default value: path.join(process.cwd(),'./tsconfig.json')

priority: dts.generateTypes.tsConfigPath > dts.tsConfigPath tsconfig configuration file path

typesFolder#

• Type: string
• Required: No
• Default value: '@mf-types'

The name of the generated compression type file. For example, if typesFolder is set to custom, then the name of the generated compression type file is: custom.zip

deleteTypesFolder#

• Type: boolean
• Required: No -Default: true

Whether to delete the generated type folder

compilerInstance#

• Type: 'tsc' | 'vue-tsc'
• Required: No
• Default value: 'tsc'

Example of compiled type

consumeTypes#

• Type: boolean | DtsHostOptions
• Required: No
• Default value: true
• Usage scenario: used to control Module Federation consumption (loading) type behavior

The DtsHostOptions types are as follows:

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

When configuring consumeTypes to true, the following configuration will be generated by default:

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

consumeAPITypes#

• Type: boolean
• Required: No
• Default value: true
• Example: Federation Runtime API type prompt

Whether to generate the type of runtime loadRemote API

maxRetries#

• Type: number
• Required: No
• Default value: 3

Maximum number of retries for failed loading

abortOnError#

• Type: boolean
• Required: No
• Default value: false

Whether to throw an error when a problem is encountered during type loading

typesFolder#

• Type: string
• Required: No
• Default value: '@mf-types'

Type storage directory after successful loading

deleteTypesFolder#

• Type: boolean
• Required: No
• Default value: true

Before loading type files, whether to delete the previously loaded typesFolder directory

remoteTypesFolder#

• Type: string
• Required: No
• Default value: '@mf-types'

typesFolder corresponding to remotes directory configuration

remoteTypeUrls#

• Type: (() => Promise<RemoteTypeUrls>) | RemoteTypeUrls
• Required: No
• Default value:undefined

Used for getting the address of the remote type file.

Application scenarios:

• Only the runtime API is used to load the producer, and no build plugin is used. The MF type file address is informed by creating a module-federation.config.ts configuration file and setting this configuration.

import { createModuleFederationConfig, type moduleFederationPlugin } from '@module-federation/enhanced';

export default createModuleFederationConfig({
  // ...
  remotes: {
    'remote1-alias': 'remote1@http://localhost:80801/remoteEntry.js'
  },
  dts:{
    consumeTypes:{
      remoteTypeUrls: async()=>{
        // Simulate the request interface to obtain the type file address
        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;
      }
    }
  }
});

• When remote is remoteEntry.js, the type file address usually directly replaces the js file with the corresponding type file, such as @mf-types.zip, but the actual uploaded type file address is not this, so you can tell MF the real type file address by setting this configuration.

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'
        }
      }
    }
  }
});

tsConfigPath#

• Type: string
• Required: No
• Default value: path.join(process.cwd(),'./tsconfig.json')

tsconfig configuration file path

cwd#

• Type: string
• Required: No
• Default value: undefined

The working directory to run the compiler

displayErrorInTerminal#

• Type: boolean
• Required: No
• Default value: true

Whether print error log in terminal