Use ES6

ECMAScript 2015 (ES6) is a new version of ECMAScript standard released in June 2015. It is a significant update since ES5 standardized in 2009.

Since it’s still relatively new, implementation in major platforms/browsers is still underway. To know more details of the progress, check this compatibility table.

Due to the incomplete support to ES6, for now we need a transpiler to convert js files from ES6 to ES5. The transpiler we are using here is Babel.

The most important feature ES6 brings us is the long-awaited module support, but unfortunately till now no browser supports modules natively, so we need a bundler to bundle all of the required dependencies into a single JavaScript file. The bundler we are using is Webpack.

Hands-on

Install http server

We need an http server to test our local html file because otherwise you will get an XMLHttpRequest cannot load error, the description being Cross origin requests... in your browser console.

Basically, it’s because of the security feature of the modern browsers. They are programed to watch for cross site attacks and will block requests to files on your local hard drives. Thus comes the local server.

Here we are using live-server to serve as our http server:

$ npm install --save-dev live-server

Prepare project folder

Let’s create a project folder first:

$ mkdir es6-demo
$ cd es6-demo

Create a package.json file:

$ npm init -y

This will create a npm config file similar to this:

{
  "name": "es6-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Create folder src to contain our source files:

$ mkdir src

Create folder build to contain our compiled files:

$ mkdir build

Create source js files and index file:

$ touch src/{entry,lib}.js index.html

Update index.html as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ES6 Demo</title>
  </head>
  <body>
    <script src="build/bundle.js" charset="utf-8"></script>
  </body>
</html>

Use Webpack

Install webpack:

$ npm install --save-dev webpack

Update src/lib.js as follows:

var sum = function(num1, num2) {
    return num1 + num2;
};

module.exports = {
    sum: sum
};

Update src/entry.js as follows:

var calc = require('./lib.js');
console.log(calc.sum(2, 3));

Update the scripts section in package.json to add a new script to call webpack:

"webpack": "webpack ./src/entry.js ./build/bundle.js"

Run following command to bundle scripts:

$ npm run webpack

Now you’ll see a new file called bundle.js created under folder build.

In order to test the code, add another new script to the scripts section in package.json:

"start": "live-server"

Then run following command to start our server:

$ npm start

Right upon the server is running, it’ll open a new browser page which is http://127.0.0.1:8080/. You can go to Developer tools > Console tab to check out the output, it should log number 5.

Use Babel

Install Babel:

$ npm install --save-dev babel-cli babel-core babel-preset-es2015

Create ES6 style js file:

$ touch src/es6-lib.js

Update the file as follows:

let sum = (num1, num2) => num1 + num2;
let square = (num) => num * num;

export {
    sum,
    square
};

Add a script to package.json to run babel cli:

"babel": "babel --presets es2015 ./src/es6-lib.js -o ./build/es6-lib.js"

Run it with:

$ npm run babel

Now you’ll see a new converted es6-lib.js file under build folder. You can see that the converted version is basically a ES5 file.

Use Webpack to do both

The es6-lib.js file we converted earlier is still not usable because it still needs to be bundled with the entry.js file.

Now we’ll talk about how to use Webpack together with Babel to convert and bundle ES6 files at the same time.

Create webpack.config.js in the root of the project:

$ touch webpack.config.js

Update the file as follows:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  context: __dirname + "/src",
  entry: "./entry.js",
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }]
  },
  stats: {
    colors: true
  },
  devtool: 'source-map'
};

Install the loaders for transpiling with Babel:

$ npm install --save-dev babel-loader

Since we now have the Webpack config file, we don’t need to specify the params in the webpack script in package.json anymore.

Change the corresponding script from:

"webpack": "webpack ./src/entry.js ./build/bundle.js"

to:

"webpack": "webpack"

Now update entry.js in ES6 style:

import * as calc from './es6-lib.js';
console.log(calc.sum(2, 3));
console.log(calc.square(4));

Run script to convert and bundle js files:

$ npm run webpack

Let’s go back to http://127.0.0.1:8080/ to check the console log. It should now output 5 and 16.

Jul 8, 2016