Setup Nodemon with Babel

Nodemon #

Sometimes, we need to experiment with Node.js, and fast development feedback is really good to have. We can achieve this by using Nodemon to monitor our project directory and automatically restart the Node.js application when it detects any change.

Babel #

Babel is a tool that turns modern JavaScript (ES6+) into plain old ES5, making it compatible with any browser, even the old ones. It brings all the fancy new features of ES6, like classes, fat arrows, and multiline strings. Additionally, it can be used to transpile TypeScript into regular JavaScript for browser compatibility if needed.

Project setup #

Create directory for our project and run the following command to initialize npm project.

npm init

This will prompt you to initialize your project and generate a package.json file for you.

Next step, create index.js file to be our entry point. At this point, our directory should look like this.

project-folder
|  index.js
|  package.json

Installing babel #

Next, we proceed with 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 handle different aspects of Babel's functionality, such as overall functionality, command-line usage, support for the latest JavaScript features, and compatibility with Node.js.

Installing nodemon #

Aside from incorporating Babel packages, I also prefer utilizing nodemon in my development environment. Nodemon is a helpful tool for node.js applications, as it automatically restarts the node application upon detecting file changes in the directory. To add nodemon to our project, we can use the following command.

npm install --save-dev nodemon

Add babel configuration file #

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"
  ]
}

Add start script to package.json #

Lastly, we must include a command in our package.json to start our application.

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

Simpy run npm run start to start your application.

Congratulations on reaching this point! You have successfully set up Babel with nodemon, and now you're all set to write modern JavaScript syntax. Happy coding!

Since you've made it this far, sharing this article on your favorite social media network would be highly appreciated 💖!

Published 07 Aug 2023