如何防止 webpack 为未使用的模块引发 typescript 错误？

Question

我有以下结构：

└── src
    ├── tsconfig.json
    ├── core
    │   ├── [...].ts
    └── ui
        ├── [...].tsx
        └── tsconfig.json

在前端，我从核心导入少量模块。 这些模块以及任何依赖模块都与这两个 tsconfig 文件兼容。

tsc 和 eslint 顺利通过，webpack 构建了所需的 output 文件。 到目前为止，一切都很好。

但是，当 webpack 构建时，它会为其他后端模块引发大量类型错误。

如何抑制这些错误？ 我尝试从babel-loader中排除src/core并包含所需的模块，但我仍然遇到相同的错误。

/// webpack.config.js
/* eslint-disable @typescript-eslint/no-var-requires */

const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',

  entry: './src/ui',

  output: {
    path: path.resolve(__dirname, './ui-dist'),
  },

  // Enable sourcemaps for debugging webpack's output.
  devtool: 'source-map',

  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },

  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            babelrc: false,
            presets: [
              [
                '@babel/preset-env',
                { targets: { browsers: 'last 2 versions' } }, // or whatever your project requires
              ],
              '@babel/preset-typescript',
              '@babel/preset-react',
            ],
            plugins: [
              // plugin-proposal-decorators is only needed if you're using experimental decorators
              //  in TypeScript
              ['@babel/plugin-proposal-decorators', { legacy: true }],
              ['@babel/plugin-transform-runtime', { legacy: true }],
              ['@babel/plugin-proposal-class-properties', { loose: true }],
              'react-hot-loader/babel',
            ],
          },
        },
      },
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader',
      },
    ],
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      tsconfig: path.resolve(__dirname, './src/ui/tsconfig.json'),
      eslint: true,
      /** Options to supply to eslint https://eslint.org/docs/developer-guide/nodejs-api#cliengine */
      // eslintOptions: EslintOptions;
    }),
    new HtmlWebpackPlugin({
      title: 'development',
      template: './src/ui/template.html',
    }),
  ],
  // When importing a module whose path matches one of the following, just
  // assume a corresponding global variable exists and use that instead.
  // This is important because it allows us to avoid bundling all of our
  // dependencies, which allows browsers to cache those libraries between builds.
  // externals: {
  //   react: 'React',
  //   'react-dom': 'ReactDOM',
  // },
  devServer: {
    contentBase: path.resolve(__dirname, './ui-dist'),
  },
};

编辑：我想我是通过使用import type { x } from '../core/index.ts'来引用这些引发错误的模块。 也许我需要为babel-loader找到一种跳过扫描类型导入的方法。

Answer 1

删除ForkTsCheckerWebpackPlugin就成功了。 在任何情况下调用 tsc 时都会进行类型检查。