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

Question

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

веб-пакет --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 |     }

Я думал, что мой проект не 't переносит коды 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 .1021 * Что такое предустановки Babel Stage:

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

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

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