无法使箭头函数工作（React，Babel，Webpack，ES6）[重复]答案

【问题标题】：Can't get arrow functions to work (React, Babel, Webpack, ES6) [duplicate]无法使箭头函数工作（React，Babel，Webpack，ES6）[重复]
【发布时间】：2017-06-22 03:18:57
【问题描述】：

非常希望我能找到一个能告诉我为什么我不能让箭头函数与我的 Webpack / Babel 设置一起使用的人，我一直在尝试一堆东西，但到目前为止没有任何效果。项目现状：

包.json：

{
  "name": "..",
  "version": "1.0.0",
  "description": "..",
  "main": "app.jsx",
  "author": "..",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-class-properties": "^6.22.0",
    "babel-plugin-transform-react-jsx": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0",
    "css-loader": "^0.26.1",
    "node-sass": "^4.5.0",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  },
  "dependencies": {
    "lodash": "^4.17.4",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2"
  }
}

webpack.config.js：

var path = require('path');

module.exports = {
  entry: './src/router.jsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public')
  },
  watch: true,
  module: {
    loaders: [
      {
         test: /\.jsx$/,
         exclude: /(node_modules)/,
         loader: 'babel-loader',
         query: {
           presets: ['react', 'es2015']
         }
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
    ]
  }
};

.babelrc

{
  "plugins": [
    "transform-react-jsx",
    "transform-class-properties"
  ],
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ],
}

组件：

import React from 'react'

import './styles.scss'

class Button extends React.Component {
  asdf = () => {
    return ['btn', this.props.size].join(' ')
  }

  render() {
    return (
      <button className={this.asdf}>
        {this.props.children}
      </button>
    )
  }
}

export default Button

错误：

ERROR in ./src/app/ui-kit/button.jsx
Module build failed: SyntaxError: Missing class properties transform.

  4 |
  5 | class Button extends React.Component {
> 6 |   asdf = () => {
    |   ^
  7 |     return ['btn', this.props.size].join(' ')
  8 |   }
  9 |

 @ ./src/app/components/signup.jsx 13:14-45
 @ ./src/app/app.jsx
 @ ./src/router.jsx

【问题讨论】：

我认为babel-preset-state-0 可能会有所帮助。将其包含在 webpack 预设中。如果您在 webpack 配置中使用过 babelrc 文件中的预设，则不需要它们。试试看，如果有帮助，请告诉我
感谢@ShubhamKhatri，babel-preset-state-0 做到了！

标签： reactjs webpack babeljs

【解决方案1】：

检查我的 babel 包，.babelrc 正在我当前的项目中工作，并与你的比较：

.babelrc:

{
  "presets": ["react", "es2015" , "stage-0"],
  "plugins": [
    ["transform-decorators-legacy"]
  ]      
}

packages.json

"babel-core": "^6.4.5",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.1",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.0.1",
"babel-preset-stage-0": "^6.3.13",

【讨论】：

谢谢！将 stage-2 更改为 0 就可以了。