忽略 Webpack/Babel 的 .d.ts 文件？

Question

我正在@teamsupercell/typings-for-css-modules-loader为我的 SASS 模块生成 TS 类型。输出类似于：

declare namespace LoginRouteStylesScssModule {
  export interface ILoginRouteStylesScss {
    card: string;
    emailForm: string;
    info: string;
    input: string;
  }
}

declare const LoginRouteStylesScssModule: LoginRouteStylesScssModule.ILoginRouteStylesScss & {
  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
  locals: LoginRouteStylesScssModule.ILoginRouteStylesScss;
};

export = LoginRouteStylesScssModule;

这让它通过tsc。然而，Babel 告诉我'export =' is not supported by @babel/plugin-transform-typescript. Please consider using 'export <value>;'.我只想忽略.d.ts文件，因为它们是为tscWebpack/Babel 而设计的。

我试过excludein .babelrc, excludeand ignorein webpack.config.js, and webpack.IgnorePlugin，但它们都不起作用。如何配置 Webpack 或 Babel 以忽略它们？

`webpack.config.js'：

const path = require('path');
const childProcess = require('child_process');
const webpack = require('webpack');

const APP_ROOT = path.resolve('./src');

module.exports = {
  entry: {
    index: path.resolve('./src/main.tsx'),
  },
  output: {
    path: path.resolve('./public/js'),
    publicPath: '/js/',
  },
  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        include: [APP_ROOT],
        exclude: [path.resolve('./node_modules')],
        use: {
          loader: 'babel-loader',
          options: {},
        },
      },
      {
        test: /\.s?css$/,
        include: [APP_ROOT],
        exclude: [/node_modules/],
        use: [
          '@teamsupercell/typings-for-css-modules-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: {
                localIdentName: '[name]__[local]',
              },
            },
          },
          'postcss-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: [
                path.resolve('./src/styles/imports/variables.scss'),
                path.resolve('./src/styles/imports/mixins.scss'),
              ],
            },
          },
        ],
      },
      {
        test: /\.png$/,
        use: [
          'file-loader?name=../css/sprites/[name].png',
        ],
      },
    ],
  },
  resolve: {
    modules: [APP_ROOT, path.resolve('./node_modules')],
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    alias: {
      sprites: path.resolve('./public/css/sprites'),
    },
  },
  optimization: {},
  context: APP_ROOT,
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.DefinePlugin({
      MODULE_CONFIG: null,
    }),
    new webpack.EnvironmentPlugin({
      NODE_ENV_ACTUAL: process.env.NODE_ENV || null,
      API_URL: process.env.API_URL || null,
      ASSETS_URL: process.env.ASSETS_URL || null,
      JS_VERSION: parseInt(
        (childProcess.execSync('git rev-list --count master').toString()).trim(),
        10,
      ),
    }),
  ],
  cache: true,
  devtool: false,
  watchOptions: {
    ignored: [
      path.resolve('./public'),
      path.resolve('./src/styles/generated/**'),
      path.resolve('./src/**/*.d.ts'),
    ],
  },
};

babel.config.js：

module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: '3',
      exclude: [
        'babel-plugin-transform-async-to-generator',
        'babel-plugin-transform-regenerator',
      ],
    }],
    '@babel/preset-typescript',
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
    ['@babel/plugin-transform-react-jsx', { pragma: 'h' }],
    '@babel/plugin-proposal-do-expressions',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-optional-chaining',
    /* Async/await increases file size by a lot.
    ["module:fast-async", {
      "compiler": { "promises": true, "generators": false, "useRuntimeModule": true },
    }],
    ["@babel/plugin-transform-modules-commonjs", {
      "strictMode": false,
    }], */
  ],
  env: {
    production: {
      plugins: ['transform-react-remove-prop-types'],
    },
  },
};

Answer 1

使用“ null-loader ”插件忽略“.d.ts”文件

    {
      test: /\.(d.ts)$/,
      include: [path.join(__dirname, 'src')],
      use: [
        {
          loader: 'null-loader',
        },
      ],
    },