Składnia funkcji strzałki nie działa z pakietem sieci Web?

Question

Robię aplikację na Reacti-redux. Używam pakietu internetowego do pakowania i babel do transpozycji. Kiedy próbuję użyć funkcji strzałki w moim kodzie. To daje mi błąd jak:

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

}; 

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

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

Mój plik konfiguracyjny WebPack wygląda następująco:

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

i używam następujących pakietów babel w moim 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", 

Co poszło nie tak?

Answer 1

Dźgnięcie w ciemności, czy ta funkcja jest wewnątrz klasy? Funkcje strzałek, które są członkami klasy, nie są uwzględnione w ES2015 (lub 2016). Jeśli chcesz zrobić coś takiego:

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

Musisz dołączyć babel-transform-class-properties.

W przykładzie, musisz:

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

i zmienić ładowarkę do

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