ES6 at Packly

Today ES6 specification known as ES2015 is almost supported in many JavaScript engines but not completely. For programmers sometimes is very frustranting cannot use some interesting and useful new language features.

In the case of ES6 JavaScript developer that want use new ES6 functionalities scuh us arrow function, class, generators, promise, maps, sets now can do that thanks to tools as babel and webpack.

In this article i explain how to setup ES6 to use it in the Node.js environment. To do that we transpile ES6 code dynamically (at runtime) thanks to  Babel.

In general there are two alternatives to transpile ES6 code, static and dynamic. Dynamic approach is convenient for experiments and development because it uses on the fly transpilation, which means that startup is slower and Babel need to be installed on the production system. We focus on the dynamic approch and we’ll configure a Node.js project to use it.

The first step is to create an empty Node.js project with your favourite IDE or simply make an empty folder and create a package.json file like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

{
  "name": "My Application",
  "version": "0.0.1",
  "description": "My frist Node.js ES6 Application",
  "private": true,
  "homepage": "http://www.mywebsite.com",
  "author": {
    "name": "NickNaso",
    "email": "nicoladelgobbo@gmail.com",
    "url": "https://github.com/NickNaso"
  },
  "contributors": [
    {
      "name": "Nicola Del Gobbo",
      "email": "nicoladelgobbo@gmail.com",
      "url": "https://github.com/NickNaso"
    }
  ],
  "bin": {
    "start": "./myapp.js"
  },
  "scripts": {
    "start": "babel-node ./myapp.js"
  },
  "dependencies": {
    "babel-cli": "*",
    "babel-plugin-transform-regenerator": "*",
    "babel-preset-es2015-node4": "*"
  },
  "devDependencies": {},
  "babel": {
    "presets": [
      "es2015-node4"
    ],
    "plugins": [
      "transform-regenerator"
    ]
  }
}

Now from shell launch the command:

1

npm install

At the end of this process all node modules are installed for your project and your new project structure contain a new folder node_modules.

It’s time to program and create in the root of project our first ES6 module so make a file named Person.js and edit it as reported below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

export default class Person {
 
    constructor(firstName = "John", lastName = "Doe") {
        this._firstName = firstName;
        this._lastName = lastName;
    }
 
    get firstName() {
        return this._firstName;
    }
 
    set firstName(firstName) {
        this._firstName = firstName;
    }
 
    get lastName() {
        return this._lastName;
    }
 
    set lastName(lastName) {
        this._lastName = lastName;
    }
 
    toString() {
        return `You are ${this._firstName} ${this._lastName}`;
    }
 
}

In the previous module we just created and exported a class Person with properties _firstName and _lastName and their getter, setter methods with additional toString method that have the responsability to print the properties’ values.

To complete our project we have to create a file named myapp.js that will be the application starting point as reported below:

1
2
3
4
5
6
7
8
9
10
11
12

import Person from './Person';
 
let myTeam = new Set();
 
myTeam.add(new Person("Brendan", "Eich"));
myTeam.add(new Person("Ada", "Lovelace"));
myTeam.add(new Person("Dennis", "Ritchie"));
myTeam.add(new Person("James", "Gosling"));
 
for (let person of packlyTeam) {
    console.log(person.toString());
}

It’s time to start our first ES6 application in Node.js environment so execute the following command:

1

npm start

The output will be something like that:

1
2
3
4
5
6
7

> MyApplication@0.0.1 start G:\Projects\Web\GitHub\BNode-ES6
> babel-node ./myapp.js
You are Brendan Eich
You are Ada Lovelace
You are Dennis Ritchie 
You are James Gosling
G:\Projects\Web\GitHub\BNode-ES6>

Now you are ready to start use all ES6 features in your Node.js project.

At pack.ly (https://www.pack.ly/create) we use it because more features are very useful for us and especially because they make the javascript code more understandable at semantic level.

You can find the scaffolding of the code described in this article here:

BNode-ES6

In this project i used Node.js 4.3.1 so in package.json i installed “babel-preset-es2015-node4” and in babel configurations under presets keys i setted “es2015-node4”. If you have different version or configuration please refer to Babel docume ntation here: https://babeljs.io/

Thank you all.

@NickNaso