Babel 6 Cheat Sheet
Babel 6 is a radical change. Here’s what you need to know in two minutes.
Babel is Multiple Packages
In previous Babel versions, you’d simply install babel. Now you install separate packages:
- babel-core — The core compiler. It transforms nothing out of the box. You need plugins for that (more on this below).
- babel-cli — The command line interface. It includes three handy command line tools: babel-doctor, which checks your config, babel-node, which is useful for running babel against your Node scripts in development, and babel, which is the core CLI.
You Need Plugins
Babel 6 does nothing by default. You add plugins to make it do what you want. The plugins are very granular. For example, there are plugins for very specific portions ES6. This means to get the ES6 to ES5 behavior of previous versions, you have to install a long list of plugins. That’s no fun. So most people will use presets.
Use Presets
Presets group plugins together. babel-preset-es2015 gives you the core ES6 to ES5 compilation behavior of Babel 5. babel-preset-react compiles JSX.
You Need .babelrc
This is Babel’s configuration file. Since Babel 6 does nothing by default, you need to tell Babel what presets to use by adding them to an array of presets in this file.
{
"presets": ["es2015", "react"]
}Be Sure to Polyfill
Although Babel transpiles to ES5, some ES6 features like Array.from, set, map, promise, generator functions, and many others can’t be transpiled. So if you use these, they must be polyfilled. There are three ways to handle this:
- babel-polyfill
- babel-runtime
- Do it yourself. Pull in specific polyfills as needed.
Both babel-polyfill and babel-runtime serve the same purpose: They polyfill ES6 features that Babel can’t transpile. But, they do so in different ways. babel-polyfill uses globals, so you just import it at the top of your application’s entry point. In contrast, babel-runtime doesn’t use globals. So you add it to the individual modules that need it. If you use babel-runtime approach, you must pair it with babel-plugin-transform-runtime which will work with babel-runtime to polyfill your code without polluting globals.
So should you use babel-polyfill or babel-runtime? Use babel-polyfill if you’re writing your own app and aren’t too worried about page size (more on this in a moment). Use babel-runtime if you’re writing a library (since you need to avoid polluting globals in that case).
Finally, what about option #3? You only need to polyfill if you’re using ES6 features that can’t be transpiled. So consider ignoring polyfilling initially and add it as needed. babel-polyfill weights about 50k minified, so you can typically save a lot of bytes by only pulling in the polyfills you need. For example, if you use Object.assign, you can use object-assign off npm, which only weighs about 1k.
Example App
Looking for an example app that uses Babel 6? Check out React-Slingshot.
Cory House is the author of “Building Applications with React and Flux”, “Clean Code: Writing Code for Humans” and other courses on Pluralsight. He trains software developers internationally on software practices like front-end development and clean coding, is a Microsoft MVP, and founder of outlierdeveloper.com.
