Gulp、Reactify 和 Babelify 没有一起转换答案

【问题标题】：Gulp, Reactify, and Babelify not transforming togetherGulp、Reactify 和 Babelify 没有一起转换
【发布时间】：2015-12-08 17:24:25
【问题描述】：

这是我的 gulpfile 代码：

gulp.task('react', function () {
  browserify('app/src/main.jsx')
    .transform(reactify)
    .transform(babelify)
    .bundle()
    .pipe(source('app.js'))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest('dist/js/'));
});

只有第一个转换语句运行，因此由于缺少额外的转换而引发错误（我正在用 ES6 和 JSX w/react 编写）。

我完全不知所措，非常感谢帮助。

【问题讨论】：

标签： reactjs gulp browserify babeljs reactify

【解决方案1】：

不应再使用 Reactify。你没有说你是什么版本，但截至Babel 6“preset's”是实现编译的标准方式。

运行以下命令

npm install save-dev babel-preset-react babel-preset-es2015

您还应该确保 Babelify 是最新的。然后你的 Gulp 配置就变成了

var babelify = require("babelify");
gulp.task('react', function () {
  browserify('app/src/main.jsx')
    .transform(babelify, {presets: ["es2015", "react"]})
    .bundle()
    .pipe(source('app.js'))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest('dist/js/'));
});

请参阅options page 了解更多信息。

【讨论】：

当您说不应再使用 reactify 时，您是在泛泛地谈论还是在谈论这种特殊情况？
Babel 完成所有 reactify 的工作，甚至更多，而且使用 gulp/grunt 或单独设置同样容易。 OP 已经在使用 babel，所以也没有必要使用 reactify
谢谢。出于某些充分的理由在谷歌上搜索后来到这里，以证明其中一个优于另一个个人偏好。