reactjsgulpbrowserifybabeljsreactify

Gulp, Reactify, and Babelify not transforming together


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

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.


Solution

  • 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.

    Run the following

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

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

    See the options page for more information.