【webpack】 如何配置eslint+babel+ts

平时用 cra、vue-cli等cli工具用多了，并不知道webpack是怎么是怎么配置，所以想深入了解下，顺便也了解下同样的需求，用vite是怎么做的

老牌工具 webpack、Rollup、Parcel

webpack

这是webpack 一般的配置的结构，这里只讲webpack。它通常有mode、resolve、output 、entry、module、plugins 等配置

// webpack
webpack webpack-cli

// babel相关依赖
@babel/core  babel-loader  @babel/preset-env  @babel/preset-typescript

// ts相关依赖
typescript ts-loader @typescript-eslint/parser @typescript-eslint/eslint-plugin 

// eslint
eslint eslint-loader  

const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  mode: "development",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
          "ts-loader"
        ],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      extensions: ["js", "mjs", "jsx", "ts", "tsx"],
    }),
  ],
};

以上采用ts-loader去转化ts， ts-loader主要采用使用TypeScript的官方编译器tsc将TypeScript代码编译成JavaScript代码, 配合tsconfig.json一起使用。与babel的预设@babel/preset-typescript不同的是, 前者可以做类型检查, 后者只是转换，不做类型检查，因为速度快些。如果后者也想使用类型检查，可以配合fork-ts-checker-webpack-plugin一起使用

pnpm add --dev fork-ts-checker-webpack-plugin

采用@babel/preset-typescript和fork-ts-checker-webpack-plugin结合的配法

module: {
   rules: [
     {
       test: /\.tsx?$/,
       use: [
         {
           loader: "babel-loader",
           options: {
             presets: ["@babel/preset-env","@babel/preset-typescript"],
           },
         },
       ],
       exclude: /node_modules/,
     },
   ],
 },
 plugins: [
   new ForkTsCheckerWebpackPlugin(),
   new ESLintWebpackPlugin({
     extensions: ["js", "mjs", "jsx", "ts", "tsx"],
   }),
 ],

也可以使用ts-loader 和fork-ts-checker-webpack-plugin结合，但是需要将transpileOnly设置为true, ts-loader < 9.3.0 手动添加transpileOnly， >=9.3.0 自动添加 transpileOnly 为true, 详见transpileonly

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

module: {
   rules: [
     {
       test: /.tsx?$/,
       loader: 'ts-loader',
       // add transpileOnly option if you use ts-loader < 9.3.0 ，
       // options: {
       //   transpileOnly: true
       // }
     }
   ]
 },
 plugins: [new ForkTsCheckerWebpackPlugin()],

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist"
    "declaration": true, // 会生成.d.ts 文件
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strict": true,
    "skipLibCheck": true,
    "target": "es2019",
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext"]
  },
  "exclude": ["**/node_modules"]
}

eslintrc.js

module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"], //  需要安装的依赖是 @typescript-eslint/eslint-plugin
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
};

新版工具

vite: 生产构建依赖Rollup

swc

es-build 基于go

rspack 基于rust

vite

这里只讲vite。vite 天然支持.ts, 与ts-loader不同的是，内部采用esbuild来转换JavaScript,不做类型检查， 据说构建速度比tsc快20-30倍。 Vite 建议将转换和类型检查分开，详见vite typescript

• 在构建生产版本时，你可以在 Vite 的构建命令之外运行 tsc --noEmit。 这个命令的作用是制作类型检查，不输出编译后代码
• 在开发时，如果你需要更多的 IDE 提示，我们建议在一个单独的进程中运行 tsc --noEmit --watch

所以我们只需要安装eslint的配置

eslintrc.js ，和上面差不多

module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
};

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})