babelify
Babel browserify transform
Installation
$ npm install --save-dev babelify
Usage
CLI
$ browserify script.js -t babelify --outfile bundle.js
Node
var fs = require("fs");
var browserify = require("browserify");
var babelify = require("babelify");
browserify("./script.js", { debug: true })
.transform(babelify)
.bundle()
.on("error", function (err) { console.log("Error : " + err.message); })
.pipe(fs.createWriteStream("bundle.js"));
Selected options are discussed below. See the babel docs for the complete list.
browserify().transform(babelify.configure({
presets: ["es2015"]
}))
$ browserify -d -e script.js -t [ babelify --presets es2015 ]
Customising extensions
By default all files with the extensions .js
, .es
, .es6
and .jsx
are compiled.
You can change this by passing an array of extensions.
NOTE: This will override the default ones so if you want to use any of them
you have to add them back.
browserify().transform(babelify.configure({
extensions: [".babel"]
}))
$ browserify -d -e script.js -t [ babelify --extensions .babel ]
NOTE: Keep in mind that to get browserify to find files with extensions it doesn't include by default, you may also need to configure them there. For example, to have require('./script')
in a browserified file resolve to a ./script.babel
file, you'd need to configure browserify to also look for the .babel
extension. See the extensions
option documentation.
Relative source maps
Browserify passes an absolute path so there's no way to determine what folder
it's relative to. You can pass a relative path that'll be removed from the
absolute path with the sourceMapRelative
option.
browserify().transform(babelify.configure({
sourceMapRelative: "/Users/sebastian/Projects/my-cool-website/assets"
}))
$ browserify -d -e script.js -t [ babelify --sourceMapRelative . ]
Additional options
browserify().transform(babelify.configure({
ignore: /regex/,
only: /my_es6_folder/
}))
$ browserify -d -e script.js -t [ babelify --ignore regex --only my_es6_folder ]
Babel result: metadata and others
Babelify emits a babelify
event with Babel's full result object as the first
argument, and the filename as the second. Browserify doesn't pass-through the
events emitted by a transform, so it's necessary to get a reference to the
transform instance before you can attach a listener for the event:
var b = browserify().transform(babelify);
b.on('transform', function(tr) {
if (tr instanceof babelify) {
tr.once('babelify', function(result, filename) {
result;
});
}
});
FAQ
Why aren't files in node_modules
being transformed?
This is default browserify behaviour and can not be overriden. A possible solution is to add:
{
"browserify": {
"transform": ["babelify"]
}
}
to the root of all your modules package.json
that you want to be transformed. If you'd like to
specify options then you can use:
{
"browserify": {
"transform": [["babelify", { "presets": ["es2015"] }]]
}
}