Nx 不生成类型(仅压缩)

问题描述 投票:0回答:1

当我通过 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',
    },
  },
};
webpack webpack-module-federation nx-monorepo
1个回答
0
投票

经过一些研究,我发现要管理类型生成,我们应该使用模块联合插件中的

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,
             },
     },
    
  }),
]
© www.soinside.com 2019 - 2024. All rights reserved.