04构建ts开发编译和调试环境（读书笔记：TypeScript图形渲染实战算法分析与架构设计）

最新推荐文章于 2023-09-13 17:24:53 发布

史小亓

最新推荐文章于 2023-09-13 17:24:53 发布

阅读量489

点赞数

分类专栏：读书笔记文章标签： TypeScript 模块化 SystemJS lite-server

本文链接：https://blog.csdn.net/weixin_39331259/article/details/92084593

版权

读书笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

安装nodejs https://nodejs.org/en/ (使用nodejs包管理器npm安装ts开发环境)

安装Visual Studio Code代码编辑器 https://code.visualstudio.com，新的版本安装后可以在终端通过‘code’指令打开编辑器；

npm全局安装TypeScript语言编译器（ts最终被转译成js）

npm install -g typescript / sudo npm install -g typescript，使用tsc -v查看版本（tsc是TypeScript Compiler的缩写，-g表示全局安装）；
（一）编写第一个helloworld demo，手动转译，使用tsc 文件名将其转译成js，代码提交在github中。
https://github.com/zsq77/TypeScript-Graphic-Rendering-in-Practice-Design-and-Implementation-of-2D-Architecture/tree/master/01Chapter/helloWorldDemo
（二）手动转译麻烦，实现自动转译。使用tsc --init生成tsconfig.json文件。tsconfig.json文件中的编译命令选项，参考官网相关说明。此时发现main.ts被标记为红色，并且有一个错误。因为在默认状态下，tsconfig.json中的strict被设置为true，VSCode会对所有ts进行严格类型检测(strict type --checking)。修改代码使其符合检测要求。

因为canvas.getContext(“2d”)的返回类型是CanvasRenderingContext2D或者null。所以补充成员变量context的类型即可。点击terminal中的run task，选择tsc:watch，此时ts转译器会监视所有后缀名为ts的文件，发生变化时，会自动重新转译。
tsconfig.json中的target命令选项规定了将TypeScript代码编译（转译）成哪个ECMAScript（简称ES）标准，标准有ES 3（default）、ES 5、ES 2015、ES 2016、ES 2017、ES 2018和ESNEXT，一般将其设置为ES 5标准。
module命令选项指定生成哪个模块系统代码，模块系统有commonjs，amd，system，umd和es2015,为了在html中使用模块化功能，需要选择es2015。实现自动转译的代码提交在github中。
https://github.com/zsq77/TypeScript-Graphic-Rendering-in-Practice-Design-and-Implementation-of-2D-Architecture/tree/master/01Chapter/aotuTranslationDemo
（三）模块化开发ts

target：es5；module：es2015。创建canvas2d文件夹，使用export导出Canvas2D中的代码，在main.ts中使用import导入；刷新页面后浏览器控制台报错（main.js:2 Uncaught ReferenceError: exports is not defined）。
因为export和import属于es2015标准的内容，需要在script标签中加入type=‘module’。加入后运行，继续报错如下：(Access to script at '…'from origin ‘null’ has been blocked by CORS policy:Cross origin requests are only supported for protocol schemes:http,data,chrome,chrome-extension,https)跨域问题。可以使用Tomcat或者Apache从http服务器加载文件解决问题，但此处我们使用nodejs；

使用lite-server搭建本地服务器解决跨域问题：（1）npm init -f生成package.json文件；（2）npm install lite-server --save-dev，安装lite-server；（3）安装完成后打开package.json在scripts中输入：“dev”:“lite-server”；（4）输入npm run dev运行lite-server，此时打开http://localhost:3000/，控制台继续报错，服务器没有找到文件，因为js模块化导入需要以.js为扩展名。

修改如下

经过以上操作后可以看到效果，但是有时候还是会出错，此时可以修改Canvas2D的导出方式。

至此，保存好修改的内容后，lite-server会自动刷新页面。

（四）使用SystemJS自动编译加载TypeScript

使用 tsc --init添加tsconfig.json配置文件，通过执行Terminal–>run task实现自动编译；使用lite-server进行热资源部署，但有两个不足：（1）需要手动修改import来支持模块加载；（2）只能通过index.html的script引入的转译后的脚本。

使用SystemJS解决上述问题。SystemJS是一个通用模块加载器，能在浏览器或者nodejs上动态加载模块，支持CommonJS，AMD，全局模块对象和ES6模块；SystemJS建立在ES6模块加载器上，其语法和API将来可能是语言的一部分，会让代码不会过时。

(1)为了使用SystemJS加载ts，地安装TypeScript库和SystemJS库：npm install typescript@2.8.3 --save；npm install systemjs@0.19.47 --save。
(2)SystemJS直接编译TypeScript源码。如下，设置好SystemJS后，在终端执行npm run dev运行项目。