The Six Things You Need To Know About Babel 6

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 Complete Guide to ES6 with Babel 6 will walk you through the practical details; including the CLI, Webpack, Mocha and Gulp.

  1. 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, make sure to remove any previous Babel packages like babel, babel-core, etc. from your package.json, and then npm uninstall them.

  2. 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.

  3. 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.

  4. .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"]
    }
    
  5. Stage 0 is now a separate preset, not an option. Previously, you enabled ES7 features like decorators and async/await by passing --stage 0 to babel. Now, you install and load the babel-preset-stage-0 package.

  6. 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 Complete Guide to ES6 with Babel 6 as a separate series — covering the CLI, Webpack, Gulp and Mocha.

But everything moves so fast. How will I keep up to date?

With ES2015 already standardised, there is no argument that Babel is a necessary tool for most JavaScript developers. But does the thought of integrating an entire platform for transforming JavaScript into every new project worry you a little bit? The speed at which the JavaScript ecosystem is growing can feel demoralising. But luckily, it doesn’t have to be that way!

The thing is that for most projects, scaling is a problem you’d like to have. And until you’re at that point, you’ll be more productive by focusing on a few important tools than trying to grasp everything.

One way to keep focussed on the tools which count is to join my Newsletter. You’ll receive one e-mail every couple weeks with information tailored to small apps using 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!

Read More

Related Projects

Share on Facebook0Tweet about this on TwitterShare on LinkedIn8Share on Reddit14

17 Comments The Six Things You Need To Know About Babel 6

    1. James K Nelson

      I’ve never used anything except native or polyfilled ES6 Promises. But I did notice a section in babel-loader’s README on doing so. It sounds like you’ve probably already looked into this, but if not it might be worth a look.

      Reply
  1. Francis Kim

    Just tried an install of babel – it did create some files but cli.js show’s the following 😉

    console.error(“The CLI has been moved into the package `babel-cli`.”);

    Reply
  2. m_gol

    “To avoid accidental conflicts, please delete your previous packages from your node_modules directories before installing the new ones.”

    That’s a bad idea. If you use npm 3 (which is included in Node 5 by default) that will leave your dependency tree in a broken state. If you think a regular `npm install babel-core@6` won’t suffice, you should invoke `npm uninstall babel-core` first and not just remove `node_modules/babel-core`. Optionally you can delete the whole `node_modules` directory but never just a single directory inside!

    Reply
  3. maxi

    just trying to use babel to transform ES6 files, then it echo my the same thing. Until I read this article then I realize that all other tutorials are deprecated.

    Reply
  4. thun

    I’m not sure about #6. You should be using either babel-polyfill or babel-runtime. They are mutually exclusive—unless of course you know what you are doing. But they are essentially the same thing. These are just helpers. babel-polyfill achieves the same goal by mutating globals whereas babel-runtime does so modularly. Unless you are developing a library, I’d recommend you use the polyfill. On another note, exter-helpers plugin is there to reduce helper method duplication in babel-polyfill—NOT babel-transform. Babel transform reduces helper method duplication internally. So a plugin is not needed.

    Reply
  5. Norman

    Wow! thank you JAMES K NELSON! very helpful notes, i have felling like a dumb looking in babeljs.io why i can’t make it works. Happy new year dude and good job!

    Reply
  6. César

    I’m trying to render my website on oldies IE with babel-preset-es2015-loose. I’ve installed it using npm and added to the babel presets of package.json.
    For some reason I’m still unable to watch the site. Althoug it’s perfect on Chrome, Firefox and IE Edge.
    Any idea?

    Reply

Leave a Reply

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