Webpack babel-loader es2015 預置設定設設不起作用

Question

当我使用 webpack 构建反应项目时，我收到"意外令牌"错误

网络包 --进度

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 的状态预设。

但是，就目前而言，它运行得非常好

什么是 Babel 的舞台预设：

Babel 预设是一个可共享的插件列表。

官方 Babel 舞台预设跟踪了 TC39 舞台过程 JavaScript 中的新语法建议。

每个预设(例如阶段-3、阶段-2 等(都包含 那个特定的阶段和它上面的阶段。例如，阶段 2 包括阶段 3，依此类推。