Webpack eslint-loader ignore.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" to.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

1. npm install
2. npx eslint => 没有错误（.eslintrc.json 使用babel-eslint作为解析器）
3. 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

通过添加 a.babelrc 进行配置：

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

与此更新版本一样：

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