Webpack babel-loader es2015 预设设置不起作用

Question

当我使用 webpack 构建 React 项目时，出现 'Unexpected token' 错误

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"]
...

将来，我们可能不会像这篇 Removing Babel's Stage Presets 文章中所说的那样使用 babel 的状态预设。

但是，就目前而言，效果非常好

Babel 的舞台预设是什么：

A Babel preset is a shareable list of plugins.

The official Babel Stage presets tracked the TC39 Staging process for new syntax proposals in JavaScript.

Each preset (ex. stage-3, stage-2, etc.) included all the plugins for that particular stage and the ones above it. For example, stage-2 included stage-3, and so on.

Webpack babel-loader es2015 预设设置不起作用

Webpack babel-loader es2015 presets setting is not working

javascript

ecmascript-6

reactjs

webpack

webpack.config.js