React Webpack「予期しないトークン」という名前の矢印機能

Question

私はwebpack-middlewareで反応フルスタック環境をセットアップしました。私はコード内にいくつかのes6の構文を持っていますが、コンストラクタや名前付きの矢印関数がない状態ではエラーが発生します。例えば、私は、ソートテーブル反応のためのセマンティック-UIを使用したい： https://react.semantic-ui.com/collections/table#table-example-sortable をそして、私はこのエラーを取得するコンパイル中： enter image description here

私はそれがために、私は以下のことを添付間違っWebPACKの設定であると思いました。

const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './client/index.js', 
    output: { 
    path: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     use: 'babel-loader', 
     test: /\.js$/, 
     exclude: /node_modules/ 
     } 
    ] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'client/index.html' 
    }) 
    ] 
}; 

{ 
    "presets": ["env", "react", "es2015"] 
} 

Answer 1

.babelrcあなたは現在Class fields proposalの一環として、ステージ3は、クラスのプロパティを使用しようとしています。今日それらを使用できるようにするには、babel-plugin-transform-class-propertiesをインストールする必要があります。

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

.babelrcにプラグインに追加します。

{ 
    "presets": ["env", "react"], 
    "plugins": ["transform-class-properties"] 
} 

ないと、よりes2015すべてが含まれ、babel-preset-envの賛成で廃止されましたので、私はまたes2015プリセットを削除しました。