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>

给出错误

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

似乎there are issues使用 grunt 插件，但即使使用旧版本似乎也无济于事。

代码改编自an article .

Answer 1

看来我有very similar problem (并用谷歌搜索您的问题以寻找解决方案)。

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

首先，您需要使用 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。

你必须加载初始化模块:

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