Browserify transpile required or imported packages to es2015

Question

We have a project that utilizes imports, and requires, for including various third-party packages via NPM. Some of these packages are written in es6, and we need them to be transpiled down to es5/es2015 in order to work in browsers such as IE11 because some of the packages utilize the => arrow syntax for functions.

Our own code utilizes the arrow syntax, but it is being transpiled through browserify into a more universally supported syntax. The problem is that our imported packages, such as camelcase-keys, do not get transpiled and are included in their raw format.

This is fine for browsers like Chrome, and Edge, but for IE's it breaks because that syntax is not supported.

Here is our current package.json, and gulpfile.js. Please let me know if you need any further information.

package.json

{
  "name": "app",
  "private": true,
  "dependencies": {
    "angular": "^1.6.4",
    "angular-auto-complete": "^1.4.3",
    "angular-input-masks": "^4.1.0",
    "angular-moment": "^1.0.1",
    "angular-route": "^1.6.4",
    "angular-sanitize": "^1.6.6",
    "angular-strap": "^2.3.12",
    "animate.css": "^3.5.2",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "bootstrap-select": "^1.12.4",
    "bugsnag-angular": "^1.0.1",
    "bugsnag-js": "^4.0.3",
    "camelcase-keys": "^4.2.0",
    "date-holidays": "^1.2.1",
    "font-awesome": "^4.7.0",
    "moment": "^2.19.3",
    "ng-file-upload": "^12.2.13",
    "ng-storage": "^0.3.2",
    "papaparse": "^4.3.7",
    "snakecase-keys": "^1.1.0",
    "summernote": "^0.8.9",
    "sweetalert": "^2.0.8",
    "uuid": "^3.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^8.0.0",
    "browserify": "^14.5.0",
    "gulp": "^3.9.1",
    "gulp-angular-templatecache": "^2.0.0",
    "gulp-cache-bust": "^1.1.0",
    "gulp-concat": "^2.6.1",
    "gulp-if": "^2.0.2",
    "gulp-rm": "^1.0.2",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.1.2",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "yargs": "^8.0.1"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015"
          ],
          "plugins": [
            "transform-es2015-classes"
          ]
        }
      ]
    ]
  }
}

gulpefile.js

const gulp          = require('gulp'),
      concat        = require('gulp-concat'),
      uglify        = require('gulp-uglify'),
      rm            = require('gulp-rm'),
      browserify    = require('browserify'),
      template      = require('gulp-angular-templatecache'),
      bust          = require('gulp-cache-bust'),
      gulpif        = require('gulp-if'),
      sass          = require('gulp-sass'),
      argv          = require('yargs').argv,
      source        = require('vinyl-source-stream'),
      buffer        = require('vinyl-buffer');

gulp.task('images', function() {
    return gulp.src('assets/images/**/*.*').pipe(gulp.dest('public/images'));
});

gulp.task('fonts', function() {
    return gulp.src([
        'assets/fonts/**/*.*',
        'node_modules/bootstrap-sass/assets/fonts/**/*.*',
        'node_modules/font-awesome/fonts/*'
    ]).pipe(gulp.dest('public/fonts'));
});

gulp.task('html', function() {
    return gulp.src('app/**/*.html').pipe(template({ module: 'app' })).pipe(gulp.dest('public/js'));
});

gulp.task('sass', function () {
    return gulp.src([
        'node_modules/font-awesome/css/font-awesome.css',
        'assets/styles/app.scss'
    ]).pipe(sass()).pipe(concat('app.css')).pipe(gulp.dest('public/css'));
});

gulp.task('js', function() {
    return browserify({
        entries: ['./app/app.js'],
        paths: ['./node_modules', './app/']
    })
        .bundle()
        .pipe(source('app.js'))
        .pipe(buffer())
        .pipe(gulpif(argv.production, uglify()))
        .pipe(gulp.dest('./public/js'));
});

gulp.task('wysiwyg', function() {
    return gulp.src('./node_modules/summernote/dist/summernote.min.js')
        .pipe(concat('wysiwyg.js'))
        .pipe(gulp.dest('public/js'));
});

gulp.task('bust', function() {
    return gulp.src('./public/index.php').pipe(bust({ type: 'timestamp' })).pipe(gulp.dest('./public/'));
});

gulp.task('default', function() {
    return gulp.start(['images', 'fonts', 'html', 'sass', 'js', 'wysiwyg', 'bust']);
});

gulp.task('basic', function() {
    return gulp.start(['html', 'sass', 'js', 'bust']);
});

gulp.task('watch', function() {
    gulp.start(['default']);

    gulp.watch('assets/styles/**/*.scss', {cwd: './'}, ['sass']);
    gulp.watch('assets/images/**/*.*', {cwd: './'}, ['images']);
    gulp.watch('assets/fonts/**/*.*', {cwd: './'}, ['fonts']);
    gulp.watch('app/**/*.html', {cwd: './'}, ['html']);
    gulp.watch('app/**/*.js', {cwd: './'}, ['js']);
});

Answer 1

I have done this previously with Webpack, where it is quite easy with the babel-loader.

I am afraid that browserify by its own wouldn't be able to transpile all that ES6 syntax... but someone has created babelify for those purposes!

Using babelify you could do something similar to:

gulp.task('js', function() {
return browserify({
    entries: ['./app/app.js'],
    paths: ['./node_modules', './app/']
})
    .transform(babelify, {
        global: true,
        presets: ["es2015"]
     })
    .bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulpif(argv.production, uglify()))
    .pipe(gulp.dest('./public/js'));
});

We need to use the global flag in order to force the transforms of browserify to go through the node_modules. (There are other options such as only if we want only few node_modules to be transformed. (You could also add more plugins and presets, but thats up to you and your configuration for the transformation with babel.