DEV Community

Dhruv
Dhruv

Posted on

Writing ES6 in your Node.js Applications

ES6 (ECMAScript 2015) is the latest stable version of JavaScript. It includes new language syntaxes and implementations for the language. Three years later implementation of these new features in JavaScript engines is still ongoing but you'd still like to write your code in ES6 because who wants to stay behind in this industry.
We'd be using Babel here to convert our ES6 code that can be understood by the existing Javascript engines. Babel is a compiler that allows us to write ES6 features in JavaScript and run it in the older/existing engines.
How to set up Babel with your Node.js App

  • You should have the latest node.js installed and running on your machine.
  • Create a new project or run and move to this directory

    $ mkdir new_project
    $ cd new_project

  • Create a file app.js and write some ES6 code in there

    import request from 'requests';
    let helloWorld = 'Hello World!`;
    console.log(`${helloWorld} this is some ES6 JavaScript code`);

  • Create a package.json file by running npm init . Enter the required details or press return for fields you do not recognise. At this point your package.json should look like this


{
"name": "es6project",
"version": "1.0.0",
"description": "using babel with node",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

  • Install babel and babel preset as a dev dependency


$ npm install -D babel-cli
$ npm install -D babel-preset-es2015

  • Babel uses different plugins to enable different features. In our case we can use the es2015 plugin. We will need to create a .babelrc configuration file.


$ touch .babelrc

and paste the following in the file


{
"presets": ["es2015"]
}

  • Create an npm build command to compile your ES6 Javascript. Modify your package.json with 


"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel --presets es2015 -d lib/ src"
}

this compiles all of your ES6 code in the src directory to the lib directory.
You should see your code compiled in the lib directory and now you are good to go and run this.This code is present in the this Github repository.

This post was originally published on medium

Top comments (8)

Collapse
 
kepta profile image
Kushan Joshi

I think in 2018 you would want to avoid transpiling your code to ES5 as the support for it is already there.

Node v8 and v10 are pretty much on par with the latest ES20XX and if you are using Node v6 you still get most of the es2015 goodies except for async/await, double check on node.green.

If you are using something below v6, you have bigger things to worry about anyway...

Collapse
 
dhruv profile image
Dhruv • Edited

Not all es6 features are implemented and they are behind the flag and in the experimentation, you have to use the .mjs extension to use it.

The latest v10 will have it all the features in it including the dynamic imports. But v10 still won't be the LTS version and not everyone will be using it.

Collapse
 
kepta profile image
Kushan Joshi

My point is that you don't need Babel to use modern ES6 features. If you could tell me which ES6 feature you are getting by using Babel. If you are talking about ESM (EcmaScript Modules), Babel doesn't really give you ESM it simply allows you to write the import x from y style and transpiles it back to CJS.

Thread Thread
 
danl profile image
Dan L.

I'm using Node 10.16.0. Is ESM best way to enable ES6 for NodeJS? (I currently use 'nodemon -r esm')

thanks!

Collapse
 
jeffreyfate profile image
Jeffrey Fate

Why not use typescript instead? (Maybe I just can't get away from my love of strongly typed languages)

Collapse
 
jakubkeller profile image
Jakub Keller

There is that problem of Typescript sucking ass though...

Collapse
 
dhruv profile image
Dhruv

afaik typescript also needs a compiler no? babel has a typescript plugin too.

Collapse
 
jeffreyfate profile image
Jeffrey Fate

Technically, yes. But, to me it is much more seamless with everything I've needed so far bundled with TS. It feels less cobbled together than using Babel, Webpack, or Rollup. Plus, it essentially automatically stays updated as new language features are added.