Over the last year, Babel has become the go-to tool for transforming ES2015 and JSX into boring old JavaScript. Which makes it kinda hilarious that by default, Babel 6 no longer transforms either:

james$ echo "export function component() { return <div /> }" | babel
SyntaxError: unknown: Unexpected token (1:37)
> 1 | export function component() { return <div /> }
    |                                      ^

So what happened? Well, in the brave new world of Babel 6, you need to choose which transforms to run. This promotes separation of concerns, a decidedly good thing. It also tends to promote a “shit shit” moment when suddenly nothing works.

But luckily, this doesn’t mean that you’ll now need to comb through the bug trackers and documentation for seemingly every part of your build system. Instead, just follow these five guides to get your app, libraries, tasks and tests modernised in no time!

What’s changed in Babel 6?

If you’re already familiar with Babel, the first thing you’ll want to do is learn what has changed. In particular, you’ll want to get familiar with the new package structure, the new concept of presets, and the .babelrc file which you now can’t do without. A two minute skim through The Six Things You Need To Know About Babel 6 will sort you out.

Using Babel 6

Once you’ve managed to unlearn most what you knew about Babel 5, you might need a little help to learn Babel 6:

• Transforming NPM Packages with the Babel 6 CLI
• Using ES6 in the Browser with Webpack’s babel-loader
• Testing with Mocha and Babel’s register script
• Running tasks with gulpfile.babel.js

Keeping up to date

Here’s a little story: while writing these guides, I learned that the require hook in babel-core used by Gulp and Mocha is already set to be deprecated (it will now be placed in a new package called babel-require). This is despite the fact that Babel 6 already introduced a new way of doing this only a few weeks ago.

Staying up to date in our JavaScript-driven world can be tough — and that’s why I provide my Newsletter! Subscribe to receive my latest guides to writing small apps with React. And in return for your e-mail, you’ll immediately receive three bonus print-optimised PDF cheatsheets – on React (see preview), ES6 and JavaScript promises. All for free!

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 james@jamesknelson.com. I’m looking forward to hearing from you!

Example Projects

• webpack-black-triangle: A minimal boilerplate using Babel and Webpack
• Unicorn Standard Starter Kit: A React boilerplate using Babel and Webpack
• react-pacomo: An NPM library compiled and tested with Babel

Read More

• ES6 – The Bits You’ll Actually Use
• Webpack Made Simple: Building ES6/LESS with Autorefresh

Relevant Babel Documentation

• Setting up Babel 6 at the Babel Blog
• .babelrc
• Command Line Interface
• Require Hook
• Polyfill