箭头函数语法不适用于 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屋！