はWebPACKのを使用しているとき、私はこのエラーを取得していWebPACKのとバベル構成の問題

Question

に反応：

ERROR in ./src/pages/clients/components/ClientProfile.js 
Module build failed: SyntaxError: Unexpected token (18:17) 

    16 |  } 
    17 | 
> 18 |  handleSubmit = (person) => { 
    |    ^
    19 |   console.log(person); 
    20 |  }; 
    21 | 

私は.babelrc設定

{ 
    "presets" : ["es2015", "stage-3", "react"] 
} 

を以下そしてここpackage.json

"devDependencies": { 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babel-preset-stage-3": "^6.24.1", 
    "react-scripts": "0.9.5", 
    "webpack": "^2.5.1", 
    "webpack-dev-server": "^2.4.5" 
    }, 
    "scripts": { 
    "start": "webpack-dev-server --info", 
    "build": "webpack", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 

から私の devDependenciesだてきました

およびwebpack.config.jsも同様です

module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.jsx$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.css$/, 
       loader: 'style-loader!css-loader', 
       //include: /flexboxgrid/ 
      } 
     ] 
    } 

それは、誰かがアイデアを持っています。この構文に

handleSubmit = (person) => { 
     console.log(person); 
    }; 

を失敗している理由私は把握することはできませんか？おかげさまで

Answer 1

The proposal to add class fields to the languageは現在標準化プロセスのステージ2にあります。

バベル「舞台」プリセットはそうのように働く：

• babel-preset-stage-0はステージ0の機能をサポートするために必要なものが含まれています。
• babel-preset-stage-1には、ステージ0 と 1の機能をサポートするために必要なものが含まれています。
• など、最大でbabel-preset-stage-4までです。

したがって、babel-preset-stage-3しかないため、クラスフィールドは使用できません。これを有効にするには、そのパッケージをアンインストールしてbabel-preset-stage-2をインストールし、それに応じて設定ファイルを更新する必要があります。

TC39標準化プロセスのさまざまな段階が何を必要とするかについては、GitHubとprocess documentをご覧ください。

Answer 2

私はあなたのコードに以下の変更を加え、うまくいきます。

{ 
"babel-core": "^6.6.5", 
"babel-loader": "^6.2.4", 
"babel-plugin-transform-runtime": "^6.6.0", 
"babel-preset-es2015-native-modules": "^6.6.0", 
"babel-preset-react": "^6.5.0", 
"babel-preset-stage-0": "^6.5.0", //instead of preset-stage-3 
} 

と

{ 
    "presets": [ 
    "es2015", 
    "react", 
    "stage-0" //instead of "stage-3" 
    ] 

}

私は、マニュアルを読み、他の誰かがそれを説明するまで、その理由を思い付くでしょう。 :)