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

Я, должно быть, где-то забыл какую-то конфигурацию, но не могу найти где.

Чтобы воспроизвести это, рассмотрите это репо:

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

Настройте, добавив.babelrc:

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

Как в этой обновленной версии:

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