ES6のプリセットを持つWebpackは、ES6の構文を理解していません

Question

React with Webpackが有効になっている非常に基本的なプロジェクトがあります。これは私のWebPACKの設定ファイルは、次のようになります。

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

私はいくつかのclassを使用して宣言コンポーネントにコードを反応させ、そのコンポーネントはそれにいくつかの矢印の機能を持っています。私は、ページを実行すると、WebPACKのdevのサーバーが次のエラーを示しています

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 | 

それはバベルのウェブサイト上で読んでから、プリセット'es2015'が十分であるべきと思われます。何か不足していますか？

Answer 1

この構文はES Class Fields & Static Properties proposalの一部であり、これを書いている時点ではまだステージ1にあるため、使用するにはpreset-stage-1を追加する必要があります。

ステージ0を使用しても機能します。

代わりに、transform-class-properties pluginを使用することもできます。