我在react-redux上制作一个应用程序。我正在使用webpack捆绑和babel进行转译。当我尝试在代码中使用箭头功能时。它给我的错误是:
Module build failed: SyntaxError: Unexpected token (34:15)
};
> handleSubmit = (event) => {
^
event.preventDefault();
this.props.dispatch(actions.addTodo(this.state.inputText));
我的webpack配置文件如下所示:
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
'./client/client.js'
],
output: {
path: require('path').resolve('./dist'),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'react-hmre']
}
}
]
}
};
并且我在package.json中使用以下babel软件包:
"babel-cli": "^6.6.5",
"babel-core": "^6.4.5",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.1.1",
怎么了?
另外,如果您想适应新的babel节目,可以使用
babel.config.js
file代替.babelrc
。这个想法就像webpack.config.js
file 一样,但是用于babel配置。它的用法如下:确保安装所有这些插件以成功编译。我应该说,通货膨胀本身只是建议对所有这些
.babelrc
文件都进行归档。但是你知道,我们不是每个人。