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",

"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 # 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

The node API for babel (removed from the config) has been moved to babel-core babel-core and babel-loader were just updated Use Babel presets* (read further about them)

Webpack config

Babel 5:

Babel 6:

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