Question

我正在尝试使用Babel升级到现有项目的es6。我的package.json包含babel插件：

"devDependencies": {
    "babel-cli": "^6.8.0",
    "babel-core": "^6.0.0",
    "babel-eslint": "^6.0.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",
    "babel-preset-stage-2": "^6.5.0",
    "babel-register": "^6.8.0",
    "copy-webpack-plugin": "^2.1.3",
    "css-loader": "^0.23.1",
    "eslint": "^2.9.0",
    "material-ui": "^0.15.0",
    "node-sass": "^3.5.3",
    "react-hot-loader": "^1.3.0",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.12.1"

My .babelrc file the following:

    {
      "presets": ["es2015", "stage-1", "react"],
      "plugins": [
        "transform-es2015-arrow-functions",
        "transform-class-properties"
        ]

    }

And my webpack file contains the following:

```
module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['react-hot', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-2']
    },
    {
     test: /\.scss$/,
     loaders: ["style", "css", "sass"]
    }
  ]}
```

我使用以下命令运行我的节点应用程序：

cp views/index.html public/index.html && NODE_ENV=development webpack && npm run webpack-dev-server"

我正在使用带有material-ui的切换功能，以便通过Appbar组件中的汉堡菜单触发Drawer组件。

切换功能如下（根据documentation）

```
  handleToggle = () => this.setState({open: !this.state.open});

  handleClose = () => this.setState({open: false});
``

但是，每当我运行此操作时，我都会收到以下错误：

Unexpected token (29:16)
  27 | 
  28 | 
> 29 | handleToggle () => this.setState({open: !this.state.open});
     |                 ^
  30 |

如果我将功能从箭头改为更老式的方法，我可以让它工作，即

  handleToggle() {
    this.setState({open: !this.state.open});
    alert("handleToggle clicked");
   }

但是，我不想自定义material-ui中的每个组件，以使其能够向后兼容。如何在不出错的情况下升级代码？

无法使箭头功能正常工作

0 个答案: