Babel upgrade from babel 6.x to 7.0

maicmi
maicmi
Sep 6, 2018 · 3 min read

Usually, I build a new project, I use the default value configuration which provided from babel website. When babel 7.0 has been released, I just try in easy way (remove babel-core and install new @babel/core).

Ohhhh….., it is not easy like that.

Anyway, I would like to share how can I upgrade babel from V6.x to V7.0

Step 1 — Edit the “package.json” file

Please see the following previous babel 6.x “package.json” file.

{
"name": "inventory",
"version": "1.0.0",
"main": "server.js",
"license": "MIT",
"scripts": {
"start": "nodemon --exec babel-node server/server.js",
"build": "webpack --config webpack.config.js"
},
"dependencies": {
"bcrypt": "^2.0.1",
"body-parser": "^1.18.2",
"bootstrap": "3.3.7",
"cluster": "^0.7.7",
"crypto": "^1.0.1",
"css-loader": "^0.28.11",
"decode": "^0.3.0",
"express": "^4.16.3",
"express-session": "^1.15.6",
"file-loader": "^1.1.11",
"jquery": "^3.3.1",
"jquery-validation": "^1.17.0",
"jwt-decode": "^2.2.0",
"mongodb": "^3.0.7",
"nodemon": "^1.17.4",
"path": "^0.12.7",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-autocomplete": "^1.8.1",
"react-autosuggest": "^9.3.4",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.3.2",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-s-alert": "^1.4.1",
"react-select": "^1.2.1",
"sha256": "^0.2.0",
"socket.io": "^2.1.1",
"socket.io-client": "^2.1.1",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"uuid": "^3.2.1",
"xlsx": "^0.12.12"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.8.1",
"webpack": "^4.8.2",
"webpack-cli": "^2.1.3",
"whatwg-fetch": "^2.0.4"
}
}

The new “package.json” file for new upgrade from babel 6.x to babel 7.0

{
"name": "library",
"version": "1.0.0",
"main": "server.js",
"license": "MIT",
"scripts": {
"start": "nodemon --exec babel-node server/server.js",
"build": "webpack --config webpack.config.js"
},
"dependencies": {
"@babel/node": "^7.0.0",
"bcrypt": "^3.0.0",
"body-parser": "^1.18.2",
"bootstrap": "3.3.7",
"bootstrap-datepicker": "^1.8.0",
"cluster": "^0.7.7",
"css-loader": "^0.28.11",
"decode": "^0.3.0",
"enzyme": "^3.6.0",
"express": "^4.16.3",
"express-session": "^1.15.6",
"file-loader": "^1.1.11",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"jquery-validation": "^1.17.0",
"jwt-decode": "^2.2.0",
"mongodb": "^3.0.7",
"nodemon": "^1.17.4",
"path": "^0.12.7",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-autocomplete": "^1.8.1",
"react-autosuggest": "^9.3.4",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.3.2",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-s-alert": "^1.4.1",
"react-select": "^1.2.1",
"sha256": "^0.2.0",
"socket.io": "^2.1.1",
"socket.io-client": "^2.1.1",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"uuid": "^3.2.1",
"xlsx": "^0.12.12"
},
"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-function-bind": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-loader": "^8.0.2",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.8.1",
"webpack": "^4.8.2",
"webpack-cli": "^2.1.3",
"whatwg-fetch": "^2.0.4"
},
"author": "",
"description": ""
}

Step 2 — Edit the “.babelrc” file

And the most important step, you should edit “.babelrc” file. In babel 7.0, there is no more “preset-stage-0”. You will add “plugins” to “.babelrc” file rather than “presets”.

The following is “.babelrc” file which you can compare the previous V6 and new V7

“.babelrc” with babel V6

{
"presets": [
"react",
"env",
"stage-0"
]
}

“.babelrc” with babel V7

{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
],
"plugins": [
"@babel/plugin-proposal-function-bind",
"@babel/plugin-proposal-class-properties",
]
}

Final Step — Build and run your project

If you finish editing “package.json” and “.babelrc”, next you can build (in this case I suppose you use webpack). From “package.json” file, you can run

$ yarn run build

Then you can start the project and browse to “localhost:3000”

$ yarn start

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