JavaScript ES6 Module + Traceur

Question

Ich verwende ES6 modules transpiled zu ES5 mit traceur.
Transpilation über Grunzen getan + grunt-traceur

Traceur Sie, welches Modul-Handler zu verwenden, um wählen kann: sein eigenes, AMD, Commonjs oder Inline.
Ich habe die meisten von ihnen versucht, aber keiner scheint zu funktionieren. Warum?

TestClass.js

export default class TestClass { 
    constructor() { 
     alert('test'); 
    } 
} 

main.js

import TestClass from './TestClass'; 

var test = new TestClass(); 

Gruntfile.js (Extrakt)

traceur: { 
    options: { 
     experimental: true, 
     blockBinding: true, 
     modules: 'amd' 
    } 
} 

index.html (Auszug)

<script src="js/vendor/traceur-runtime.js"></script> 
<script src="js/vendor/require.js"></script> 

<script defer async src="js/compiled/Main.js"></script> 

Fehler gegeben

Uncaught Error: Mismatched anonymous define() module: function ($__0) {

Es scheint, dass there are issues mit der Grunzen-Plugin, aber auch eine ältere Version verwenden scheint nicht zu helfen.

Der Code wurde von an article angepasst.

Answer 1

Es scheint, dass ich very similar problem hatte (und googelte Ihre Frage, die versucht, Lösung zu finden).

Ich hatte Fehler nicht von Ihnen zur Verfügung gestellt, trotzdem post hier meine Implementation, vielleicht hilft es Ihnen.

Zuerst müssen Sie beide js Skript mit Treceur Laufzeit laden. Wie folgt aus:

<script src="js/vendor/traceur-runtime.js"></script> 
<script defer async src="js/compiled/TestClass.js" type="module"></script> 
<script defer async src="js/compiled/Main.js" type="module"></script> 

Beachten Sie, dass Sie, dass Ihr Skripte ist module es in type Attribute angeben müssen.

als Sie init-Modul geladen haben:

<script> 
    System.get('public_js/init'); 
    // pass your init module name as a parameter 
    // you can see it in private __moduleName variable in compiled init.js 
</script> 

Das Implementierung funktioniert gut für meine. Ich benutze 0.2.9 Version von Grunt-Traceur und 0.0.72 Version von Treceur Runtime. Hoffe das hilft dir.