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
Table of Contents generated with DocToc
- API
- es6ify
- es6ify.configure(filePattern : Regex)
- es6ify.runtime
- Caching
- Source Maps
- Supported ES6 features
- Unsupported ES6 Features
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.
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.