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!