Quick guide: how to update Babel 5.x -> 6.x
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
- 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:
...,
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']
}
}
],
},
...- 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 👍.
