8

我正在使用通过traceur转译为 ES5 的ES6 模块。 转译是通过 grunt + grunt-traceur 完成的

Traceur 允许您选择要使用的模块处理程序：它自己的、AMD、commonJS 或内联。
我已经尝试了其中的大多数，但似乎没有一个有效。为什么？

测试类.js

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

主.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）{

似乎grunt 插件存在问题，但即使使用旧版本似乎也无济于事。

代码改编自一篇文章。

4

1 回答 1

4

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

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

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

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

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

于 2014-10-20T20:25:37.730 回答