ts-loader 和 babel-loader 编译顺序和配置冲突问题

在使用 Webpack 构建工具时，ts-loader 和 babel-loader 都是常用的加载器，但它们的用途和工作方式有所不同：

• ts-loader：用于将 TypeScript 代码编译成 JavaScript。
• babel-loader：用于将现代 JavaScript 代码编译成兼容性更好的 JavaScript（例如，将 ES6+ 代码转换为 ES5）。

当你需要同时使用这两个加载器时，可能会遇到一些问题，比如编译顺序和配置冲突。以下是如何正确地配置它们以避免问题的详细步骤和代码示例：

问题描述

1. 编译顺序：ts-loader 和 babel-loader 的编译顺序需要正确配置。通常，先使用 ts-loader 将 TypeScript 代码编译成 JavaScript，然后再用 babel-loader 进行进一步的处理。
2. 配置冲突：需要确保 TypeScript 和 Babel 的配置文件不会互相冲突。

解决方案

1. 安装必要的依赖

首先，确保安装了必要的依赖：

npm install --save-dev ts-loader babel-loader @babel/core @babel/preset-env @babel/preset-typescript typescript

2. 配置 tsconfig.json

确保你的 tsconfig.json 文件配置正确：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "jsx": "react",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

3. 配置 .babelrc

创建一个 .babelrc 文件，用于 Babel 的配置：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    "@babel/preset-react"
  ]
}

4. 配置 webpack.config.js

在 Webpack 配置文件中，配置 ts-loader 和 babel-loader 的使用顺序：

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-typescript',
                '@babel/preset-react'
              ]
            }
          },
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true // 只进行转译，不进行类型检查
            }
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'source-map'
};

详细解释

1. 加载器顺序：在 rules 中，use 数组的加载器是从右到左执行的。首先，ts-loader 将 TypeScript 代码编译成 JavaScript，然后 babel-loader 对编译后的 JavaScript 代码进行进一步处理。
2. transpileOnly 选项：在 ts-loader 中设置 transpileOnly: true 可以提高编译速度，因为它只进行转译，不进行类型检查。类型检查可以通过独立的 TypeScript 编译器（如 tsc）或其他工具（如 fork-ts-checker-webpack-plugin）来完成。
3. Babel 配置：在 .babelrc 文件中配置了 @babel/preset-env、@babel/preset-typescript 和 @babel/preset-react，用于处理现代 JavaScript、TypeScript 和 React 代码。

额外优化

如果你希望在 Webpack 构建过程中进行类型检查，可以使用 fork-ts-checker-webpack-plugin：

npm install --save-dev fork-ts-checker-webpack-plugin

然后在 webpack.config.js 中添加该插件：

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

module.exports = {
  // ... 其他配置
  plugins: [
    new ForkTsCheckerWebpackPlugin()
  ]
};

通过这些配置，可以确保 ts-loader 和 babel-loader 正确地协同工作，从而避免编译顺序和配置冲突的问题。