liveBook · Manning

Babelify

As explained in Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond

A Browserify transform that applies Babel transpilation to JavaScript files during bundling.

Need to bundle files that use ES2015 modules? babelify is a Browserify transform: it transpiles each file before Browserify processes it. Babel handles the translation; Browserify handles bundling the modules. section 3.4

Configure Babel in a .babelrc file, then tell Browserify to use babelify. Set an entry file that imports your modules and choose an output path for the bundle. section 3.5

$ browserify src/index.js --transform babelify --outfile dist/bundle.js
--debug

This command uses src/index.js as the entry point, applies babelify, and writes the bundle to dist/bundle.js. The --debug flag includes source maps. section 3.5

The setup demonstrates an app module exporting an object and an entry file importing it. Babel CLI is not needed for this Browserify-and-babelify workflow. section 3.5

How Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond covers it

How deep it goes
Demonstrates project configuration and a bundling command, without detailing babelify internals.
Examples
Uses an exported module, an importing entry file, and a Browserify command that writes a bundle.
What it assumes
Assumes familiarity with Browserify’s role and a Babel configuration; demonstrates the project setup.
What you can do after
Operate a Browserify command that applies babelify and writes a transpiled bundle with source maps.
How it connects
Connects Babel transpilation with Browserify bundling and ES2015 modules.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond. The section links point to the parts of the book it draws on.