gulp: babelify runs without error, but doesn't transform my node modules

Question

I am:

• bundling with browserify

• transforming ES6 to ES5 with babel

• minifying the ES5 with uglifyjs

Which previously worked. However recently I've been getting errors from uglifyjs complaining about ES6 syntax, as if babelify hasn't actually run:

gulp.task('js', function() {

    // Browserify/bundle the JS.
    browserify({
        entries: './public/js/src/index.js',
        insertGlobals : true,
        fullPaths: true, // For discify
        debug: ! isProduction
    }).transform(babelify)
        .bundle()
        .pipe(source('index.js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest('./public/js/dist'))

});

Why isn't transform(babelify) transforming the code?

Please give actual answers, rather than cut and pasted gulpfiles.

Answer 1

The issue was using npm modules: babel ignores npm modules by default. So if the modules are ES6, they'll still be in ES6 when uglify runs.

Upgrading babel and using the global option has fixed things:

gulp.task('js', function() {

    browserify({
        entries: './public/js/src/index.js',
        insertGlobals : true,
        fullPaths: true, // For discify
        debug: ! isProduction
    }).transform(babelify, {
            presets: ['es2015'],
            compact: false,
            global: true
        })
        .bundle()
        .pipe(source('index.js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest('./public/js/dist'))
})

Another option is to put this in package.json in your private modules. Note the syntax is strange, and uses arrays rather than objects to match items to their options:

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

See the babelify docs for more information.