es6ify 
browserify >=v2 transform to compile JavaScript.next (ES6) to
JavaScript.current (ES5) on the fly.
browserify({ debug: true })
.add(es6ify.runtime)
.transform(es6ify)
.require(require.resolve('./src/main.js'), { entry: true })
.bundle()
.pipe(fs.createWriteStream(bundlePath));
Find the full version of this example here.
Installation
npm install es6ify
What You Get
Table of Contents generated with DocToc
Enabling sourcemaps and related posts
- In Chrome or Firefox: enabled by default
- In IE: works in IE11 onward by default
- browserify-sourcemaps
- html5 rocks sourcemaps post
API
generated with docme
Examples
es6ify.configure(filePattern : Regex)
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({ debug: true })
.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()
.pipe(fs.createWriteStream(bundlePath));
es6ify.traceurOverrides
Some features supported by traceur are still experimental: either nonstandard, proposed but not yet standardized, or
just too slow to use for most code. Therefore Traceur disables them by default. They can be enabled by overriding these
options.
For instance to support the async functions (async/await) feature you'd do the following.
var es6ify = require('es6ify');
es6ify.traceurOverrides = { asyncFunctions: true };
browserify({ debug: true })
.add(es6ify.runtime)
.require(require.resolve('./src/main.js'), { entry: true })
.bundle()
.pipe(fs.createWriteStream(bundlePath));
Caching
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.
Source Maps
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.
Supported ES6 features
arrowFunctions
var log = msg => console.log(msg);
classes
class Character {
constructor(x, y, name) {
this.x = x;
this.y = y;
}
attack(character) {
console.log('attacking', character);
}
}
class Monster extends Character {
constructor(x, y, name) {
super(x, y);
this.name = name;
this.health_ = 100;
}
attack(character) {
super.attack(character);
}
get isAlive() { return this.health > 0; }
get health() { return this.health_; }
set health(value) {
if (value < 0) throw new Error('Health must be non-negative.');
this.health_ = value;
}
}
defaultParameters
function logDeveloper(name, codes = 'JavaScript', livesIn = 'USA') {
console.log('name: %s, codes: %s, lives in: %s', name, codes, livesIn);
};
destructuring
var [a, [b], c, d] = ['hello', [', ', 'junk'], ['world']];
console.log(a + b + c); // hello, world
forOf
for (let element of [1, 2, 3]) {
console.log('element:', element);
}
propertyMethods
var object = {
prop: 42,
// No need for function
method() {
return this.prop;
}
};
propertyNameShorthand
var foo = 'foo';
var bar = 'bar';
var obj = { foo, bar };
templateLiterals
var x = 5, y = 10;
console.log(`${x} + ${y} = ${ x + y}`)
// 5 + 10 = 15
restParameters
function printList(listname, ...items) {
console.log('list %s has the following items', listname);
items.forEach(function (item) { console.log(item); });
};
spread
function add(x, y) {
console.log('%d + %d = %d', x, y, x + y);
}
var numbers = [5, 10]
add(...numbers);
// 5 + 10 = 15
};
generators
// A binary tree class.
function Tree(left, label, right) {
this.left = left;
this.label = label;
this.right = right;
}
// A recursive generator that iterates the Tree labels in-order.
function* inorder(t) {
if (t) {
yield* inorder(t.left);
yield t.label;
yield* inorder(t.right);
}
}
// Make a tree
function make(array) {
// Leaf node:
if (array.length == 1) return new Tree(null, array[0], null);
return new Tree(make(array[0]), array[1], make(array[2]));
}
let tree = make([[['a'], 'b', ['c']], 'd', [['e'], 'f', ['g']]]);
console.log('generating tree labels in order:');
// Iterate over it
for (let node of inorder(tree)) {
console.log(node); // a, b, c, d, ...
}
block scoping
{
let tmp = 5;
}
console.log(typeof tmp === 'undefined'); // true
modules
Imports and exports are converted to commonjs style require and module.exports statements to seamlessly integrate
with browserify.