Using Babel and Other Dependencies in Node.js

Installing the dependencies you need to get your work done

This article will help you grasp different concepts behind Node.js and will empower you to create production ready applications.

Node.js comes very lightweight by itself. You need to install the dependencies you need to get your work done. These dependencies are known as modules. These modules are found on the npm website.

There are a couple of ways to install modules.

1. Using the package.json file.

You can add your module name and version as a dependency in the package.json file.

Once you have the module mentioned in package.json. Just type npm install in the terminal.

As seen in the image, the module moment got installed in node_modules.

Let us see an example of using moment by pasting the following code in a new file.

First import the module and call the format function to get the timestamp.

var moment = require('moment');
console.log(moment().format());

Let us run the file now.

You can see the output in the image.

2. Using npm install command.

A more simple way to install it, is to use the npm install command as below:

npm install <module-name> --save
or
npm i <module-name> --save

You can either specify both the module name and the version you want to install or just the module name. In the latter case, the latest version available will be installed. The — save parameter will add the module spec to the package.json file.

Let’s install a very popular utility library — Lodash.

Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.

Check the package.json file after installing Lodash. You should see Lodash in your dependency list.

Create a new file and copy the code below:

var _ = require('lodash');
var array = [1, 2, 3];
_.reverse(array);
console.log(array);

Try running the file and see the result. We could easily reverse the array using the Lodash reverse function.

Now that we’ve seen how to install modules and use them, let’s configure babel.js for our project.

You can install babel-core and preset-env by following command:

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

Please note that we use — save-dev instead of — save. This refers to development dependencies. The present-env will install major plugins. Or you can just install the presets and plugins you want to use specifically.

We need Babel core , Babel polyfill and Babel register to make our ES6 code work. You can install all of them using npm install commands or you can just add them to devDependencies as shown below.

"devDependencies": {
   "@babel/core": "^7.2.2",
   "@babel/polyfill": "^7.2.5",
   "@babel/preset-env": "^7.2.3",
   "@babel/register": "^7.0.0"
}

Plugins · Babel

Once you’ve installed all the dependencies, you have to create a file .babelrc. You have to configure the presets and plugins you want to use in your workspace. You can read more about plugins and presets in the above link. Setup your .babelrc file as below:

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

Once you have Babel set up, you can write all the latest ES6 code. I strongly recommend you write code in ES6, as there are tons of useful features. It really makes our code simple and easy to read.

But for writing ES6 code we need to first inject Babel to a file. Please note the file in which Babel is being injected. You can’t write ES6 code in the same file.
So, we normally inject Babel in one file (eg. index.js) and write our actual code in another file (eg. app.js). And we import app.js inside index.js.

Let us see the usage of Babel through an example.

I have an old version of Node.js (8.9.4) running on my laptop. This version doesn’t support a lot of ES6 features. (Please note that the newer versions of Node might support the following code)

First let us create aapp.js file as below:

import _ from 'lodash';
let array = [1, 2, 3];
_.reverse(array);
console.log(array);

Let us try to run this file. You will see the error below.

Now, let us use babel.js to fix this issue. For that first we need to make our app.js exportable. So, let us change our code to the following:

Here, we created a function and kept the entire code inside the function body. We exported the module using module.exports.

As you see we have theimport keyword, arrow functions in this code.

Now let us create an index.js file as below:

require("@babel/register");
require("@babel/polyfill");
var app = require('./app.js');
app();

In the first line we inject Babel and then we import app.js using require keyword. At last we invoke the entire module as a function call with app().

Let’s run this code and see the result.

Hope this article helps. This article will be a prerequisite for further articles, as all the projects we will create will be written in ES6.

If you liked this article, you can 👏 the story and share it with others.