微信小遊戲一經推出就受到了諸多開發者的極大關注，白鷺引擎也在第一時間推出了微信小遊戲的適配方案。
在這一週中白鷺引擎團隊幫助許多開發者成功將現有的HTML5遊戲轉換爲了微信小遊戲，但仍有開發者遇到了一些開發問題，我們已經在上週整理髮布了《使用白鷺引擎開發微信小遊戲的 FAQ》以供開發者參考。這周我們來深入瞭解一下白鷺引擎構建微信小遊戲的構建機制，開發者通過閱讀這篇文章，除了更深入瞭解到白鷺引擎的構建機制之外，還可以掌握使用白鷺引擎開發微信小遊戲的調試技巧與團隊協作的最佳實踐。
白鷺引擎運行時的核心架構
白鷺引擎運行時的核心架構如下：
通過這張圖，我們可以瞭解到，您使用白鷺引擎開發的遊戲，只要按照白鷺引擎提供的技術標準進行開發，就可以快速將遊戲發佈到微信小遊戲平臺，從而儘可能少的需要了解微信小遊戲的底層技術細節。
在最新版本的白鷺引擎啓動器 Egret Launcher 中，您可以將一個項目發佈爲微信小遊戲。當您執行這步操作，或者是在命令行中執行 egret target 命令之後，您會發現在您的白鷺項目文件夾平級會生成一個後綴爲 _wxgame的文件夾，如下所示：
root
|-- your_project
|-- src
|-- libs
|-- resource
|-- scripts
|-- config.ts
|-- egretProperties.json
|-- your_project_wxgame
|-- game.js
|-- game.json
|-- project.config.json通過這個項目結構，您可以清晰的瞭解到白鷺引擎將項目發佈爲微信小遊戲的基本架構，所有與遊戲相關的邏輯，均會在您的項目 your_project中進行編寫，與微信小遊戲相關的部分，則被放置在與其平級的文件夾中。
當您執行白鷺引擎的構建命令 egret build --target wxgame 後，遊戲的全部代碼與資源會從遊戲項目拷貝到微信小遊戲項目中，然後您就可以使用微信開發者工具打開 your_project_wxgame 文件夾進行預覽，或者直接使用 egret run --target wxgame 命令自動呼起微信開發者工具。
白鷺引擎的構建原理
接下來再向各位開發者介紹，執行 egret build --target wxgame 時，白鷺引擎內部到底做了什麼？
當這個命令執行之後，白鷺引擎會首先運行至 scripts/config.ts，我們檢查一下相關代碼，可以找到這樣的邏輯：
if (target == 'wxgame') {
const outputDir = `../${projectName}_wxgame`;
return {
outputDir,
commands: [
new CompilePlugin({ libraryType: "release" }),
new ExmlPlugin('commonjs'), // 非 EUI 項目關閉此設置
new WxgamePlugin(),
new UglifyPlugin([{
sources: ["main.js"],
target: "main.min.js"
}
]),
new ManifestPlugin({ output: 'manifest.js' })
]
}
}從這段代碼中，我們可以發現，如果開發者將發佈目標設置爲了 wxgame，就會將代碼發佈到項目的平級目錄並添加 _wxgame 後綴，然後在發佈過程中，會先後執行編譯代碼，編譯 EXML 文件，執行微信小遊戲定製插件，混淆代碼，生成清單文件這幾個步驟，其他步驟都很容易理解，我們主要看一下 WxgamePlugin 這個插件在內部做了什麼
WxgamePlugin 的處理機制
通過檢查代碼我們可以發現，微信插件主要做了如下工作：
將 promise 庫從構建管線中刪除，這是因爲由於微信小遊戲已經完美支持了 Promise，所以無需引入這個庫。
將 egret.js / eui.js 等庫追加了 window.egret = egret; ,window.eui = eui等邏輯，這是爲了解決微信的 require機制導致的所有代碼均是局部變量的問題。如果開發者引入了一些自己的第三方庫，也建議在這裏將第三方庫導出到全局對象中。
如何進行調試
目前白鷺引擎支持兩種調試工作流，分別是：
（1）在瀏覽器中調試
通過在您的白鷺引擎項目中執行 egret build 與 egret run，您可以很方便的在 HTML5 環境中進行構建與調試，當您測試成功之後，可以執行 egret build --target wxgame命令將已經準備好的代碼發佈到微信開發者工具中。
這種方式的優點是，基於 HTML5 環境的調試採用 Chrome瀏覽器，非常方便和輕量，同時藉助白鷺引擎的 Chrome 擴展 Egret Inspector，您可以更方便的對遊戲項目的渲染進行有針對性的調試。
這種方式的缺點是，如果開發者必須在微信開發者工具調試（比如調試微信接口），就會調試起來很費勁，因爲微信項目中的代碼已經是白鷺引擎壓縮混淆後的了，爲了解決這個問題，開發者可以在 scripts/config.ts中把 UglifyPlugin插件去掉，這樣生成的就是沒有混淆的 main.js ，而不是混淆後的 main.min.js，進而可以在微信開發者工具中調試 js 代碼。
（2）在微信開發者工具中調試
首先在 scripts/config.ts中把 UglifyPlugin去掉。然後通過egret run --target wxgame啓動微信開發者工具，後續執行 egret build --target wxgame，微信開發者工具就會自動刷新並顯示最新結果，並在微信開發者工具中進行調試。
這種方式的優點是，如果您只針對微信小遊戲進行開發，就無需引入一套 HTML5 的環境，並且調試結果與最終發佈到微信小遊戲上的結果一致。
這種方式的缺點有兩個缺點，首先是目前微信開發者工具暫不支持 Egret Inspector ，還有就是微信開發者工具相對比較重量級，大型項目構建後刷新會有一個較爲明顯的卡死過程。
後續規劃
後續白鷺引擎會和微信團隊配合，完善如下幾個問題：
提升白鷺引擎編譯器在微信開發者工具中的性能，改善構建大型項目後微信開發者工具會有較爲明顯的假死現象。
允許開發者直接在微信開發者工具中調試 TypeScript 代碼。
在微信開發者工具中支持 Egret Inspector 。
通過這些改進，我們的最終目標是使得開發者在微信開發者工具中調試，就可以獲得與 HTML5 開發完全一致的開發效率與調試體驗。
團隊協作工作流
在真實遊戲開發過程中，開發者們往往是多人協同開發，而非單打獨鬥，這就涉及團隊協作以及版本控制問題，我們建議開發者按照以下方式進行團隊開發工作流：
使用 git 或 svn 進行版本控制。在白鷺項目中，將 bin-debug 文件夾添加到忽略列表。在微信項目中，將 js 文件夾與 resource 文件夾添加到忽略列表。
多數項目成員只打開並編輯白鷺項目，這些人無需瞭解微信小遊戲的細節，只需針對 HTML5 環境開發和調試。
指定一名研發負責維護微信小遊戲項目相關邏輯（比如微信接口）的開發、調試與產品發佈。
這樣做的優勢是，團隊成員可以各司其職，每人都專注到自己核心要解決的問題中。由於白鷺項目和微信項目分屬於兩個不同的文件夾，只針對白鷺項目開發的開發者甚至無需瞭解到微信小遊戲的內容。
通過上述內容，我們希望開發者可以對白鷺引擎構建微信小遊戲的機制有更深刻的瞭解，這將會幫助您更輕鬆的進行開發、以及定位錯誤的原因，引擎團隊後續會進一步完善白鷺引擎對微信小遊戲的支持。