The majority of the browsers and server frameworks are on their way towards implementing ES6 features. You can check out the what is supported and what is not by clicking http://kangax.github.io/compat-table/es6/.

Though ES6 is not fully supported on all browsers and server frameworks, we can start using almost all features of ES6 with the help of transpilers. Transpilers are source-to-source compilers. ES6 transpilers allow you to write code in ES6 syntax and compile/transform them into equivalent ES5 syntax, which can then be run on browsers that do not support the entire range of ES6 features.

The defacto ES6 transpiler at the moment is Babel. In this book, we will use Babel and write and test our examples.

Babel supports almost all ES6 features out of the box or with custom plugins. Babel can be used from a wide range of build systems, frameworks, and languages to template engines, and has a good command line and read-eval-print loop (REPL) built in.

To get a good idea about how Babel transpiles ES6 code to its ES5 equivalent form, head over to Babel REPL (http://babeljs.io/repl/).

Babel REPL allows you to quickly test small snippets of ES6. When you open Babel REPL in the browser, you will see some ES6 code defaulted there. On the left pane, remove the code and type in the following text:

    var name = "John", mood = "happy"; 
    console.log(`Hey ${name}, are you feeling ${mood} today?`) 

When you type this and tab out of the left pane, you will see REPL transpiling this ES6 code into something like the following code:

    "use strict"; 
    var name = "John", 
      mood = "happy"; 
    console.log("Hey " + name + ", 
      are you feeling " + mood + " today?"); 

This is the ES5 equivalent of the code we wrote earlier in the left pane. You can see that the resulting code in the right pane is a familiar ES5. As we said, Babel REPL is a good place to try and experiment with various ES6 constructs. However, we need babel to automatically transpile your ES6 code into ES5, and for that, you can include Babel into your existing build systems or frameworks.

Let's begin by installing Babel as a command-line tool. For this, we will assume that you are familiar with node and Node Package Manager (npm). Installing Babel using npm is easy. Let's first create a directory where we will have Babel installed as a module and rest of the source code. On my Mac, the following commands will create a directory called babel_test, initialize the project using npm init, and install Babel command line using npm:

    mkdir babel_test
    cd babel_test && npm init
    npm install --save-dev babel-cli

If you are familiar with npm, you may get tempted to install Babel globally. However, installing Babel as a global module is not generally a good idea. Once you have installed Babel in your project, your package.json file will look something like the following block of code:

    { 
      "name": "babel_test", 
      "version": "1.0.0", 
      "description": "", 
      "main": "index.js", 
      "scripts": { 
        "test": "echo "Error: no test specified" && exit 1" 
      }, 
      "author": "", 
      "license": "ISC", 
      "devDependencies": { 
        "babel-cli": "^6.10.1" 
      } 
    } 

You can see a development dependency created for Babel for version > 6.10.1. You can use Babel to transpile your code by either invoking it from the command line or as part of the build step. For any non-trivial work, you will need the later approach. To invoke Babel as part of the project build step, you can add a build step invoking Babel inside your script tag to your package.json file, for example:

    "scripts": { 
      "build": "babel src -d lib" 
    }, 

When you do npm build, Babel will be invoked on your src directory and the transpiled code will be placed inside lib directory. Alternatively, you can run Babel manually also by writing the following command:

    $ ./node_modules/.bin/babel src -d lib

We will talk about various Babel options and plugins later in the book. This section will equip you to start exploring ES6.