JavaScript ES6模塊+ Traceur

Question

我使用ES6模塊 transpiled到ES5與traceur 。
通過grunt + grunt-traceur完成翻譯

Traceur允許您選擇要使用的模塊處理程序：它自己的，AMD，commonJS或嵌入式。
我已經嘗試了大多數，但是似乎都沒有用。 為什么？

TestClass.js

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

Main.js

import TestClass from './TestClass';

var test = new TestClass();

Gruntfile.js （摘錄）

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

index.html （摘錄）

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

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

給出錯誤

未捕獲的錯誤：匿名define（）模塊不匹配：函數（$ __ 0）{

似乎grunt插件存在問題 ，但是即使使用舊版本也似乎無濟於事。

代碼改編自一篇文章 。

Answer 1

看來我遇到了非常類似的問題 （並在Google搜索您的問題以嘗試找到解決方案）。

我沒有看到您提供的錯誤，無論如何在這里發布我的實現，也許對您有所幫助。

首先，您需要使用treceur運行時加載這兩個js腳本。 像這樣：

<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>

請注意，您必須在type屬性中將腳本指定為module -s。

比您必須加載init模塊：

<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>

這種實現對我來說很好。 我使用grunt-traceur的0.2.9版本和treceur運行時的0.0.72版本。 希望這對您有所幫助。