JavaScript ES6模块+ traceur

Question

我正在使用ES6模块转换为带有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>

给出错误

未捕获的错误:匿名的define()模块不匹配:函数($ __ 0){

似乎grunt插件存在问题,但即使使用旧版本似乎也没有帮助.

代码改编自一篇文章.

Answer 1

看来我有非常相似的问题（并用谷歌搜索你的问题试图找到解决方案）。

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

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

请注意，您必须在属性中指定您的脚本为module-s type。

比你必须加载初始化模块：

<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 运行时。希望这对您有帮助。