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 / **** /站点/ **** /资产/ JS /组件/ UserDashboard.jsx

这里的问题似乎与Reactify使用反应工具有关，请参阅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和React

Babel与React完美配合，内置JSX变换器。

您的Browserify转换将成为：

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

编辑：截至Babel 6，许多组件已移至单独的预设软件包中，您需要安装并包含在转换命令中。

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

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

这些可以在变换中指定。

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

Answer 2

Babelify是我观点的最佳选择。对@ Dan的答案做了一点澄清。对于babel v 6.0，您需要安装2个预设。

ES2015
阵营

与npm install --save-dev babel-preset-react和npm install --save-dev babel-preset-es2015命令类似，然后在babelify设置中使用以下内容指定：transform: [[babelify, {presets: ["es2015", "react"]}]]

如果在您的代码中使用了一些最新的反应功能，例如...other，您还需要添加stage-0预设。

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

2 个答案:

JSX和React