What is babelify?
Babelify is a browserify transform for Babel, which allows you to use Babel to transpile your JavaScript files when bundling them with Browserify. This enables you to use the latest JavaScript features and syntax in your code, and have them transpiled to a version of JavaScript that is compatible with older browsers.
What are babelify's main functionalities?
Transpile ES6 to ES5
This feature allows you to transpile modern JavaScript (ES6) to ES5, making it compatible with older browsers. The code sample demonstrates how to use Babelify with Browserify to transform a source file using the '@babel/preset-env' preset.
const browserify = require('browserify');
const babelify = require('babelify');
browserify('./src/app.js')
.transform(babelify, { presets: ['@babel/preset-env'] })
.bundle()
.pipe(process.stdout);
Use JSX with React
This feature allows you to use JSX syntax with React. The code sample shows how to configure Babelify to transform a JSX file using the '@babel/preset-react' preset.
const browserify = require('browserify');
const babelify = require('babelify');
browserify('./src/app.jsx')
.transform(babelify, { presets: ['@babel/preset-react'] })
.bundle()
.pipe(process.stdout);
Custom Babel Plugins
This feature allows you to use custom Babel plugins. The code sample demonstrates how to use the '@babel/plugin-transform-arrow-functions' plugin to transform arrow functions in your code.
const browserify = require('browserify');
const babelify = require('babelify');
browserify('./src/app.js')
.transform(babelify, { plugins: ['@babel/plugin-transform-arrow-functions'] })
.bundle()
.pipe(process.stdout);
Other packages similar to babelify
babel-loader
Babel-loader is a webpack loader that allows you to transpile JavaScript files using Babel and webpack. It is similar to Babelify in that it uses Babel to transpile code, but it is designed to work with webpack instead of Browserify.
rollup-plugin-babel
Rollup-plugin-babel is a Rollup plugin that allows you to use Babel to transpile your JavaScript files when bundling them with Rollup. It provides similar functionality to Babelify but is designed to work with Rollup instead of Browserify.
gulp-babel
Gulp-babel is a Gulp plugin that allows you to use Babel to transpile your JavaScript files in a Gulp build pipeline. It offers similar functionality to Babelify but is intended for use with Gulp instead of Browserify.
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"] }]]
}
}