现在,基于国内流行引擎(LayaAir 和 Egret)和 TypeScript 的 html5 游戏开发有诸多痛点:
AMD 是 "Asynchronous Module Definition" 的缩写,意思就是 "异步模块定义"。这是目前最流行的 JavaScript/TypeScript 代码的管理方式。本文末尾的参考资料列表中包含了更多关于 AMD 的信息。AMD 可以帮助我们解决以上的一些问题:
下面以 LayaAir 引擎作为示例来讲解,源码从这里下载 https://github.com/wildfirecode/HTML5-Game-AMD-TypeScript.
依然使用 LayaIDE 来创建项目,因为要使用 LayaAir 引擎的库文件。
从 requirejs 官方下载库文件,目前的最新版本是 2.3.4,这是下载链接 http://requirejs.org/docs/release/2.3.4/minified/require.js。把下载的库文件放入
目录,并且在 index.html 增加文件引用以及游戏入口模块的启动。
- ./bin
- <script data-main="js/GameMain" src="./require.js" defer async="true"></script>
增加 LayaAir 引擎适配模块
,每一个 LayaAir 的类都要增加一个适配。比如
- adapter.ts
:
- Laya.EventDispatcher
- export const EventDispatcher = Laya.EventDispatcher;
使用示例项目中的
覆盖原来的
- tsconfig.json
文件。这样我们就可以使用 tsc watch 模式实现极速编译,而且还可以把开发者的所有模块文件合并为一个文件。
- tsconfig.json
为了方便控制 index.html,建议使用 VS Code 来编译项目。另外,为了在 VS Code 中能够编译和调试项目,我们需要复制示例项目中的
文件夹到自己项目的根目录。 编译使用快捷键
- .vscode
,调试使用
- Ctrl+Shift+B
, 过程基本和 LayaAir 相同。更多信息参考 VSCode 官方文档。
- F5
为了能够自动 import,需要下载额外的 VSCode 插件,这里是插件地址 https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero。
来源: http://www.cnblogs.com/wildfirecode/p/7382612.html