Set babel and nodemon with node Js

Why we need babel

we use babel to convert the ECMAScript 2015+ into a backward-compatible version of javascript so that older versions of the browser and environment will be able to understand our code.

When we are writing code according to new syntax in development, then we need to find a way to make this older browser understand those new syntaxes. That's why we used babel to compile or convert our code into a compatible version of javascript that every environment can understand.

In this guide, we will know how to setup a babel with node project. so that we can use modern javascript syntax in development.

Project Setup

Create a folder for your project and run the following command.

npm init

This will initialize your project and create a package.json file for you.

For this tutorial, we will be adding an index.js file to the root of the application, and this will be our entry point. Our file directory should look like this now.

your-project-folder
| — index.js
| — package.json

Installing packages

We then go ahead to add some babel packages to our project with the command below.

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

These respectively take care of babels general working, the usage of babel in the command line, the ability to use the newest JS features and the usage of babel with node.

Apart from adding babel packages, I always like to use nodemon in my development environment. nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected. we can add nodemon to our project by using the command below.

npm install --save-dev nodemon

Next, we need to tell babel how to transpile our files by creating a .babelrc file in the root directory of our application and adding the following code to it.

{
  "presets": [
    "@babel/preset-env"
  ]
}

Note: If you don’t want to create .babelrc you also can write this babel configuration in package.json file on babel key.

Adding scripts to package.json

"start": "nodemon --exec babel-node index.js",

Our pacakge.json will look like this now.

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --exec babel-node index.js ",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/therkverma/my-app/issues"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/node": "^7.0.0",
    "@babel/preset-env": "^7.1.6",
    "nodemon": "^1.18.6"
  }
}

Congratulations on getting here. You now have babel 7 properly set up with nodemon and you are ready to write modern Javascript syntax.