How to set up babel 7 and nodemon with Node Js

What is babel and why do we need it.

Babel is a tool that is used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript so that older browsers and environment will be able to understand your code.

Javascript has really evolved a lot within the past few years bringing in new syntax and features that are not fully supported in older browsers and environment. So for us to be able to use this new syntax and features in our development, we need to find a way to make this older browser understand those new syntaxes.
This is where babel comes in. Babel takes our code which is written in a higher standard and transpile it to a standard that older browsers will understand.

In this guide, I will be showing you how to set up a node project with Babel 7 which is the latest version of Babel, so that you can use modern javascript syntax.

Project Setup

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

 npm int

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 environement. 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 directotry of our application and adding the following code to it.

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

Adding scripts to package.json

We finally need to add a command to our package.json for starting our application.

"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/sccofield/my-app/issues"
  },
  "dependencies": {
  },
  "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.