Question

我使用ES6 modules将traceur与grunt-traceur一起转换为ES5 通过grunt + there are issues

进行脱毛

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

似乎an article带有grunt插件，但即使使用较旧的版本似乎也无济于事。

代码改编自{{3}}。

Answer 1

似乎我有very similar problem（用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>

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

比你必须加载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运行时。希望这会对你有所帮助。

JavaScript ES6模块+ traceur

1 个答案: