借助AMD來解決HTML5遊戲開發中的痛點
遊戲開發的痛點
現在，基于國内流行引擎（LayaAir和Egret）和TypeScript的HTML5遊戲開發有諸多痛點：
- 未采用TypeScript編譯器的增量編譯模式導緻無法達到極緻的編譯效率，進而編碼、運作、調試循環不流暢。
- 代碼的組織方式是使用namespace，為了減少代碼長度和提高代碼輸入的效率，一般使用import來建立别名，但是工具流不支援自動的import或者import檢查。手動去寫import降低了編碼的效率。
- 使用namespace來管理代碼會遇到子產品執行順序無法控制的問題，有些引擎會使用擴充的TypeScript編譯器來解決，這增加了額外的編譯器維護的工作量。其實是沒有必要的。比如egret使用了typescript-plus。再比如，在LayaAir的工作流中，官方引入了第三方的ts處理邏輯。這個算法的時間消耗是随代碼的增多線性上升的。
- 使用namespace帶來一個額外的工作量，就是為了加載開發者的代碼要建立和維護開着的子產品檔案清單，這也是沒有必要的。而且在開發階段，遊戲打開時候每個子產品都要單獨加載，也就說每個子產品都要産生一個http請求，這會降低遊戲打開的速度。可以想象，随着項目的規模逐漸增長，遊戲打開的速度會越來越慢。
AMD
AMD是”Asynchronous Module Definition”的縮寫，意思就是”異步子產品定義”。這是目前最流行的JavaScript/TypeScript代碼的管理方式。本文末尾的參考資料清單中包含了更多關于AMD的資訊。AMD可以幫助我們解決以上的一些問題：
- 在VS Code中，我們可以使用現有的流行插件來實作自動的import，提高編碼效率。
- AMD可以自動管理子產品之間的依賴。AMD為此而生。
ts編譯配置
- ts的watch模式使用了增量編譯，隻有修改的子產品才會被編譯，這樣零秒編譯才得以實作。
- 使用outFile來自動合并所有的子產品檔案，這是tsc已有的功能，我們沒有必要再重複造輪子。而且合并檔案會把開發者子產品的http請求合并成一個，這可以提高開發階段遊戲打開的速度。
示例項目
下面以LayaAir引擎作為示例來講解，源碼從這裡下載下傳https://github.com/wildfirecode/HTML5-Game-AMD-TypeScript.
建立項目
依然使用LayaIDE來建立項目，因為要使用LayaAir引擎的庫檔案。
requirejs
從requirejs官方下載下傳庫檔案，目前的最新版本是2.3.4，這是下載下傳連結http://requirejs.org/docs/release/2.3.4/minified/require.js。把下載下傳的庫檔案放入
./bin
目錄，并且在index.html增加檔案引用以及遊戲入口子產品的啟動。
适配AMD
增加LayaAir引擎适配子產品
adapter.ts
，每一個LayaAir的類都要增加一個适配。比如
Laya.EventDispatcher
:
export const EventDispatcher = Laya.EventDispatcher;
更改ts編譯配置
使用示例項目中的
tsconfig.json
覆寫原來的
tsconfig.json
檔案。這樣我們就可以使用tsc watch模式實作極速編譯，而且還可以把開發者的所有子產品檔案合并為一個檔案。
使用Visual Studio Code作為編碼調試環境
為了友善控制index.html，建議使用VS Code來編譯項目。另外，為了在VS Code中能夠編譯和調試項目，我們需要複制示例項目中的
.vscode
檔案夾到自己項目的根目錄。 編譯使用快捷鍵
Ctrl+Shift+B
，調試使用
F5
,過程基本和LayaAir相同。更多資訊參考VSCode官方文檔。
插件推薦
為了能夠自動import，需要下載下傳額外的VSCode插件，這裡是插件位址 https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero。
參考
- Javascript子產品化程式設計(1)
- Javascript子產品化程式設計(2)
- Javascript子產品化程式設計(3)
- requirejs
- TypeScript Hero
- TypeScript Compiler Options