Getting Started (original) (raw)

How to try out Traceur

Traceur is a compiler that takes ECMAScript Edition 6 (ES6) (including classes, generators, destructuring and much more) and compiles it down to regular Javascript (ECMAScript Edition 5 [ES5]) that runs in your browser.

You can try Traceur in several ways:

• Typing or pasting ES6 code into the Read-eval-print-loop page.
• Include Traceur in a Web page and compile ES6 script content on the fly (see below)
• Use node to compile ES6 to ES5 offline and include the result in Web pages or just run the result in node.

Traceur itself is written in ES6, compiled to ES5: read the Traceur source to see how dramatically ES6 changes how JavaScript can be developed.

Hello, World!

To demonstrate, we'll build a little web page that includes a chunk of embedded Traceur code. When the page loads, it will execute that code and stick "Hello, World" onto the page. You can see the final result here.

First, let's build the skeleton of a page:

A Touch of Class

The goal is to have that <h1> include our generated message when the page loads. Let's do that with a little ES6 code:

or System.import:

Trying It On Your Machine (Building Traceur)

To get the example up and running locally, you must build bin/traceur.js. After cloning the repository, from the repository directory:

1. npm install
2. make

You should now have a bin directory with traceur.js in it. Test that it worked by opening example/hello.html in your web browser and running the test suite with make test.

Using It On Your Own Pages

The example here is pointing directly to traceur.js and bootstrap.js on the code repo here. That works, but you may want to pull those down and host them yourself.

To go beyond simple demo pages, you can compile multiple ES6 sources into a single ES5 file "offline" and include the result in a Web page for faster loading.

If you run into any problems, please let us know.