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版本。 希望这对您有所帮助。