Tuesday, March 11, 2014

Traceur is Awesome! ... but still a little Painful

Disclaimer: Bleeding-edge stuff


Be mindful of the date this was written, this is liable to change!


What is Traceur?


Traceur is a ECMAScript 6 to ECMAScript 5 (current JavaScript) transpiler. Basically, it allows you to use "JavaScript Next" features in today's browsers. Since both Angular "2.0" and Ember "2.0" are targeting ES6, if figured it's prudent to dive in and try this stuff out as soon as possible.


Using Traceur from HTML



This is simple enough, really. You just include `traceur.js` and Traceur's `bootstrap.js` in your HTML file, then put any ES6 code in a script tag where type="text/traceuer" or type="module" and it "just works"



"Off-Line" Compiling supports Source Maps



Traceur supports "off-line" compiling, and most importantly, it supports source maps. I need my source maps. I work on very large apps and anything that can assist my debugging is a must-have. Particularly when we're talking transpiled-then-minified codebases.


Grunt-Traceur



Grunt is a mainstay of JavaScript builds, so it's the first thing I tried:  grunt-traceur. It compiles things fine, but currently, it would not output source maps... That's a no-go for me.


Gulp-Traceur



Next up... the new hotness, Gulp. Look! There's a package for this already! gulp-traceur! But alas, it's not much different than grunt-traceur. Currently it lacks documentation, and I couldn't get it to output source maps.


Tracer from the Command line



The current Traceur documentation has information about "off-line compiling" from the command-line using a `traceur.sh` shell script. A quick search of the repo, however, revealed this was ancient information. There is no `traceur.sh`.

Fortunately, I know my way around some Node, and I quickly realized there was a globally installable `traceur` command available as an npm package!

1. Install Traceur globally with npm

You need to make sure Node.JS is installed... then run this from the command line:


npm install -g traceur
traceur --version
# -> traceur@0.0.28PS


2. Basic compile


After my excitement because I felt like I was making progress, I decided to give a basic compile a go:

traceur --out .\output\compiled.js  --script .\src\original.js

And it compiled! ... but no source maps.

3. Compile with Source Map output


So now what? A quick look at `traceur --help` showed a flag `traceur --longhelp`. After I got done chuckling a little at that, I had a look... There were two flags --source-maps and --sourcemap. So I tried them out... --sourcemap worked.

traceur --out .\output\compiled.js  --script .\src\original.js --sourcemap


Now I finally have a tool, albiet not the easiest tool to use, that will compile ES6 and output a source map.

4. Compile many files into one output file with source map output



What about multiple files? For that you can just include multiple files in the `--script` flag. I wasn't able to get the available `--dir` flag to work with source maps.

The following will compile many source files into one output file and produce a sourcemap:

traceur --out .\output\compiled.js  --script .\src\file1.js  .\src\file2.js --sourcemap


Awesome tool, but a little hard to get into a workflow




After fiddling with this for a while, I have to say I really like Traceur for what it is, however, the tooling around it is still lacking enough that I'm not sure I can squeeze it into a robust workflow quite yet. It has some really great advantages over other transpiled languages, because you're (in theory) future-proofing your development a little for whenever browsers finally implement ES6 natively by default. Some browsers such as Firefox and Chrome already support ES6, however you need to manually that support, so it's still a better bet for most projects just to transpile to ES5 for now.

In the end, the biggest problem is just robust task-runner support for something like Grunt or Gulp. The current modules that exist don't seem to have "official buy-in" and aren't very well documented or supported in my opinion.

2 comments:

  1. I had better luck with this. See
    http://sett.ociweb.com/sett/settApr2014.html

    ReplyDelete
    Replies
    1. Thanks for the link! I didn't run across that while I was Googling and Googling.

      Delete

This form allows some basic HTML. It will only create links if you wrap the URL in an anchor tag (Sorry, it's the Blogger default)