借助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增加文件引用以及游戲入口模塊的啟動。
<script data-main="js/GameMain" src="./require.js" defer async="true"></script>
適配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。