egret白鹭引擎JSZip-ZipPlugin使用

前言

在 Egret 项目中，发布的时候可以使用 压缩插件将资源（图片，配置文件等）压缩成一个 .zip 文件，然后使用JSZip读取 .zip 文件的内容。

测试环境

Egret v5.2.10
JSZip https://github.com/egret-labs/egret-game-library
npm install cross-zip https://www.npmjs.com/package/cross-zip

Cross-zip安装/ZipPlugin设置压缩规则

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

为了减少加载次数和传输量，我们可以把文件压缩成zip格式，使用的时候可以使用第三方库JSZip来读取使用zip文件。

使用ZipPlugin插件之前，需要安装cross-zip 和 cross-zip-cli ， 在终端中输入：

//全局安装
npm install cross-zip -g  
npm install cross-zip-cli -g

如果没有安装 会报错：Property 'Unzip' does not exist on type 'typeof Zlib'

Error D:/XXX.ts (973,23): Property 'Unzip' does not exist on type 'typeof Zlib'.
Error D:/XXX.ts (893,23): Property 'Unzip' does not exist on type 'typeof Zlib'.
Error D:/XXX.ts (72,31): Namespace 'Zlib' has no exported member 'Unzip'.
Error D:/XXX.ts (221,28): Property 'Unzip' does not exist on type 'typeof Zlib'.

安装完成之后，在config.wxgame.ts添加代码：

new ZipPlugin({
    mergeSelector: p => {
        // 如果文件是assets/路径下的， 压缩到assets.zip
        if (p.indexOf("assets/") >= 0) {
            return "assets.zip"
        }
    }
})

参考的这里：使用Egret插件压缩代码包体积，减少请求数量的实战教程

按照Egret-第三方库的使用方法导入JSZip后发布微信小程序遇到以下问题：

错误1 t.createElementNS is not a function

修改:webapp-adapter.js，增加一个方法（我用这个没生效）

createElementNS: function createElementNS(nameSpace, tagName) {
　　return this.createElement(tagName)
}

看日志可以得知，createElementNS 不被支持，那么我们可以将所有 createElementNS 改为 createElement。

document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );
// 改为 ==>
document.createElement( 'canvas' );

错误2 ReferenceError: JSZip is not defined

这个是微信里面不认window[xxx]的原因

修改jszip.js开头部分为

!function (a) { if ("object" == typeof exports && "undefined" != typeof module){
　　　window.JSZip = a();
　　　module.exports = a();
}

错误3 　VM9492:1 Error: The constructor with parameters has been removed in JSZip 3.0, please check the upgrade guide.

VM9492:1 Error: The constructor with parameters has been removed in JSZip 3.0, please check the upgrade guide.
    at n (jszip.min.js? [sm]:1)
    at main.min.js:5
    at assetsmanager.min.js? [sm]:1
    at <anonymous>

解决办法：
Upgrade Guide From 2.x to 3.0.0
https://stuk.github.io/jszip/documentation/upgrade_guide.html

使用3.0版本的语法：

Egret-JSZip库说明-http://developer.egret.com/cn/github/egret-docs/extension/jszip/jszip/index.html

读取zip文件
首先将 .zip 文件配置到default.res.json中，便于后面读取使用。

// 使用res获取到zip文件
RES.getResAsync('xx_zip').then((data) => {
    // 解压，读取
    JSZip.loadAsync(data)
    //  do something ...
})

加载json

RES.getResAsync('json_zip').then((data) => {
    // 解压，读取
    JSZip.loadAsync(data).then((zipdata) => {
        return zipdata.file('xxx.json').async('text')
    }).then(text => {
        let jsonData = JSON.parse(text)
        console.log(jsonData)
    })
})

加载图片

RES.getResAsync('img_zip').then((data) => {
    // 解压，读取
    JSZip.loadAsync(data).then((zipdata) => {
        // 把数据解析为base64
        return zipdata.file('img/xxx.jpg').async('base64')
    }).then(base64 => {
        base64 = "data:image/png;base64," + base64
        var img: eui.Image = new eui.Image();
        img.source = base64;
        this.addChild(img);
    })
})

生成zip文件

var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
// 创建images文件夹
var img = zip.folder("images");
// 二进制数据
var imgData = "R0lGODdhBQAFAIACAAAAAP/eACwAAAAABQAFAAACCIwPkWerClIBADs=";
img.file("smile.gif", imgData, { base64: true });
zip.generateAsync({ type: "blob" }).then((blob) => {
    saveAs(blob, "example.zip")
})

*** 本文章转载:Egret插件】JSZip-ZipPlugin踩坑记