我使用typescript编译器将模块捆绑到一个main.js文件中,使用tsconfig.json中的这些设置:
"module": "system",
"out": "docs/js/main.js"
这是有效的,所以根据SystemJS documentation,我只需要包含StjsJS生产文件,在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);
}
}
这导致了Mav.js中的JavaScript代码:
System.register("message", ...) {
// message code here
});
System.register("app", ...) {
// app code here
});
我缺少的部分(在Microsoft's always-lacking-Typescript-documentation中也没有解释)是如何实际启动应用程序…systemjs如何知道哪个类是起点?即使我只是把console.log放在我的应用程序中,它也不会执行….
编辑
我发现使用St.js代替StasePudio.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>