如何用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>
答
多头部划伤后,我找到了答案更简单比预期:只要先加载包作为常规的.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>
是的,这就是它应该如何工作。第一次导入只是为了预先填充模块注册表而加载bundle,bundle中没有内容会告诉哪个模块应该执行,这就是第二次导入的目的。 – artem
谢谢,但有什么方法可以在应用程序加载后自行启动?大多数的systemjs教程只提到import(js/main.js),这似乎足够了......? – Kokodoko
如果'js/main.js'是一个包含多个模块的包,换句话说,它有几个'System.register()'调用是没有办法的。我想所有的教程都假设它是一个单独的模块,也许是通过汇总构建的,或者是将它们分开并分别加载所有其他模块。 – artem