eslint-loader failOnError选项在ts-loader和webpack-dev-server上不工作。

Question

摘要

• 为了用webpack编译TypeScript，我使用ts-loader。
• 当使用webpack-dev-server时，错误信息可能会被错误地显示。
• 仓库。https:/github.compvcresineslint-ts-loader-error。.

问题

• eslint-loader没有停止编译，并显示ts-loader错误。
• 即使重写了TS代码，ts-loader错误仍然是旧的。

程序

1. 1. 启动开发服务器。yarn start = webpack-dev-server --mode development

软件包.json

{
  "name": "eslint-ts-loader-error",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "2.30.0",
    "@typescript-eslint/parser": "2.30.0",
    "babel-loader": "8.0.6",
    "eslint": "6.8.0",
    "eslint-loader": "4.0.2",
    "ts-loader": "6.2.2",
    "typescript": "3.8.3",
    "webpack": "4.33.0",
    "webpack-cli": "3.3.4",
    "webpack-dev-server": "3.7.1"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist/'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader',
          },
        ],
      },
      {
        test: /\.(ts|tsx)$/,
        enforce: 'pre',
        exclude: /node_modules/,
        use: [
          {
            loader: 'eslint-loader',
            options: {
              failOnError: true,
            },
          },
        ],
      },
    ],
  },
};

2. 编辑并保存.ts文件。

编辑并保存.ts文件。

const a: string = 100;
console.log(a);

-> Error: ts-loader (As expected)

ts-loader: Type '100' is not assignable to type 'string'.

3. 编辑并保存.ts文件。

const a: string = 100;
// console.log(a);

-> Error: eslint-loader, ts-loader (Unexpected)

eslint-loader: 'a' is assigned a value but never used  no-unused-vars
ts-loader: Type '100' is not assignable to type 'string'.

预期]当eslint-loader发生错误时，停止编译过程，不显示ts-loader的错误。

4. 4. 编辑并保存.ts文件。

const a: boolean = 100;
// console.log(a);

-> Error: eslint-loader, ts-loader (Unexpected)

eslint-loader: 'a' is assigned a value but never used  no-unused-vars
ts-loader: Type '100' is not assignable to type 'string'.

ts-loader错误不是最新的，是旧的!

这是不是证明处理方式达不到ts-loader的要求？

我不知道为什么会这样。

是不是webpack-dev-server的问题，而不是eslint-loader的问题？

我需要有人帮助我。

环境

• macOS Catalina v10.15.4
• Node.js v12.16.2
• npm v6.14.4
• yarn v1.22.4

Answer 1

在 GitHub 的 Issue 上提问。

我使用的是 https:/github.comwebpack-contribeslint-webpack-plugin。 它的工作！:tada:

https:/github.comwebpack-contribeslint-loaderissues327。