《TypeScript图形渲染实战：2D架构设计与实现》 —1.5 使用SystemJS自动编译加载TypeScript

1.5  使用SystemJS自动编译加载TypeScript

　　到目前为止，虽然能自动编译（转译）TS并通过lite-server进行热部署资源，但仍有两个不足之处：

* 需要手动修改import代码来支持模块加载。

* Index.html的Script引入的是编译（转译）后的main.js文件。

　　比如，我们的需求是直接在浏览器中进行TS源码编译（转译），那么SystemJS就能实现。SystemJS 是一个通用的模块加载器，它能在浏览器或者Node.js上动态加载模块，并且支持 CommonJS、AMD、全局模块对象和ES 6模块。

　　SystemJS的另一个优点是，它建立在ES 6模块加载器之上，所以其语法和API在将来很可能是语言的一部分，这会让代码更不会过时。

注意：关于CommonJS、AMD和全局模块等相关内容，请读者自行查阅资料。

1.5.1  NPM本地安装TypeScript库和SystemJS库

　　为了使用SystemJS加载TypeScript，最好本地安装TypeScript库。在VS Code的集成终端中输入npm install typescript@2.8.3 --save 命令，将TypeScript库安装到根目录下的node_modules子目录（若有需要，NPM包安装器会自动创建该目录）中。

　　安装好TypeScript库后，继续在集成终端中输入 npm install systemjs@0.19.47 --save 命令安装SystemJS库。

　　最终的项目结构和package.json文件如图1.23所示。

图1.23  Hello World项目最终结构与package.json文件

　　为了更好地了解SystemJS，将资源管理器中的所有.js文件及tsconfig.json文件都删除。