The Complete Guide to ES6 with Babel 6

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:

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!

I will send you useful articles, cheatsheets and code.

I won't send you useless inbox filler. No spam, ever.
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 james@jamesknelson.com. I’m looking forward to hearing from you!

Example Projects

Read More

Relevant Babel Documentation

Share on Facebook3Tweet about this on TwitterShare on LinkedIn1Share on Reddit0

5 Comments The Complete Guide to ES6 with Babel 6

  1. aniket

    Hey,

    Nice tutorials introducing Babel 6!

    Can you please help me? I don’t want “use strict”; which babel adds by default I’m using it for function scope and don’t want extra one at global scope.

    Reply
    1. Brian Dukes

      The “use strict” that is added comes from the babel-plugin-transform-es2015-modules-commonjs plugin. There isn’t currently a way to request a preset (e.g. babel-preset-es2015) but exclude one of the plugins that it includes. So, you can still add a dependency on that npm package, but you’ll need to list all of the other plugins in your .babelrc, instead of specifying the preset directly (look at https://github.com/babel/babel/blob/master/packages/babel-preset-es2015/index.js for the list of them all plus their config).

      Reply
  2. maxi

    thank you for your up-to-date information.

    If I am using babel 6 to transplie ES2015 for browser, do I need to hook it up with requirejs? or does babel ES2015 handle import/export by default?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *