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

How to update (in short)

package.json (npm modules dependencies)

“babel”: “^5.0.0”,
“babel-core”: “^5.0.0”,
“babel-loader”: “^5.0.0”
"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

Webpack config

...,
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
}
}
],
},
...
...,
module: {
loaders: [
{
test: /\.js$/,
loader: ‘babel’,
query: {
// https://github.com/babel/babel-loader#options
cacheDirectory: true,
presets: ['es2015', 'stage-2']
}
}
],
},
...

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

"babel-polyfill": "^6.0.0"
require('babel-polyfill');

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

require("babel/register");
require("babel-core/register");

Description

Profit

Links

--

--

--

JavaScript, HTML and CSS enthusiast. Author of http://blog.gospodarets.com/. Enjoying life.

Love podcasts or audiobooks? Learn on the go with our new app.

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
Serg Gospodarets

Serg Gospodarets

JavaScript, HTML and CSS enthusiast. Author of http://blog.gospodarets.com/. Enjoying life.

More from Medium

JS學習筆記(1)

No-Op Render Logic for React Components: Some Options

Deploying a react package to NPM

React Comments and @ Mentions