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

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

老牌工具 webpackRollupParcel

webpack

这是webpack 一般的配置的结构,这里只讲webpack。它通常有moderesolveoutputentrymoduleplugins 等配置

js 复制代码
// 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  
js 复制代码
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一起使用

sql 复制代码
pnpm add --dev fork-ts-checker-webpack-plugin

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

js 复制代码
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-loaderfork-ts-checker-webpack-plugin结合,但是需要将transpileOnly设置为true, ts-loader < 9.3.0 手动添加transpileOnly>=9.3.0 自动添加 transpileOnly 为true, 详见transpileonly

js 复制代码
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

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

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

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

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

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

eslintrc.js ,和上面差不多

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

js 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})
相关推荐
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐4 小时前
前端图像处理(一)
前端