Quick guide: how to update Babel 5.x -> 6.x

Serg Gospodarets
Oct 30, 2015 · 2 min read

Recently Babel 6 was released.

One of the main changes in it was performance optimisations. So updating makes big sense.

It appeared to be very easy. I use Webpack + Babel for JS files and here is a quick manual for updating:

How to update (in short)

package.json (npm modules dependencies)

Babel 5:

“babel”: “^5.0.0”,
“babel-core”: “^5.0.0”,
“babel-loader”: “^5.0.0”

Babel 6:

"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
# include presets which you need (one/set of the followings)
"babel-preset-es2015": "^6.0.0", # for ES2015 (a.k.a. ES6)
"babel-preset-react": "^6.0.0", # for React
"babel-preset-stage-2": "^6.0.0" # to replace the "stage" of support option in a Webpack config
  1. The node API for babel (removed from the config) has been moved to babel-core
  2. babel-core and babel-loader were just updated
  3. Use Babel presets* (read further about them)

Webpack config

Babel 5:

...,
module: {
loaders: [
{
test: /\.js$/,
loader: ‘babel’,
query: {
// https://github.com/babel/babel-loader#options
cacheDirectory: true,
// http://babeljs.io/docs/usage/options/
stage: 2// Draft specification
}
}
],
},
...

Babel 6:

...,
module: {
loaders: [
{
test: /\.js$/,
loader: ‘babel’,
query: {
// https://github.com/babel/babel-loader#options
cacheDirectory: true,
presets: ['es2015', 'stage-2']
}
}
],
},
...
  1. stage param to presets: [‘es2015’, ‘stage-2’] (or one/set of the presets in your package.json)

Babel polyfill (adds Promise, Object.values() etc. if not supported)

In package.json add:

"babel-polyfill": "^6.0.0"

In your entry point file for Webpack:

require('babel-polyfill');

Require Hook (Node.js/Grunt/Gulp etc.)

If you want Babel to let you use ES6+ features in NodeJS<4.0 you can easily do it providing in your main file:

Babel 5:

require("babel/register");

Babel 6:

require("babel-core/register");

Description

Presets

Now instead of the stage (of support) param for babel-loader you have to use presets.
So far there are couple official presets- babel-preset-es2015 , babel-preset-react and babel-preset-stage-[0/1/2/3].
In my Webpack config I use presets: [‘es2015’, ‘stage-2’] which are installed as npm-dependencies “babel-preset-es2015” and “babel-preset-stage-2”.

Preset- it’s just a module which imports some plugins from the Babel packages directory. E.g. es2015 just imports a list of plugin which process es6 (es2015) style code.

Profit

As already mentioned, guys did a nice job providing optimisations to Babel 6 and they even applied some of them to Babel 5.

But after updating to version 6 my JS build started to take 20% less time. Imagine how much time it would save for you 👍.

Links

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store