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://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.