深刻理解使用白鹭引擎开发微信小游戏的构建机制

微信小游戏一经推出就受到了诸多开发者的极大关注，白鹭引擎也在第一时间推出了微信小游戏的适配方案。

在这一周中白鹭引擎团队帮助许多开发者成功将现有的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 环境开发和调试。
指定一名研发负责维护微信小游戏项目相关逻辑（好比微信接口）的开发、调试与产品发布。

这样作的优点是，团队成员能够各司其职，每人都专一到本身核心要解决的问题中。因为白鹭项目和微信项目分属于两个不一样的文件夹，只针对白鹭项目开发的开发者甚至无需了解到微信小游戏的内容。

经过上述内容，咱们但愿开发者能够对白鹭引擎构建微信小游戏的机制有更深入的了解，这将会帮助您更轻松的进行开发、以及定位错误的缘由，引擎团队后续会进一步完善白鹭引擎对微信小游戏的支持。