Gulp、Reactify 和 Babelify 没有一起转换 [英] Gulp, Reactify, and Babelify not transforming together

问题描述

这是我的 gulpfile 代码:

This is my gulpfile code:

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 编写).

Only the first transform statement runs, and therefor throws an error due to the lack of additional transform (I'm writing in ES6 and JSX w/ react).

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

I'm at a complete loss and would really appreciate help.

推荐答案

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

Reactify should no longer be used. You don't say what version you are on, but as of Babel 6 "preset's" are the standard way to achieve compilation.

运行以下命令

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

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

You should also make sure Babelify is up to date. Then your Gulp config becomes

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/'));
});

查看选项页面了解更多信息.

这篇关于Gulp、Reactify 和 Babelify 没有一起转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！