webpack - 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

1. npm install
2. npx eslint=> 没有错误（.eslintrc.jsonbabel-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

通过添加 .babelrc 进行配置：

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

与此更新版本一样：

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