JSFeeds: jamesknelson.com - The Six Things You Need To Know About Babel 6

Monday, 9 November, 2015 UTC

The Six Things You Need To Know About Babel 6

Summary

Over the last year, Babel has become the go-to tool for transforming ES2015 and JSX into boring old JavaScript. But seemingly overnight, Babel 6 changed everything. The babel package was deprecated, running babel doesn’t actually transform ES2015 to ES5, and the old docs have basically disappeared.

But Don’t Panic! To get you up to speed, I’ve put together a brief list of the six most important changes. And if you need a little more help, my Six Recipes for Babel 6 will walk you through the practical details; including the CLI, Webpack, Mocha and Gulp.

The babel npm package no longer exists. Instead, Babel has been split into multiple packages:
- babel-cli, which contains the babel command line interface
- babel-core, which contains the Node API and require hook
- babel-polyfill, which when required, sets you up with a full ES2015-ish environment
To avoid accidental conflicts, please delete your previous packages from your node_modules directories before installing the new ones.
Every single transform is now a plugin, including ES2015 and JSX. And as a result, nothing happens by default – so you’ll need to install the correct plugins. Actually, ES2015 consists of about 20 plugins. You don’t want to install each of these manually, which is why Babel has added presets.
Babel 6 adds presets, or collections of plugins. And it provides two presets for the functionality provided by default in Babel 5:
```
  npm install babel-preset-es2015 babel-preset-react --save-dev
```
But even after installing a preset, you need to tell Babel to use it.
.babelrc is kinda a necessity now. Since Babel no longer uses ES2015 and React transforms by default, the require hook used by gulpfile.babel.js and mocha will not actually do anything. Fix this by creating a .babelrc in your project directory:
```
{
  "presets": ["es2015", "react"]
}
```
Stage 0 is now a separate preset, not an option. Previously, you enabled ES7 features like decorators and aysnc/await by passing --stage 0 to babel. Now, you install and load the babel-preset-stage-0 package.
The --external-helpers option is now a plugin. To avoid repeated inclusion of Babel’s helper functions, you’ll now need to install and apply the babel-plugin-transform-runtime package, and then require the babel-runtime package within your code (yes, even if you’re using the polyfill).

And there you have it, you’re now up to speed on Babel 6’s packages, plugins, presets and options! But what about Webpack? What about passing presets via the CLI? I’ve tried to keep this list as succinct as possible, and to do so I’ve kept my Six Recipes for Babel 6 as a separate series — covering the CLI, Webpack, Gulp and Mocha.

Given that you probably won’t want to read the entire thing in one shot, I’ve also put together a free six day e-mail course — exclusive to my Newsletter subscribers. To get started, just enter your e-mail below. And in return for your e-mail, you’ll also immediately receive three bonus PDF cheatsheets – on ES6, JavaScript promises and React (see preview).

I will send you useful articles, cheatsheets and code.

I won't send you useless inbox filler. No spam, ever.

Thanks! Please check your email for the link to your cheatsheets.

There was an error submitting your subscription. Please try again.

First Name

Email Address

I'd like to receive the free email course. Subscribe for free Unsubscribe at any time.

One more thing – I love hearing your questions, offers and opinions. If you have something to say, leave a comment or send me an e-mail at [email protected]. I’m looking forward to hearing from you!

Six Recipes for Babel 6
Learn Raw React
Webpack Made Simple: Building ES6/LESS with Autorefresh

Related Projects

See Babel and Webpack in action in the Unicorn Standard Starter Kit

The post The Six Things You Need To Know About Babel 6 appeared first on James K Nelson.

... more @ jamesknelson.com

jamesknelson.com