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.
Table of Contents generated with DocToc
Enabling sourcemaps and related postsThe traceur runtime exposed here so it can be included in the bundle via:
browserify.add(es6ify.runtime)
The runtime is quite large and not needed for all ES6 features and therefore not added to the bundle by default. See this comment for details.
Allows to override traceur compiler defaults.
In order to support async functions (async
/await
) do:
es6ify.traceurOverrides = { asyncFunctions: true }
The es6ify transform to be used with browserify.
browserify().transform(es6ify)
function that returns a TransformStream
when called with a file
Compile function, exposed to be used from other libraries, not needed when using es6ify as a transform.
Name Type Descriptionfile
string
name of the file that is being compiled to ES5
src
string
source of the file being compiled to ES5
compiled source
Configurable es6ify transform function that allows specifying the filePattern
of files to be compiled.
filePattern
string <optional>
(default: `/.js$/) pattern of files that will be es6ified
function that returns a TransformStream
when called with a file
generated with docme
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));
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));
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.
var log = msg => console.log(msg);
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; } }
function logDeveloper(name, codes = 'JavaScript', livesIn = 'USA') { console.log('name: %s, codes: %s, lives in: %s', name, codes, livesIn); };
var [a, [b], c, d] = ['hello', [', ', 'junk'], ['world']]; console.log(a + b + c); // hello, world
for (let element of [1, 2, 3]) { console.log('element:', element); }
var object = { prop: 42, // No need for function method() { return this.prop; } };
var foo = 'foo'; var bar = 'bar'; var obj = { foo, bar };
var x = 5, y = 10; console.log(`${x} + ${y} = ${ x + y}`) // 5 + 10 = 15
function printList(listname, ...items) { console.log('list %s has the following items', listname); items.forEach(function (item) { console.log(item); }); };
function add(x, y) { console.log('%d + %d = %d', x, y, x + y); } var numbers = [5, 10] add(...numbers); // 5 + 10 = 15 };
// 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, ... }
{ let tmp = 5; } console.log(typeof tmp === 'undefined'); // true
Imports and exports are converted to commonjs
style require
and module.exports
statements to seamlessly integrate with browserify.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4