无法解释的语法错误[重复]

Question

我遇到了一个我无法解释的语法错误。

代码：

import React, { Component } from 'react';

class Button extends Component{
  handleClick = () => {
    this.props.onClickFunction(this.props.incrementValue)
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        +{this.props.incrementValue}
      </button>
    );
  }
}

错误消息 - 意外令牌 (4:14)：

  2 |
  3 | class Button extends Component{
> 4 |   handleClick = () => {
    |               ^
  5 |     this.props.onClickFunction(this.props.incrementValue)
  6 |   }
  7 |

我之前有这段代码可以运行，但我想尝试使用 webpack，并且由于这些更改，我收到了这个错误。据我了解，这是 es2015 中引入的一种新语法。我相信我已经正确配置了一切：

  "devDependencies": {
    "axios": "^0.17.1",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "bootstrap": "^4.0.0-beta.2",
    "font-awesome": "^4.7.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-fontawesome": "^1.6.1",
    "react-scripts": "1.0.17",
    "reactstrap": "^5.0.0-alpha.4",
    "webpack": "~3.9.1",
    "webpack-dev-server": "^2.9.5"
  }

module.exports = {
    entry: "./index.js",
    output:{
        filename:"public/bundle.js"
    },
    module:{
        loaders:[
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query:{
                    presets:['react', 'es2015']
                }
            }
        ]
    }
}

我的第一个想法是，也许我对 es2015 的配置不正确。但是我尝试使用正常的函数语法，仍然收到以下错误：

  2 |
  3 | class Button extends Component{
> 4 |   handleClick = function(){
    |               ^
  5 |     this.props.onClickFunction(this.props.incrementValue)
  6 |   }
  7 |

Answer 1

您需要像这样安装babel-preset-stage-0 作为开发依赖项：

npm install --save-dev babel-preset-stage-0

最好如documentation 中所述，您需要将其添加到.babelrc 文件中，（您可以在与webpack.config.js 相同的根目录中创建一个.babelrc 文件）并添加如下：

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

或者，如果您更喜欢使用 webpack.config.js，在您的查询对象中，您可以这样做：

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

Answer 2

您需要添加transform-class-properties plugin
并将其添加到 babel 的配置中：

{
  "plugins": [
    "transform-class-properties"
  ]
}