Mô-đun ES6 JavaScript + traceur

Question

Tôi đang sử dụng ES6 modules được chuyển đến ES5 với traceur.
Việc biên dịch được thực hiện thông qua grunt + grunt-traceur

Traceur cho phép bạn chọn trình xử lý mô-đun để sử dụng: riêng, AMD, commonJS hoặc nội tuyến.
Tôi đã thử hầu hết trong số họ, nhưng dường như không ai làm việc. Tại sao?

TestClass.js

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

Main.js

import TestClass from './TestClass'; 

var test = new TestClass(); 

Gruntfile.js (trích)

traceur: { 
    options: { 
     experimental: true, 
     blockBinding: true, 
     modules: 'amd' 
    } 
} 

index.html (trích)

<script src="js/vendor/traceur-runtime.js"></script> 
<script src="js/vendor/require.js"></script> 

<script defer async src="js/compiled/Main.js"></script> 

Lỗi đưa

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

Dường như there are issues với các plugin grunt, nhưng thậm chí sử dụng một phiên bản cũ dường như không giúp đỡ.

Mã được điều chỉnh từ an article.

Answer 1

Dường như tôi đã có very similar problem (và giải quyết câu hỏi của bạn đang cố tìm giải pháp).

Tôi đã không thấy lỗi do bạn cung cấp, dù sao đăng bài ở đây khả năng hiển thị của tôi, có thể nó sẽ giúp bạn.

Trước hết, bạn cần tải cả tập lệnh js với thời gian chạy treceur. Như thế này:

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

Lưu ý rằng bạn phải xác định rằng kịch bản của bạn là module -s trong type thuộc tính.

Hơn bạn phải nạp module 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> 

implemetation đó làm việc tốt cho tôi. Tôi sử dụng phiên bản 0.2.9 của grunt-traceur và phiên bản 0.0.72 của thời gian chạy treceur. Hy vọng điều này sẽ giúp bạn.