当我通过 nx 为我的 webpack 应用程序提供服务时,生成的类型全部被压缩。如何正确设置远程类型的生成?
这是我的配置:
const { merge } = require('webpack-merge');
const ModuleFederationPlugin =
require('@module-federation/enhanced').ModuleFederationPlugin;
const path = require('path');
const commonConfig = require('../../webpack.react.common.js');
module.exports = (_, argv) =>
merge(commonConfig, {
entry: './src/main.tsx',
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
port: 4201,
},
output: {
path: path.join(__dirname, '../../dist/apps/info_plus'),
},
plugins: [
...(!argv?.env?.standalone
? [
new ModuleFederationPlugin({
name: 'info_plus',
filename: 'remoteEntry.js',
runtime: false,
exposes: {
'./InfoPlusApp': './src/app/App.tsx',
},
shared: {
react: {
singleton: true,
requiredVersion: '^18.0.0',
},
'react-dom': {
singleton: true,
requiredVersion: '^18.0.0',
},
},
}),
]
: []),
],
});
这是通用配置:
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const path = require('path');
module.exports = {
resolve: {
extensions: ['.tsx', '.ts', '.js'],
plugins: [
new TsconfigPathsPlugin({
configFile: path.resolve(__dirname, './tsconfig.base.json'),
}),
],
},
optimization: {
runtimeChunk: false,
splitChunks: {
chunks: 'async',
},
},
};
经过一些研究,我发现要管理类型生成,我们应该使用模块联合插件中的
dts
选项。
因此,要始终生成它们,请使用:
dts: {
generateTypes: {
typesFolder: '../../../tmp/@mf-types',
deleteTypesFolder: false,
},
}
特别是,我通过 webpack 传递的
argv
使用了以下配置:
module.exports = (_, argv) =>
// Webpack config
plugins: [
new ModuleFederationPlugin({
name: 'name',
filename: 'remoteEntry.js',
exposes: {
'./Module': './src/module/index.tsx',
},
dts: {
generateTypes:
argv?.env?.nodeEnv === 'production'
? true
: {
typesFolder: '../../../tmp/@mf-types',
deleteTypesFolder: false,
},
},
}),
]