javascript - 如何使用 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 transform，Reactify遇到import关键字会报错:

ReactifyError: /Users/****/Sites/***/assets/js/components/UserDashboard.jsx: Parse Error: Line 7: Unexpected reserved word while parsing file: /Users/****/Sites/****/assets/js/components/UserDashboard.jsx

这里的问题似乎与 Reactify 对 react-tools 的使用有关，参见 here和 here .但我不确定是否可以在 Reactify 中启用 es6module 选项。

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

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

和

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

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

Answer 1

您应该能够使用 Babel 完成所有这些操作和 babelify (相应的 Browserify 插件)。

Babel 本身是一个 ES6+ 到 ES5 的转译器，但它带有 first class JSX support :

JSX and React

Babel works perfectly with React, featuring a built-in JSX transformer.

您的 Browserify 转换将变为:

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

---

编辑:从 Babel 6 开始，许多组件已移出到单独的预设包中，您需要安装这些包并将其包含在转换命令中。

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

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

这些可以一起在转换中指定。

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