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

时间:2016-08-01 09:23:24

标签: javascript reactjs gulp browserify

首先我正在使用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} />
  )
 }
} 

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

1 个答案:

答案 0 :(得分:4)

在添加&#39; stage-1&#39;之后我能够毫无问题地使用箭头功能。

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