如何使用 Grunt + Browserify + Reactify 编译 React ES6 类？答案

【问题标题】：How to transpile React ES6 classes using Grunt + Browserify + Reactify?如何使用 Grunt + Browserify + Reactify 编译 React ES6 类？
【发布时间】：2015-04-12 16:38:25
【问题描述】：

我想使用 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: Parse Error: Line 7: Unexpected reserved word while parsing file: /Users/****/站点/****/assets/js/components/UserDashboard.jsx

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

我尝试了这两种变体均无济于事：

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

和

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

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

【问题讨论】：

标签： javascript gruntjs reactjs ecmascript-6

【解决方案1】：

您应该可以使用 Babel 和 babelify（相应的 Browserify 插件）来完成所有这些操作。

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

JSX 和反应

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

您的 Browserify 转换将变为：

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

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

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

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

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

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

【讨论】：

这似乎可行，但现在是破坏性分配，例如...other，不工作。
这很奇怪，因为 Babel 绝对是 supports it。您是否收到编译时错误，或者只是生成了错误的代码？
我修复了它，但我必须添加 stage 0 选项。所以"transform: [ ["babelify", {"stage": 0}] ].
Dan，我不确定是否应该将您的答案标记为答案，因为虽然它是一个解决方案，但它不是 reactify 的解决方案......
这取决于您的判断，这取决于您对the problem 的看法。问题的核心是无法获取 ES6 类，还是 Reactify 无法正常工作？

【解决方案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"]}]]

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

【讨论】：