Issues with ES6+TypeScript, Traceur compilation

My general plan is to use TypeScript and ES6. Have TypeScript output ES6, and then use Traceur to convert it to ES5. This way I get to use types as well as the nice ES6 features like built in Maps.

So far everything seems to have gone reasonably well. I've got TypeScript turning into ES6 JavaScript and then that gets turned into ES5 by Traceur.
Unfortunately my page gives no output and I'm not quite sure why. It's probably something small, but I'm new to JS and haven't been able to figure it out.
A possible issue is the path references as the code is transpiled from ES6 to ES5.

For example, given:
src/
  app.ts
  modules/
    testModule.ts
Where app.ts imports a class from testModule using built in ES6 modules: import {TestModule} from './modules/testModule';
It gets compiled to:
bin/
  ES6/
    app.js
    modules/
      testModule.js
Since this is still ES6, the reference is unchanged.
Then Traceur takes over. The directory structure is the same as for the ES6 compilation, except in bin/ES5
The new ES5 app.js uses System.registerModule:

 
System.registerModule("bin/ES6/app.js", [], function() { ...

This seems to be the wrong reference, but it might be ok if it's just using it as a name..


Here's the project: https://github.com/Omustardo/TypeScript-to-ES6--Traceur-to-ES5

I've attached images of my compilation settings for both TypeScript and Traceur.
The scope for TypeScript is anything in src/*
Note that it isn't applied recursively since that ended up with a lot of duplicate output - I guess it compiles everything required by references and then compiles individually too.
Scope for Traceur is anything in bin/ES6//*

It's my first real attempt at web programming so please let me know if I should be doing things differently. Also, I read up a little about Grunt and other task runners. I expect I should probably be using one for this sort of thing, but I just want to get the basics done first and go from there.

Thanks in advance.



Attachment(s):
Traceur Settings.PNG
TypeScript Settings.PNG
2 comments
Comment actions Permalink

Please see https://github.com/google/traceur-compiler/issues/995 for some hints... I'd suggest using AMD option if you like to work with pre-compiled modules instead of using online compilation, as it's recommended there:

traceur --dir bin/ES6 bin/ES5 --modules=amd



and in HTML:

script src="lib/require.js"></script>

<script>
    require(['bin/ES5/app'], function (app) {
        
    
});
    </script>



Also, I'd say that I'd suggests using Babel rather than Traceur - the former is in fact the industry standard for ES6 compilation

0
Comment actions Permalink

Babel made things easier and I got it to run the little sample project that I put the link to (just using a single ES6 system import and the built in Map class).
I'm having some issues scaling it to a larger sample project, but I'll keep at it. Thanks for the help.

For anyone's future reference, I installed Babel with npm. Then made a file watcher that looked at the TypeScript output directory.
The final args were:
TypeScript: --target ES6 --outDir bin/ES6  --sourceRoot src
Babel: bin/ES6 --out-dir bin/ES5

I also had to "npm install babel-plugin-transform-es2015-modules-amd" and put "plugins": ["transform-es2015-modules-amd"] into the "babel" section of package.json. This makes module imports properly compile to AMD.
Here's my package.json:
{
  "name": "my-package",
  "version": "1.0.0",
  "description": "Sample project to demonstrate ES6 TypeScript compilation down to ES5 using TypeScript compiler and Babel. Also uses package.json for some Babel config.",
  "babel": {
    "plugins": ["transform-es2015-modules-amd"],
    "sourceMaps": "true"
  }
}

0

Please sign in to leave a comment.