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
}
- 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
.
- 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
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
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.
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()=>{
// 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.
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'
}
}
}
}
});
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