HTML5游戏开发(二):使用TypeScript编写代码 | 您所在的位置:网站首页 › typescript开发游戏后端 › HTML5游戏开发(二):使用TypeScript编写代码 |
《HTML5游戏开发》系列文章的目的有:一、以最小的成本去入门egret小项目开发,官方的教程一直都是面向中重型;二、egret可以非常轻量;三、egret相比PIXI.js和spritejs文档更成熟、友好;四、学习从0打造高效的开发工作流。 HTML5游戏开发(一):3分钟创建一个hello world HTML5游戏开发(二):使用TypeScript编写代码 HTML5游戏开发(三):使用webpack构建TypeScript应用 HTML5游戏开发(四):飞机大战之显示场景和元素 HTML5游戏开发(五):飞机大战之让所有元素动起来工欲善其事,必先利其器。接下来两篇文章,我们将会打造基于TypeScript+webpack的高效工作流程。 本篇文章,我们将会用TypeScript来重新改造一下之前的hello world实例。 项目完整源码请见:github.com/wildfirecod… 在线地址:wildfirecode.com/egret-types… 将会有哪些变化 因为我们只是改变main.js的编写的方式,即由JavaScript改为TypeScript,那么index.html不会有所变化。 我们将引入TypeScript工作流程。 创建TypeScript配置首先我们在项目根目录创建TypeScript配置文件tsconfig.json并添加以下配置内容: { "compilerOptions": { "module": "es6", "target": "es5" } }配置会告诉TypeScript构建工具,我们使用ES6 module来管理代码,并且我们的构建目标是ES5,这使得我们的代码可以跑在比较老的浏览器上。 修改代码首先我们把main.js修改为main.ts。 之后我们创建全局对象egret的TypeScript声明文件defs.d.ts,并添加内容: declare var egret:any; 编译代码我们先安装TypeScript编译工具,这是一个全局命令。 npm install -g typescript然后执行命令tsc来编译TypeScript代码。 tsc接着,我们会发现根目录生成了main.js这个JavaScript文件。要说明的一点是,我们现在使用的TypeScript语言编译器是最新版本的。你可以打开main.js,看一看里面的内容相对于main.ts有什么变化。 运行实例我们用chrome来运行index.html,便可以看到在画布上出现了如上例一样的红色的hello world字样。 下一步ok。上述的步骤非常的简单,而且看起来非常的不够酷。下一篇文章我们会考虑使用webpack来打造基于TypeScript的高效开发流程。 |
CopyRight 2018-2019 实验室设备网 版权所有 |