Using ES6 with BABEL in Node.js

Before getting started, let me clear Node.js provides support for almost all the ES6 features since Node.js v6 update. But there are few features that are yet not supported (in Node.js v10 too) like import/export etc. To use those features BABEL comes in handy. By the end of the article you would be able to use all the ES6 features in any Node.js version.

With the content below, you can enable any Node.js project to start using ES6 features to the full extent. In this blog, we would be dealing with three main topics here.

• ES6
• BABEL
• Node.js

Well, above mentioned things are so related and can make our life much simpler in terms of coding. If you are reading this blog, means you know JavaScript. Here are few details about them:

Node.js:

In simple words, Node.js is the powerful server-side JavaScript. To know more about Node.js. Please read my another blog: Node.js - a different JavaScript

ES6:

ECMAScript (ES) is a scripting language specification standardized by ECMAScript International. 

List of features available in ES6 are listed here.

Babel:

Babel is a basically JavaScript transpiler which converts the edge JavaScript into normal ES5 JavaScript which can run in any browser (old as well as new ones).

Babel allows us to use all the syntactical sugar which was added to the new ES6 version, including classes, arrow functions, multi line strings and even the import/export.

If you know Node.js, it provides us with lot of fatures yet there are few features of ES6 that are yet not accessible in Node.js code.

To get all the ES6 features running in your code, let's get into the actual topic of using ES6 syntax in Node.js.

Pre-Installtion Setup:

Currently your code will look like: (Let's assume you have index.js as your main file.)

./ project_dir

./project_dir/package.json

./project_dir/index.js

./project_dir/some_more_code

Create directory named: src and move all code in src, except for package.json file.

Your project directory structure should look like:

./ project_dir

./project_dir/package.json

./project_dir/src/index.js

./project_dir/src/some_more_code

Installation:

1. Install babel-cli first:

$ npm install babel-cli --save-dev 

2. Install other necessary dependencies:

$ npm install babel-preset-es2015 babel-preset-stage-2 --save-dev 

3. Create new file named .babelrc and add following code in it.

{
  "presets": ["es2015", "stage-2"],
  "plugins": []
}

4. Install Nodemon for watching your files and then restarting the server on file change.

$ npm install nodemon --save-dev 

We will be using nodemon for development environment.

5. Install pm2, we will be using pm2 for server deployment.

$ npm install pm2 --global

6. Update the scripts section from the package.json as:

  "scripts": {
    "build": "babel  src/ -d dist/",
    "start": "nodemon src/index.js --exec babel-node",
    "serve": "pm2 start dist/index.js"
  }

7. Add dist to the .gitignore file

dist

In above step, we have 3 scripts to package.json file:

1. build: Here, babel will compile the ES6 code from /src directory and convert it to ES5 in /dist directory.

$ npm run build

2. start: This script is for development environment, here we will be watching for file changes in the project code.

$ npm start

3. serve: As the name suggests, this script is for server (production) environments.

$ npm run serve

In this way, we can start using ES6 code in our Node.js projects.