babelify

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.

README

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"));

Options

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({
  // Optional ignore regex - if any filenames **do** match this regex then they
  // aren't compiled
  ignore: /regex/,

  // Optional only regex - if any filenames **don't** match this regex then they
  // aren't compiled
  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; // => { code, map, ast, metadata }
    });
  }
});

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"] }]]
  }
}