深刻理解使用白鷺引擎開發微信小遊戲的構建機制

微信小遊戲一經推出就受到了諸多開發者的極大關注，白鷺引擎也在第一時間推出了微信小遊戲的適配方案。

在這一週中白鷺引擎團隊幫助許多開發者成功將現有的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 環境開發和調試。
指定一名研發負責維護微信小遊戲項目相關邏輯（好比微信接口）的開發、調試與產品發佈。

這樣作的優點是，團隊成員能夠各司其職，每人都專一到本身核心要解決的問題中。因爲白鷺項目和微信項目分屬於兩個不一樣的文件夾，只針對白鷺項目開發的開發者甚至無需瞭解到微信小遊戲的內容。

經過上述內容，咱們但願開發者能夠對白鷺引擎構建微信小遊戲的機制有更深入的瞭解，這將會幫助您更輕鬆的進行開發、以及定位錯誤的緣由，引擎團隊後續會進一步完善白鷺引擎對微信小遊戲的支持。