Babel upgrade from babel 6.x to 7.0
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 buildThen you can start the project and browse to “localhost:3000”
$ yarn start