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.
-
The
babelnpm package no longer exists. Instead, Babel has been split into multiple packages:-
babel-cli, which contains the
babelcommand line interface -
babel-core, which contains the Node API and
requirehook -
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 yourpackage.json, and thennpm uninstallthem. -
babel-cli, which contains the
-
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-devBut even after installing a preset, you need to tell Babel to use it.
-
.babelrcis kinda a necessity now. Since Babel no longer uses ES2015 and React transforms by default, therequirehook used bygulpfile.babel.jsand mocha will not actually do anything. Fix this by creating a.babelrcin your project directory:{ "presets": ["es2015", "react"] } -
Stage 0 is now a separate preset, not an option. Previously, you enabled ES7 features like decorators and
async/awaitby passing--stage 0to babel. Now, you install and load thebabel-preset-stage-0package. -
The
--external-helpersoption is now a plugin. To avoid repeated inclusion of Babel’s helper functions, you’ll now need to install and apply thebabel-plugin-transform-runtimepackage, and then require thebabel-runtimepackage 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.
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
- The Complete Guide to ES6 with Babel 6
- Learn Raw React
- Webpack Made Simple: Building ES6/LESS with Autorefresh
Any recommendations on aliasing native Promise to something like BlueBird in Babel 6? This was an ongoing thread in Babel 5 and not sure if the techniques have changed with Babel 6?
https://github.com/babel/babel-loader/issues/23#issuecomment-151498013
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.
Very timely, and helpful write up. Thanks!
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`.”);
*shows
Try installing
babel-cliinstead ofbabel“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!
Otherwise a good article, BTW. 🙂
Good point. I’ll update the guide to mention uninstalling instead of deleting. Thanks!
“Old JavaScript” is not boring.
Why is webpack preferred over jspm/systemjs?
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.
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.
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!
It’s worth mentioning Stage 0 is not required to access decorators or async/await as suggested in this article. But Stage 1, however, is.
Good man James! Thanks for writing this! Really helped me out.
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?