Настройка веб-пакетов babel-loader es2015 не работает

Question

Когда я строю реактивный проект с помощью веб-пакета, я получил ошибку "Неожиданный токен"

webpack --progress

ERROR in ./src/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (13:13)

  11 |     }
  12 | 
> 13 |     onSearch = (e) => {
     |              ^
  14 |         console.log('click');
  15 |     }

Я думал, что мой проект не переносит коды ES6 в ES5, потому что неправильная установка webpack.config.js, но я не могу найти, что не так.

webpack.config.js

module.exports = {
    entry: __dirname + "/src/App.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /\.js?$/,
            loader: 'babel-loader',
            query: {
                cacheDirectory: true,
                presets: ['react', 'es2015']
            }
        }]
    }
}

Answer 1

Устанавливать babel-preset-stage-2 пакет и попробуйте это:

.babelrc

{
  "presets": ["es2015", "react", "stage-2"]
}

webpack.config.js

...
presets: ["es2015", "react", "stage-2"]
...

В будущем мы можем не использовать предварительные настройки состояния babel, как сказано в этой статье.

Тем не менее, пока это работает очень хорошо

Что такое предустановки Babel's Stage:

Предустановка Babel - это общий список плагинов.

Официальные предустановки Babel Stage отслеживали процесс подготовки TC39 для новых предложений синтаксиса в JavaScript.

Каждый пресет (например, stage-3, stage-2 и т. Д.) Включал в себя все плагины для этой конкретной стадии и надстройки над ней. Например, этап 2 включал этап 3 и так далее.