深入理解使用白鹭引擎开发微信小游戏的构建机制
发表于2018-01-11
微信小游戏一经推出就受到了诸多开发者的极大关注，白鹭引擎也在第一时间推出了微信小游戏的适配方案。
在这一周中白鹭引擎团队帮助许多开发者成功将现有的HTML5游戏转换为了微信小游戏，但仍有开发者遇到了一些开发问题，我们已经在上周整理发布了《使用白鹭引擎开发微信小游戏的 FAQ》以供开发者参考。这周我们来深入了解一下白鹭引擎构建微信小游戏的构建机制，开发者通过阅读这篇文章，除了更深入了解到白鹭引擎的构建机制之外，还可以掌握使用白鹭引擎开发微信小游戏的调试技巧与团队协作的最佳实践。
白鹭引擎运行时的核心架构
白鹭引擎运行时的核心架构如下：
通过这张图，我们可以了解到，您使用白鹭引擎开发的游戏，只要按照白鹭引擎提供的技术标准进行开发，就可以快速将游戏发布到微信小游戏平台，从而尽可能少的需要了解微信小游戏的底层技术细节。
在最新版本的白鹭引擎启动器 Egret Launcher 中，您可以将一个项目发布为微信小游戏。当您执行这步操作，或者是在命令行中执行 egret target 命令之后，您会发现在您的白鹭项目文件夹平级会生成一个后缀为 _wxgame的文件夹，如下所示：
通过这个项目结构，您可以清晰的了解到白鹭引擎将项目发布为微信小游戏的基本架构，所有与游戏相关的逻辑，均会在您的项目 your_project中进行编写，与微信小游戏相关的部分，则被放置在与其平级的文件夹中。
当您执行白鹭引擎的构建命令 egret build --target wxgame 后，游戏的全部代码与资源会从游戏项目拷贝到微信小游戏项目中，然后您就可以使用微信开发者工具打开 your_project_wxgame 文件夹进行预览，或者直接使用 egret run --target wxgame 命令自动呼起微信开发者工具。
白鹭引擎的构建原理
接下来再向各位开发者介绍，执行 egret build --target wxgame 时，白鹭引擎内部到底做了什么？
当这个命令执行之后，白鹭引擎会首先运行至 scripts/config.ts，我们检查一下相关代码，可以找到这样的逻辑：
从这段代码中，我们可以发现，如果开发者将发布目标设置为了 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 环境开发和调试。
指定一名研发负责维护微信小游戏项目相关逻辑（比如微信接口）的开发、调试与产品发布。
这样做的优势是，团队成员可以各司其职，每人都专注到自己核心要解决的问题中。由于白鹭项目和微信项目分属于两个不同的文件夹，只针对白鹭项目开发的开发者甚至无需了解到微信小游戏的内容。
通过上述内容，我们希望开发者可以对白鹭引擎构建微信小游戏的机制有更深刻的了解，这将会帮助您更轻松的进行开发、以及定位错误的原因，引擎团队后续会进一步完善白鹭引擎对微信小游戏的支持。