Disclaimer: Bleeding-edge stuff
Be mindful of the date this was written, this is liable to change!
What is Traceur?
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.
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 # -> firstname.lastname@example.orgPS
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.