Rollup, Gulp, and Babel (ES6) in 1-Minute

Installation

Start by installing Babel, Gulp, Gulp File, Rollup, Rollup Babel, and a couple of presets:

npm i -D babel-core gulp gulp-file rollup rollup-plugin-babel babel-preset-es2015 babel-preset-es2015-rollup

Configuration

Configure Babel (and Gulp) to use the es2015 preset in your .babelrc:

{
  "presets": ["es2015"]
}

Then in your gulpfile.bable.js, tell Rollup to use the rollup-plugin-babel and ignore the global .babelrc settings.

rollup({
    entry: 'app.js',
    plugins: [
      babel({
        presets: [
          [
            "es2015", {
              "modules": false
            }
          ]
        ],
        babelrc: false,
        exclude: 'node_modules/**'
      })
    ]
  });

Build

Putting it all together, you’ll then generate the bundle and tell gulp to write the file to filesystem.

import gulp from 'gulp';
import file from 'gulp-file';
import { rollup } from 'rollup';
import babel from 'rollup-plugin-babel';

gulp.task('build', function() {
  return rollup({
    entry: 'app.js',
    plugins: [
      babel({
        presets: [
          [
            "es2015", {
              "modules": false
            }
          ]
        ],
        babelrc: false,
        exclude: 'node_modules/**'
      })
    ]
  })
  .then(bundle => {
    return bundle.generate({
      format: 'umd',
      moduleName: 'myModuleName'
    }
  })
  .then(gen => {
    return file('app.js', gen.code, {src: true})
      .pipe(gulp.dest('dist/'))
  });
});

Closing

I spent time going between the various project and plugin docs in order to figure out a working solution. It’s possible that I left out a step.

If you follow these instructions and find that it doesn’t work for you, please let me know in the comments below. You can also find me on GitHub @AndrewHenderson

Lastly, if this post helped you, please be sure to recommend it by clicking the green heart icon below!