JavaScript ES6模塊+ traceur

我正在使用ES6 modules轉儲到ES5與traceur。
Transpilation通過咕嚕做+ grunt-traceur JavaScript ES6模塊+ 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與繁重的插件，但即使使用的是舊版本，似乎並沒有幫助。

代碼改編自an article。

來源

2014-10-05 Razor

您可能還想看看[6to5]（http://6to5.github.io/）。它有很多不同格式的[模塊格式器]（http://6to5.github.io/modules.html），可以很好地與其他工具配合使用。 – 2014-12-05 03:03:20

看來，我有very similar problem（並試圖找到解決方案一試谷歌）。

我沒有看到你提供的錯誤，無論如何發佈在這裏我的實施，也許它可以幫助你。

首先，您需要加載兩個js腳本與treceur運行時。就像這樣：

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

這implemetation很適合我的。我使用0.2.9版本的grunt-traceur和0.0.72版本的treceur運行時。希望這可以幫助你。

來源

2014-10-20 20:25:37

謝謝我有同樣的問題，如果grunt-traceur允許你列出應該立即運行的文件，而不是假定爲延遲加載的模塊，那就好了。 – 2015-01-28 21:22:41

JavaScript ES6模塊+ traceur

回答

相關問題