Webpack eslint-loader 忽略 .eslintrc 解析器

Question

我遇到了 webpack 的问题，特别是 eslint-loader。

我有一个 JS 文件，代码如下：

class Test {

    MyProp = "MyValue"

}

export default Test;

最初，当我调用 npx eslint . 时，我得到：

D:\repro\src\main\js\index.js
  3:12  error  Parsing error: Unexpected token =

我在某处读到我出于某种原因不得不将 "parser": "babel-eslint" 添加到 .eslintrc。

这确实解决了 npx eslint 的问题，但我仍然遇到 npx webpack 的问题：

ERROR in ./src/main/js/index.js 3:11
Module parse failed: Unexpected token (3:11)
File was processed with these loaders:
 * ./node_modules/eslint-loader/dist/cjs.js

我一定是忘记了什么地方的配置，但我似乎找不到在哪里。

要重现这个，请考虑这个 repo：

https://github.com/slacaze/webpack-eslint-issue

npm install
npx eslint => 没有错误（.eslintrc.json 使用 babel-eslint 作为解析器）
npx webpack => 错误如上

Answer 1

问题不在于您的 eslint 失败，而是如果不通过 babel 运行就无法打包此源。你需要使用 babel-loader 来实际转换你的代码，estlint-loader 只是检查你的语法。

首先，您需要添加 babel-loader，如下所示： https://webpack.js.org/loaders/babel-loader/

安装：

npm install -D babel-loader @babel/core @babel/preset-env webpack

然后配置（记住顺序是从下到上，所以把它放在 eslint 条目上面）：

    {
        test: /\.?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
        }
    },

此外，classProperties 默认情况下未启用，因此您也需要它： https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

安装：

npm install --save-dev @babel/plugin-proposal-class-properties

通过添加 .babelrc 进行配置：

{
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

在这个更新版本中：

https://github.com/dpwrussell/webpack-eslint-issue

Webpack eslint-loader 忽略 .eslintrc 解析器

Webpack eslint-loader ignore .eslintrc parser

eslint

webpack

eslint-loader