Question

我使用typescript编译器将我的模块捆绑到一个main.js文件中，使用tsconfig.json中的这些设置：

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

这是有效的，所以根据SystemJS documentation，我只需要包含SystemJS生产文件，并在我的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);
    }
}

这导致main.js中的这个javascript代码：

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

我缺少的部分（在Microsoft's always-lacking-Typescript-documentation中也没有解释）是如何实际启动应用程序...... SystemJS如何知道哪个类是起点？即使我只是将console.log放在我的应用程序中，它也不会执行....

修改

我发现使用system.js而不是system-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>

Answer 1

经过多次讨论后，我发现答案比预期更简单：只需先将软件包作为常规.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>

如何使用SystemJS模块启动Typescript应用程序？

1 个答案: