带有 browerify 的 babel 导致箭头函数的语法错误答案

【问题标题】：babel with browerify causing syntax error with arrow functions带有 browerify 的 babel 导致箭头函数的语法错误
【发布时间】：2016-08-01 09:23:23
【问题描述】：

首先我使用的是 gulp

用 browserify 和 babel 编译我的包

var bundler = browserify(filepath, args)
    .plugin(watchify, {ignoreWatch: ['**/node_modules/**', '**/bower_components/**']})
    .transform(babelify, {presets: ['es2015', 'react']})

这是我尝试运行命令时得到的结果

SyntaxError: browser/components/table.js: Unexpected token (50:14)
  48 |  }
  49 | 
> 50 |  handleToggle = () => this.setState({ drawer: !this.state.drawer })
     |               ^
  51 | 
  52 |  status(entry) {
  53 |      if (entry.status === undefined) {

除了箭头函数之外的所有东西似乎都可以正常工作，我无法弄清楚我在这里做错了什么。

export default class TableHandler extends Component {
 constructor(props) {
  super(props)
  this.state = {drawer: true}
 }
 handleToggle = () => this.setState({ drawer: !this.state.drawer })
 render(){
  return(
    <Drawer docked={false} width={300} open={this.state.drawer} />
  )
 }
}

还有更多代码，但我认为这可能就足够了

【问题讨论】：

你能发布完整的代码吗？如果这是一个对象属性，看起来你想要handleToggle: () =>。
这是在类声明中吗？你不能在类中使用箭头函数，因为你只能在类声明中设置方法，而不是属性，而且它不会有正确的this。
你应该添加 babel-preset-stage-0 ，检查babeljs.io/repl/…
@Utro 为什么 OP 需要添加 stage0 预设？箭头函数是 ES2015 的一部分，类字段是第 2 阶段提案。
类中的箭头函数不在 ES2015 中

标签： javascript reactjs gulp browserify

【解决方案1】：

添加“stage-1”后，我可以毫无问题地使用箭头功能。

.transform(babelify, {presets: ['es2015', 'stage-1', 'react']})

【讨论】：