egret插件使用案例

2018年8月13日，白鹭引擎发布5.2.7 版本。本次版本主要新增了两大功能：命令行增加自动合图插件TextureMergerPlugin，微信小游戏支持库增加二进制和声音缓存方案。

同时，本次版本还是对 5.2 版本的一次集中性缺陷修复，更新修复了大家反馈的涉及2D渲染- JavaScript、AssetsManager、微信小游戏支持库的数个BUG。在此，我们要再次特别感谢开发者们通过Egret社区、白鹭引擎小游戏开发微信群等渠道提交的BUG反馈。

据小编了解，5.2.7版本中新增的自动合图插件可以帮助开发者在开发期使用碎图，在发布后将碎图自动整合为整图发布，提高开发者开发和发布的效率，完善整个开发和发布的工作流。
由于原有的文件缓存方案只缓存了图片和文本资源，所以这次微信小游戏支持库新增的二进制和声音缓存方案，解决游戏第二次进入不重新加载资源问题，节省资源服务器费用，提高用户体验。

引言

本文不详细介绍各插件的细节，只展示使用方法，如果开发者对细节有兴趣可以参考 文档。

为了让开发者以更简单的使用Egret内置的插件，我们将通过一个案例来展示插件的具体使用方法和注意事项。

本文案例从一个刚编写完成的eui卡牌项目开始发布到微信小游戏，为了让代码包的体积更小，更好管理，逐步添加使用不同的插件，以实现不同的需求。

todos

• 使用UglifyPlugin将代码混淆压缩

• 使用ResSplitPlugin把部分资源分离出去

• 使用ZipPlugin把文件压缩成zip格式

• 使用TextureMergerPlugin将纹理合并，且用ConvertResConfigFilePlugin修改res.json配置文件

 

项目初始化

1. 把index.html中的data-scale-mode改成fixedWidth

2. 打开EgretLauncher，将本项目发布成微信小游戏

3. 打开微信开发者工具

 

使用UglifyPlugin压缩代码

在微信开发者工具可以看到，js文件夹中5个库文件和一个main.js。

现在需求是是要把库文件压缩到一个文件lib.min.js中。

回到EgretWing，编辑sctipts下的config.wxgame.ts：

//***其他代码***
//
​
if(command=='build') {
   return{
       outputDir,
       commands: [
           // 清理js，resource文件夹
           newCleanPlugin({ matchers: ["js", "resource"] }),
           newCompilePlugin({ libraryType: "debug", defines: { DEBUG: true, RELEASE: false} }),
           newExmlPlugin('commonjs'), // 非 EUI 项目关闭此设置
           newWxgamePlugin(),
​
           // 压缩插件
           newUglifyPlugin([
              {
                   // 需要被压缩的文件
                   sources: [
                       "libs/modules/egret/egret.js",
                       "libs/modules/eui/eui.js",
                       "libs/modules/assetsmanager/assetsmanager.js",
                       "libs/modules/tween/tween.js",
                  ],
                   // 压缩后的文件
                   target: "lib.min.js"
              }
          ]),
​
           newManifestPlugin({ output: 'manifest.js'})
      ]
  }
  }
​
//
// ***其他代码***

保存后在终端执行：

egret build

可以在微信开发者工具看到发布后的代码，js文件夹内的库文件已经被压缩到lib.min.js。

但是报错，找不到eui，这是因为自动生成的manifest.js里面对js的引用顺序出错，需要优先引用lib.min.js

打开根目录下的mani