《TypeScript图形渲染实战：2D架构设计与实现》 —1.5.2 SystemJS直接编译TypeScript源码
1.5.2 SystemJS直接编译TypeScript源码
在index.html中配置SystemJS编译（转译）TS源码，代码如下：
<head>
<meta charset = " utf-8 " />
<meta http-equiv = " X-UA-Compatible " conten t= " IE = edge ">
<title> Hello Wrold </title>
<meta name = " viewport " content = " width = device-width , initial-scale
= 1 ">
<link rel = " stylesheet " type = " text / css " media = " screen " href
= " main.css " />
<script src = "node_modules / systemjs / dist / system.js" > </script>
<script src= "node_modules / typescript / lib / typescript.js" >
</script>
<script>
System.config ( {
transpiler ： ' typescript ' , //使用TypeScript进行编译（转译）
packages ： {
' / ' ： {
defaultExtension ： 'ts' //编译（转译）当前目录（./）下的所有
TS文件，如果不设定defaultExtension，
则程序无法正确运行
}
}
} ) ;
System
.import ( './main.ts' ) //入口文件
.then ( null , console.error.bind ( console ) ); //如果出现错误，转发到浏览器的console中显示错误信息
</script>
</head>
<body>
<canvas id = "canvas" > </canvas>
</body>
</html>
设置好SystemJS后，在集成终端中运行npm run dev后，会发现程序顺利地运行起来了。关于SystemJS更多的用法，请参考https：//www.npmjs.com/package/systemjs。
在使用lite-server服务器热部署及SystemJS后：
* 不再需要使用基于客户端的open in browser插件了。
* 不再需要在<script>标签中使用defer关键词。
* 不再需要设置type = "module"了，一切由SystemJS来掌控。
* 不再需要tsconfig.json文件了。
* 不再需要在集成终端中运行tsc命令来自动编译（转译）JS了，仅需要一次性地调用npm run dev命令启动lite-server服务器。
但是还是建议读者使用tsc --init命令生成tsconfig.json，用于在编码时让VS Code进行严格类型检查，增强代码的健壮性。此时tsconfig.json仅作为类型检测使用，实际并不参与TS的编译（转译）工作。
- 点赞
- 收藏
- 关注作者
评论（0）