Webpack mit ES6-Presets, die die ES6-Syntax nicht verstehen

Question

Ich habe ein sehr grundlegendes Projekt für React with Webpack enabled ES6. Dies ist, was Datei meine Webpack Config wie folgt aussieht:

module.exports = { 
    entry: './main.js', 
    output: { 
     path: './', 
     filename: 'index.js', 
    }, 
    devServer: { 
     inline: true, 
     port: 3333, 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    } 
}; 

Ich habe einige Code Reagieren mit einer Komponente deklarierte class verwenden und dass Komponente hat darin einige Pfeil Funktionen. Wenn ich die Seite ausführen, zeigt der Webpack dev-Server die folgenden Fehler:

ERROR in ./App.js 
Module build failed: SyntaxError: C:/Users/Alex/src/todo/App.js: Unexpected token (23:12) 
    21 | }; 
    22 | 
> 23 | handleOpen =() => { 
    |   ^
    24 |   this.setState({open: true}); 
    25 | }; 
    26 | 

Es scheint, dass auf der Babel Webseite aus der Lektüre, die voreingestellte 'es2015' sollten genug sein. Fehle ich etwas?

Answer 1

Diese Syntax ist ein Teil von ES Class Fields & Static Properties proposal, die immer noch in stage-1 ist, um dies zu schreiben, also müssen Sie preset-stage-1 hinzufügen, um es zu verwenden.

Wenn Sie stage-0 verwenden, wird es auch funktionieren.

Alternativ könnten Sie nur die transform-class-properties plugin verwenden.