Javascript 箭头函数语法不适用于 webpack？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42063854/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Arrow Function syntax not working with webpack?
提问by Ajay Gaur
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 :
我正在 react-redux 上制作一个应用程序。我使用 webpack 进行捆绑，使用 babel 进行转译。当我尝试在我的代码中使用箭头函数时。它给了我以下错误：
Module build failed: SyntaxError: Unexpected token (34:15)
};
> handleSubmit = (event) => {
^
event.preventDefault();
this.props.dispatch(actions.addTodo(this.state.inputText));
My webpack configuration file looks like as follows :
我的 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']
}
}
]
}
};
and I'm using following babel packages in my package.json :
我在 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",
What would have gone wrong?
出了什么问题？
回答by Joe Ruello
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:
暗中暗杀，这个函数是在一个类中吗？作为类成员的箭头函数不包含在 ES2015（或 2016）中。如果你想做这样的事情：
class Foo {
bar = (baz) => {
console.log(baz);
}
}
You'll need to include babel-transform-class-properties.
您需要包含babel-transform-class-properties。
In your example, you'll need to:
在您的示例中，您需要：
npm install --save-dev babel-plugin-transform-class-properties
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']
}
}
回答by a_m_dev
Also if you want to get used to new babel show, you can use babel.config.jsfile instead of .babelrc. The idea is like something like webpack.config.jsfile , but for babel configurations. It is been used like below:
另外，如果你想习惯新的 babel 秀，你可以使用babel.config.jsfile 而不是.babelrc. 这个想法类似于webpack.config.jsfile ，但用于 babel 配置。它的用法如下：
module.exports = {
presets: [ "@babel/preset-env", "@babel/preset-react" ],
plugins: [ "@babel/plugin-transform-arrow-functions", "@babel/plugin-proposal-class-properties" ]
}
Make sure to install all of those plugins to compile successfully. I should say that babel itself just recommended to do all of these stuff in .babelrcfile to every one. But you know, we are not every one.
确保安装所有这些插件以成功编译。我应该说 babel 本身只是建议将所有这些.babelrc文件都放在文件中。但你知道，我们不是每一个人。
回答by Vlado
This is exactly what worked for me:
这正是对我有用的：
1) Install babel-plugin-transform-class-properties:
1) 安装 babel-plugin-transform-class-properties:
sudo npm install --save-dev babel-plugin-transform-class-properties
2) Add options (not query) to your rules:
2）向您的规则添加选项（不是查询）：
module.exports = {
..........
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
presets: ['env', 'react', 'es2015'],
plugins: ['transform-class-properties']
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
..........
};
回答by wenningzhang
First you needed to edit the .babelrc file to
首先，您需要将 .babelrc 文件编辑为
{
"presets": ["react", ["es2016"]],
"plugins": [
"babel-plugin-transform-class-properties"
]
}
Second npm install babel-plugin-transform-class-propertiesand babel-preset-es2016
第二npm install babel-plugin-transform-class-properties和 babel-preset-es2016
回答by sree
In my application, this issue was caused by less-loader mistakenly added as dependent package instead of devDependency.
在我的应用程序中，这个问题是由于 less-loader 错误地添加为依赖包而不是 devDependency 引起的。
Moving less-loader from dependencies to devDependencies in package.json file resolved the issue.
在 package.json 文件中将 less-loader 从依赖项移动到 devDependencies 解决了这个问题。
