/ NodeJS

Get started with es6 and nodejs with babel

Let's face it es6 is absolutely amazing! And you'll want to use it for your next project or perhaps write new modules for an existing project, yes? well, who wouldn't! Let me tell you who wouldn't, those who want to use it in an ongoing project which is running on an older version of node or who have super paranoid bosses who are so scared / uptight about the tried and tested philosophy, would hit fire alarm as soon as the idea of using something new comes within a one mile radius of where you are!

Okay; So Jokes apart, on a serious note, there are too many versions of node out there and all support a wide variety of es6 features which is beautifully covered at node.green. So if your current project is an older version of node, say V0.12 or V4.* or any other version for that matter or your boss want you to stick to an older version which was used in the previous project just because he/she does not wanna step into the wild, would not be able to consume all the features of es6 because they do not support all the features of es6.

Don't look so glum, there is still a way for you to use any version of node and still utilise most feature of es6 with 100% consistency across the versions, which is key factor when you are writing some package and want it to work with any node version with little or no help from babel.

So enough with the talk; let's do the walk. First lets setup our node project by going into my project folder and firing up npm init as follows.

Which would eventually produce a package.json similar to this one

{
  "name": "es6-with-node",
  "version": "1.0.0",
  "description": "Get to know Babel-Cli",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Dave Amit",
  "license": "ISC"
}

It's good time to create our main entry point file (touch index.js), now fire up your favourite editor, I love atom, So I'll have to do atom . and add following pretty basic es6 Hello world code which makes use of arrow functions.

const log = (message) => console.log(message);

log('Hello world!');

When I run it, using node index.js it runs successfully!


Confused? Well, if you take a look at the extreme right corner of the image; you'll see 5.0.0 written in the yellow background. This indicates that current node version is V5.0.0. If I switch to node version V0.12 (nvm use 0.12), then see what happens!

This is what I was talking about, for some it will work and for others, it will just fail. And that is why we'll need babel. Before we install babel, let's add a script which will make it easy for us to start our app. To do so, all we need to do is just add a "start": "node index.js" script under scripts section in our package.json, the final package.json should look something like as below

{
  "name": "es6-with-node",
  "version": "1.0.0",
  "description": "Get to know Babel-Cli",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Dave Amit",
  "license": "ISC"
}

This change will enable us to use npm start to execute our program, unfortunately it'll still fail.

Watch out! Here comes babel to the rescue! Before we start using it, think of babel as a compiler, that's it, I'm not going to say much on the topic, just google it for god sakes!

Lets install babel as dev dependencies, fire up npm install babel-cli bable-presets-es2015 --save-dev. This command will install babel cli, which will provide us access to babel-node which basically make whatever version of node you are using es6 friendly. And the usage is also simple, all we need to do is replace node in node index.js with babel-node like babel-node index.js, we are almost there, we need to tell babel-node which preset to use, you can think of preset as configuration which tells babel what features to enable, for simplicity, we'll ask babel-node to use es2015 features, but if you want babel-node to go crazy and use all latest stable features, install babel-preset-latest instead. Other presets are also available some of them are es2015, es2016, es2017 and latest. Anyways, we'll be using es2015 for now, making our final command looks like babel-node --presets es2015 index.js and replacing it in package.json makes package.json as

{
  "name": "es6-with-node",
  "version": "1.0.0",
  "description": "Get to know Babel-Cli",
  "main": "index.js",
  "scripts": {
    "start": "babel-node --presets es2015 index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Dave Amit",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-preset-es2015": "^6.18.0"
  }
}

Now lets fire up npm start

That's it, you are good to go! Though there is one more thing I like to do, one more setting. I love nodemon and I always use it in all my projects. To setup up nodemon(I usually install it globally using npm install -g nodemon as I use it all the time, but as we will only use it in development mode you can always install it as dev dependency using npm install nodemon --save-dev), next we'll add "watch": "nodemon --exec npm run start" under scripts.

Use npm run watch to run the app in watch mode, for those who do not know what nodemon does, it actually watches for a file(s) change and when a file(s) changes it restarts the given command, as follows.

Observe how npm start is executed each time I make changes and save index.js.

That's all folks! Cheers and happy coding.

Dave Amit

Dave Amit

Howdy folks! I am Dave Amit, an accidental programmer, father to a lab puppy, hubby to a beautiful wife, addicted to puzzles & a noob blogger. This is my effort to simplify odd codes from the wild.

Read More