Babel es2015 箭头函数错误

Question

我在 React 组件中使用 es2015 箭头函数，当我声明 myfunction() {...} 时会抛出错误。这样写就不会报错myFunction : function () {...}。我在使用 Browserify/Babelify 进行编译时没有任何问题 - 这只发生在下面的示例中。

import React from 'react';

module.exports =  React.createClass({
  // render : function () { // <--- this works
  render() { // <---- this throws an error
    return (
      <div>Kaboom.</div>
      );
  }
});

/* RenderService.js */
require("babel-register")({
  plugins: ["transform-react-jsx","transform-es2015-modules-commonjs"]
});

var React = require('react');
var ReactDOMServer = require('react-dom/server');

module.exports = {
  renderReport : function (reportId) {
    var TestComp =  require('./TestCompoennt');

    var ReactComponent = React.createFactory(TestComp,'div');

    return ReactDOMServer.renderToStaticMarkup(ReactComponent());
  }
};

Error: renderApproval() { ^ SyntaxError: Unexpected token (

Answer 1

也许你应该使用一个preset-es2015，这个插件包括transform-es2015-shorthand-properties，那个你需要转换这个：

var z = function() { return 'z'; };
var x = {
  z
}

对此：

var z = function() { return 'z'; };
var x = {
  z: z
}

或者你的情况

var x = {
  z() {
    return 'z';
  }
}

并且还包括：

检查-es2015-常量
transform-es2015-arrow-functions
transform-es2015-block-scoped-functions
transform-es2015-block-scoping
transform-es2015-类
transform-es2015-computed-properties
transform-es2015-destructuring
transform-es2015-for-of
transform-es2015-函数名
transform-es2015-literals
transform-es2015-modules-commonjs
transform-es2015-object-super
transform-es2015-参数
transform-es2015-shorthand-属性
transform-es2015-spread
transform-es2015-sticky-regex
transform-es2015-template-literals
transform-es2015-typeof-symbol
transform-es2015-unicode-regex
变换再生器

Link http://babeljs.io/docs/plugins/preset-es2015/

Babel es2015 箭头函数错误

Babel es2015 Arrow Function error

ecmascript-6

reactjs

react-jsx

babeljs