Getting Started with Javascript 6

03 Nov 2015 // programming

I've been hearing a lot about Javascript 6 (JS6) from WebGL acolyte Xavier Ho (no relation). So I decided to try it out.

Sadly, JS6 does not work out of the box in the browser. You have to do some heavy lifting to get it to work. Here's how I did it:

I work in Mac OSX so I presume you have brew. If not, install it, then chown your \usr\local directory.

You should then install the Javascript environment node.js:

brew install node

After installing node.js, you can now use the Javascript package manager npm.

Now node.js is alas, only a Javascript 5 run-time environment. You, however, want JS6. Not only that, you also want browserify. This lets you use JS6 files with modules in an intuitive manner, yet results in an easy-to-load compiled Javascript file. You want this. Really.

So install browserify as a global npm install. By installing globally, browserify can be run from anywhere on the command-line. However global installs are not meant to be loadable in your working directories.

npm install -g browserify

Then you make the directory that you want to work in, say test:

mkdir test
cd test

In test, you want to install babelify that translates your JS6 into Javascript 5. To do this you need to install babelify into your test directory:

npm install babelify

You will be surprised to find that installed as such, babel is an empty compiler; it does nothing. You need to load it with the JS6 compilation module:

npm install babel-preset-es2015

Then you create a file .babelrc in your test directory:

{ "presets": ["es2015"] }

You might also globally install the command-line version of babel to manually compile files without the fancy module loading stuff in browserify:

npm install -g babel-cli

While we're at it, let's download some nice Javascript libraries into your test directory:

npm install jquery underscore three

Okay, so we can now compile JS6 files. Let's set one up main.js:

var $ = require('jquery');
var body = $(document.body);
for (let x of [0, 1, 2]) {
    console.log( `Printing out numbers ${x}`);
    body.append(`<div>${x} element</div>`);
}

This script has CommonJS module loading, JS6 loops and JS6 template strings. It will not work in Node or in your browser. You will need to compile this.

Let's first compile with babel-cli:

babel main.js > main.compiled.js

If you see transformed Javascript 5 code in main.compiled.js, then the compiler is working. But you'll notice that the require statements were left alone. That's no good! We want to slurp in modules in our final compiled file.

Never fear, browserfiy is here:

browserify -v --debug -t babelify main.js -o main.compiled.js

This creates main.compiled.js which should now contain the imported jquery library. This can now be slurped into a web-page in one fell swoop. Let's discuss the options:

  • -v verbose output, always nice to see what's going on
  • --debug add source maps to the end of the file, this let's the browser console to print out useful error commands referring to main.js even though it was main.compiled.js that was slurped in
  • -t babelify will run babel on your files with the options written in .bashrc

Okay, let's slurp this into an HTML file index.html:

<head></head>
<body></body>
<script src="main.compiled.js"></script>

Open index.html in a browser, and open up the debugging console. The console.log output should be there, as well as the web-page elements.

Finally, you'll want to install watchify, which is a daemon that automatically compiles your JS6 files when it detects a change. Install it globally as a command-line:

npm install -g watchify

And run it as a long-running process:

watchify -v --debug -t babelify main.js -o main.compiled.js

Stick this in a shell script if you'll be coming back to this.

Now you can edit main.js and then reload index.html in the browser to immediately see the effects of the change.

There, you've set up your first debuggable JS6 program.