JavaScript ES6模块+ traceur

Question

我使用的是ES6 modules，用traceur转到ES5。

转换是通过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>

给定误差的

未匹配错误:不匹配的匿名定义()模块:函数($__0) {

看起来，there are issues的grunt插件，但即使使用一个较早的版本似乎没有帮助。

代码是从an article中改编的。

Answer 1

似乎我有very similar problem (谷歌搜索你的问题，试图找到解决方案)。

我没有看到你提供的错误，无论如何，在这里发布我的实现，也许它对你有帮助。

首先，您需要用临时运行时加载两个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>

请注意，必须在module属性中指定脚本为type -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>

这种暗示对我来说很管用。我使用0.2.9版本的grunt-traceur和0.0.72版本的treceur运行时。希望这能帮到你。