browserify v2 transform to compile JavaScript.next (ES6) to JavaScript.current (ES5) on the fly

browserify()
  .add(es6ify.runtime)
  .transform(es6ify)
  .require(require.resolve('./src/main.js'), { entry: true })
  .bundle({ debug: true })
  .pipe(fs.createWriteStream(bundlePath));

Find the full version of this example here.

npm install es6ify

Try it live

Table of Contents generated with DocToc

• API
  • es6ify
  • es6ify.configure(filePattern : Regex)
  • es6ify.runtime
• Caching
• Source Maps
• Supported ES6 features
  • arrayComprehension
  • arrowFunctions
  • classes
  • defaultParameters
  • destructuring
  • forOf
  • propertyMethods
  • propertyNameShorthand
  • templateLiterals
  • restParameters
  • spread
  • generatorComprehension
  • generators
  • blockBinding
• Unsupported ES6 Features
  • modules

Returns a transform with default file pattern and standard error stream.

browserify()
  .add(require('es6ify').runtime)
  .transform(require('es6ify'))
  .require(require.resolve('./src/main.js'), { entry: true })
  .bundle({ debug: true })
  .pipe(fs.createWriteStream(bundlePath));

Returns a es6 transform with custom file pattern and standard error stream.

The default file pattern includes all JavaScript files, but you may override it in order to only transform files coming from a certain directory, with a specific file name and/or extension, etc.

By configuring the regex to exclude ES5 files, you can optimize the performance of the transform. However transforming ES5 JavaScript will work since it is a subset of ES6.

browserify()
  .add(require('es6ify').runtime)
   // compile all .js files except the ones coming from node_modules
  .transform(require('es6ify').configure(/^(?!.*node_modules)+.+\.js$/))
  .require(require.resolve('./src/main.js'), { entry: true })
  .bundle({ debug: true })
  .pipe(fs.createWriteStream(bundlePath));

Returns runtime necessary to support ES6 features and therefore needs to be added to the bundle like in the example above.

When es6ify is run on a development server to help generate the browserify bundle on the fly, it makes sense to only recompile ES6 files that changed. Therefore es6ify caches previously compiled files and just pulls them from there if no changes were made to the file.

es6ify instructs the traceur transpiler to generate source maps. It then inlines all original sources and adds the resulting source map base64 encoded to the bottom of the transformed content. This allows debugging the original ES6 source when using the debug flag with browserify.

If the debug flag is not set, these source maps will be removed by browserify and thus will not be contained inside your production bundle.

example

example

example

example

example

example

example

example

The block binding let is implemented in ES5 via try/catch blocks which may affect performance.

I recommend to use require instead since that integrates better with browserify.

If you want to use ES6 modules, you need to compile all files that use them into one file since inlining them is the only way to make this work in ES5. You can then browserify.add that file and therefore wouldn't need es6ify.

Compiling a single file makes caching impossible and will lead to longer bundle times when used on the development server to bundle on the fly.