WENBO LI

Open Sidebar

Get started with ES6/ES2015

by Wenbo on

By the time that I am writing this post, it is already 2016. And most of us know that ES6 standard has been finalized at last year which was 2015, therefore now many people also call this new version of javascript ES2015.

In this post, I don't want to go to details of how ES6 better than the current version. If you want to learn more about that, please visit learn ES2015. What this post will focus on is to show you know easy it is to get started with ES6.

Despite the ES6 standard has been finalized, and all the major browsers are busy to implement the new standard. All of them today still can't understand the ES6 syntax. Therefore, if we want to experiment the new syntax and run them in current browsers, we have to have a build process which we transform the ES6 code to ES5 code before they get to served to the browsers.

There are two popular ES6 code compilers at the moment. They are Babel which believed to the most popular compiler and Traceur-compiler which is built by Google.

So, the generally accepted flow is:

  • write ES6 code in your project

  • compile the ES6 code to ES5 code

  • the index.html file or whatever HTML file you used to server javascript is linked to compiled file.

# Prerequisites

  • you need to have NodeJs installed on your machine

  • a text editor

  • a command line tool to run node commands

# Technolgies

  • NodeJs

  • Webpack

  • Babel

ok, let's get started

let's create a new folder call it es6WithWebpack, then create a js folder to hold our es6 javascript files.

The first file will be called 'ninja.js'.


// ninja.js
// So, in es6 we could use the class key word to create a call.
export default class Ninja {
    constructor(name) {
        this.name = name;
    }

    attack() {
        console.log(this.name + ": attacked once.");
    }
}

Now we have created our ninja class, let's use this class in another file.

Let's create a new file in js folder, and call it app.js

// app.js
// in this file we use the new key word import to import the ninja class in this file
//since ninja is a class, so we have to new it up. 
import Ninja from "./ninja";
const ninjaPeter = new Ninja('peter');
ninjaPeter.attack();// this shold log something in the console.

Ok, now the code is setup, but our browser can't process these files. So, now let's get the webpack and babel.

Go back to the command line, run npm init.  Then run npm install babel-core babel-loader babel-polyfill babel-preset-es2015 webpack --save

Then NPM will install all the libs we need to compile our es6 code to es5.

Now let's create a webpack config file

// webpack.config.js
var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: [
        path.join(__dirname, 'js/app.js')
    ],
    output: {
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                include: path.join(__dirname, 'js'),
                loader: 'babel-loader',
                query: {
                    presets: ["es2015"]
                }
            }
        ]
    },
    debug: true

};

This is a very simple config file for webpack. It tells webpack when it starts to process the files, the entry file's path is js/app.js and after processing finished, then the output file will be called bundle.js and it will be placed in the root file of the project. Then let's have a look the module property. So, all the plugins for webpack are call loaders. so it tells webpack what loader to use when processing the files. In this case, we use babel-loader to process the files. And babel-loader is the plugin that transforms all the es6 code to es5 code and bundle them into one file which is the bundle.js.

Now, let's run webpack in the command window. You should see a bundle.js file is produced. Congrats.

To get bundle.js into the browser, we just simply create an index.html file and load bundle.js into.

Now open the index.html with Chrome, then look the console. you should see that ninja has attacked. hehe.

Hope you have learned something with this post. The project with all code example can be found here.

Next post will be how to setup unit tests for ES6 code.

Goodbye for now.

Close Sidebar