如何使用Grunt + Browserify + Reactify来转换React ES6类？

Question

我想使用React v0.13引入的新ES6 React类,但我无法正确编译它.假设我在新的类语法中定义了以下React组件:

(function() {
  'use strict';

  import React from 'react'; 

  class _UserDashboard extends React.Component {
        render() {
            return(
                <div className="user-dashboard">
                    <Books />
                </div>
            );
        }
    }
    export const UserDashboard = React.createClass(_UserDashboard.prototype);

}());

我遇到的麻烦是在编译时使用Grunt和Browserify以及Reactify转换,Reactify遇到import关键字时会抛出错误:

ReactifyError:/Users/****/Sites/***/assets/js/components/UserDashboard.jsx:解析错误:第7行:解析文件时出现意外的保留字:/ Users/****/Sites/****/资产/ JS /组件/ UserDashboard.jsx

这里的问题似乎与Reactify使用react-tools有关,请参见此处和此处.但我不确定是否有可能es6module在Reactify中启用该选项.

我尝试了这两种变化无济于事:

...
transform: [[ 'reactify', {'es6module': true} ]]
...

和

...
transform: [[ 'reactify', {'es6':true, 'es6module':true} ]]
...

有谁知道如何做到这一点？

Answer 1

您应该可以使用Babel和babelify(相应的Browserify插件)完成所有这些操作.

Babel本身是ES6 +到ES5的转换器,但它带有一流的JSX支持:

JSX和React

Babel与React完美配合,内置JSX变换器.

您的Browserify转换将变为:

{
  "browserify": {
    "transform": ["babelify"]
  }
}

编辑:从Babel 6开始,许多组件已被移出到单独的预设包中,您需要安装并包含在transform命令中.

对于React和JSX,您需要babel-preset-react.

对于ES6,您需要 babel-preset-es2015

这些可以在变换中指定.

transform: [[babelify, { presets: ["react", "es2015"] }]]