箭头函数语法不能与webpack一起使用? [英] Arrow Function syntax not working with webpack?
问题描述
我在react-redux上制作应用程序。我正在使用webpack进行捆绑和babel进行转换。当我尝试在我的代码中使用箭头功能。它给出了我的错误:
I'm making an app on react-redux. I'm using webpack for bundling and babel for transpiling. When I am try to use arrow function in my code. It gives me error as :
Module build failed: SyntaxError: Unexpected token (34:15)
};
> handleSubmit = (event) => {
^
event.preventDefault();
this.props.dispatch(actions.addTodo(this.state.inputText));
我的webpack配置文件如下所示:
My webpack configuration file looks like as follows :
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包:
and I'm using following babel packages in my package.json :
"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",
会出现什么问题?
推荐答案
在黑暗中刺,这个函数在一个类中?作为类成员的箭头函数不包含在ES2015(或2016)中。如果你想做类似的事情:
Stab in the dark, is this function inside a class? Arrow functions that are members of a class are not included in ES2015 (or 2016). If you want to do something like:
class Foo {
bar = (baz) => {
console.log(baz);
}
}
您需要包含 babel-transform-class-properties 。
在你的例子中,你需要:
In your example, you'll need to:
npm install --save- dev babel-plugin-transform-class-properties
并将您的加载程序更改为
and change your loader to
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'react-hmre'],
plugins: ['transform-class-properties']
}
}
这篇关于箭头函数语法不能与webpack一起使用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!