ES6 with Babel in your Node app

Introduction to ES6 with Babel in your node application. This post is made to answer questions or frustrations that people can have while bootstrapping an app with ES6 in node.

Introduction

ECMAScript 2015 is the newest version of the ECMAScript standard. This standard was ratified in June 2015. ES2015 is a significant update to the language, and the first major update to the language since ES5 was standardized in 2009. Implementation of these features in major JavaScript engines is underway now.

source

Basically, Babel is a JavaScript compiler so you can use next generation JavaScript, today!

Example:

#ES6
[1,2,3].map(n => n + 1);

and you get after the transforming process:

#ES5 code after the transformation
[1,2,3].map(function(n) {
  return n + 1;
});

About time to use it, right ?!

Install Babel

#Terminal
npm install babel-cli babel-preset-es2015 --save-dev

• babel-cli: Client tool for Babel which is a JavaScript compiler. We will use it to compile our ES6 code into ES5.
• babel-preset-es2015: Babel preset for all es2015 plugins.
• --save-dev: It will save the configuration into your package.json

Don’t install babel globally using “-g” . You will just pollute your global node installation on your machine. It’s much better to install it in your local project so when you deploy the code — it will be installed in your deployment environment running a script.

Run Babel

Babel is now installed into your “node_modules” folder. So you can run babel in your shell by typing this command:

#Terminal
./node_modules/.bin/babel --presets es2015 -d lib/ src/

• --presets: tell babel to transform your code into es5
• -d: tell babel you want to use a directory
• lib: the directory where it will be saved into
• src: the es6 folder which contains all your es6 files

It’s not always the best to run this command manually in your terminal. You probably want to automatically run it through your package.json or grunt file. So when you start the server — it will first transform all your es6 files into es5.

Automate your Babel process

Add those lines inside your “package.json”

#package.json
“scripts”: { 
    “compile”: “babel — presets es2015 -d lib/ src/”,
    “prepublish”: “npm run compile” 
}

• prepublish: Run BEFORE the package is published. (Also run on local npm install without any arguments.) See further information here.

When you run “npm start” command it will run the “prepublish” script. The command calls “compile” script which then transform your code into es5.

Time to clean your environment for when you want to deploy….Using “.gitignore” !

.gitignore

#.gitignore
lib

You want to create your es5 files on the fly — you don’t want to pollute your local project repository with those es5 generated files when you push to a repository. You need to ignore the “lib” folder — so when you commit to “github” or “stash” it only pushes your es6 files. Those es6 files are then transformed on your deployment environment by running the script “npm start”.

Now you can use “es6” in your code. But there is still another piece of work you need to do…

Polyfill

why do you need polyfill ?

A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.

Basically, “Babel” can’t support all the ES6 features! So you need to use a polyfill tool to (source):

This means you can use new built-ins like Promise or WeakMap, static methods like Array.from or Object.assign, instance methods like Array.includes, and generator functions (provided you use the regenerator plugin). The polyfill adds to the global scope as well as native prototypes like String in order to do this.

How to use it

Install babel-polyfill (source):

#Terminal
npm install babel-polyfill --save-dev

At the entry point of your application:

If you are using “require”:

#entry point of your application like index.js
require ("babel-polyfill");

If you are using ES6's “import”:

#entry point of your application like index.js
import "babel-polyfill";

Result

Your “package.json” should now look something like that:

#package.json
{
 “name”: “MediumDemo”,
 “version”: “0.0.0”,
 “description”: “Medium Demo”,
 “main”: “lib/index.js”,
 “scripts”: {
     “compile”: “babel — presets es2015 -d lib/ src/”,
     “prepublish”: “npm run compile”
 },
 “repository”: {
     “type”: “git”,
     “url”: “git+LINK_TO_YOUR_REPO”
 },
 “author”: “@bneiluj”,
 “license”: “MIT”,
 “dependencies”: {
     “babel-polyfill”: “^6.1.18”
 },
 “devDependencies”: {
     “babel-cli”: “^6.1.18”,
     “babel-core”: “^6.1.18”,
     “babel-preset-es2015”: “^6.1.18”
 }
}

If you have any questions or something that is not clear in my post, leave a comment or send me an email at: julien.bouteloup@gmail.com

Cheers !

PS: Coming posts:

• Babel in your Front End App
• How to use Webpack in your react or angular applications with live demo!