如何用SystemJS模塊啓動一個Typescript應用程序？

我現在用的打字稿編譯器捆綁我的模塊集成到一個main.js文件，使用tsconfig.json這些設置：如何用SystemJS模塊啓動一個Typescript應用程序？

"module": "system", 
"out": "docs/js/main.js"

這工作，所以要根據SystemJS documentation，我只需要包括SystemJS生產文件和kickstart的，在我的HTML這些標籤的應用：

<script src="js/system.js"></script> 
<script> 
    SystemJS.import('js/main.js'); 
</script>

我的應用程序：

import { Message } from "./message"; 

export class App { 
    constructor() { 
     let demomessage = new Message("hello"); 
    } 
} 

export class Message {  
    constructor(str:string) { 
     console.log(str); 
    } 
}

這RESU

System.register("message", ...) { 
    // message code here 
}); 
System.register("app", ...) { 
    // app code here 
});

我失蹤（而這還沒有Microsoft's always-lacking-Typescript-documentation解釋）是如何真正啓動應用程序的一部分...如何SystemJS知道哪個類是：在main.js這段JavaScript代碼LTS起點？即使我只是把在執行console.log我的應用程序不執行....

編輯

我發現，使用system.js代替系統production.js至少啓動過程。經過大量的擺弄之後，我的應用程序開始使用下面的代碼，但它看起來很奇怪和醜陋。這是它應該如何工作？

<script src="js/system.js"></script> 
<script> 
    // get the anonymous scope 
    System.import('js/main.js') 
    .then(function() { 
     // now we can get to the app and make a new instance 
     System.import('app').then(function(m){ 
     let app = new m.App(); 
     }) 
    }); 
</script>

來源

2017-06-02 Kokodoko

是的，這就是它應該如何工作。第一次導入只是爲了預先填充模塊註冊表而加載bundle，bundle中沒有內容會告訴哪個模塊應該執行，這就是第二次導入的目的。 – artem

謝謝，但有什麼方法可以在應用程序加載後自行啓動？大多數的systemjs教程只提到import（js/main.js），這似乎足夠了......？ – Kokodoko

如果'js/main.js'是一個包含多個模塊的包，換句話說，它有幾個'System.register（）'調用是沒有辦法的。我想所有的教程都假設它是一個單獨的模塊，也許是通過彙總構建的，或者是將它們分開並分別加載所有其他模塊。 – artem

多頭部劃傷後，我找到了答案更簡單比預期：只要先加載包作爲常規的.js文件，然後就可以直接導入應用程序：

<script src="js/system.js"></script> 
<script src="js/main.js"></script> 
<script> 
    System.import('app').then(function(module) { 
    let a = new module.App(); 
    }); 
</script>

來源

2017-06-11 16:12:34 Kokodoko

如何用SystemJS模塊啓動一個Typescript應用程序？

回答

相關問題