Mũi tên Cú pháp hàm không hoạt động với webpack?

Question

Tôi đang tạo ứng dụng trên phản ứng-redux. Tôi đang sử dụng webpack cho bundling và babel cho transpiling. Khi tôi cố gắng sử dụng chức năng mũi tên trong mã của tôi. Nó mang lại cho tôi lỗi như:

Module build failed: SyntaxError: Unexpected token (34:15) 

}; 

> handleSubmit = (event) => { 
       ^
    event.preventDefault(); 

    this.props.dispatch(actions.addTodo(this.state.inputText)); 

tập tin cấu hình webpack của tôi trông giống như sau:

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'] 
     } 
     } 
    ] 
    } 
}; 

và tôi đang sử dụng sau gói babel trong package.json tôi:

"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", 

Điều gì đã đi sai?

Answer 1

Đâm trong bóng tối, chức năng này có nằm trong lớp học không? Các hàm mũi tên là thành viên của một lớp không được bao gồm trong ES2015 (hoặc 2016). Nếu bạn muốn làm điều gì đó như:

class Foo { 
    bar = (baz) => { 
    console.log(baz); 
    } 
} 

Bạn cần phải bao gồm babel-transform-class-properties.

Trong ví dụ của bạn, bạn sẽ cần phải:

npm install --save-dev babel-plugin-transform-class-properties

và thay đổi bộ nạp của bạn để

{ 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['react', 'es2015', 'react-hmre'], 
      plugins: ['transform-class-properties'] 
     } 
     }