2

JavaScript 中对 gzip 的支持出奇的薄弱。所有浏览器都实现它以支持 Content-encoding: gzip 标头，但没有标准访问浏览器的 gzip / gunzip 功能。因此，必须使用一种仅 javascript 的方法。周围有一些旧的 gzip-js 库，但它们似乎不支持流，并且已经 6 年没有维护了。

然后是 pako，维护得更积极，但如果使用他们自己的发行版，也不会看到启用流，因此您需要将整个二进制数组和 gzip 输出保存在内存中。我可能错了，但这就是我正在收集的内容。

JSZip 是一个设计良好的工具，并且支持流“Workers”。JSZip 使用 pako。ZIP 条目是 DEFLATEd 的，并且像 gzip 一样具有 CRC32 校验和，当然只是组织方式略有不同。仅考虑 JSZip 源，看起来很容易将 pako 的 gzip 压缩选项公开到 JSZip 的流支持中。如果我同时使用 JSZip 并且还需要 gzip，我为什么要加载 pako 两次？

我希望我可以破解 JSZip 的内部结构并连接到底层的 Workers，并使用基于 pako 的“Flate”（即，in-flate / de-flate）实现和 pako 识别的 gzip 选项。用 Chrome javascript 控制台探索了它，但我无法通过。可分发的可加载 jszip.js 或 jszip-min.js 隐藏了所有内部组件，无法访问脚本。我无法打开那个盒子。

所以我一直在查看 git hub 源代码，看看我是否可以构建自己的 jszip.js 或 jszip-min.js 可加载模块，在那里我将导出更多内部资源以供我的页面使用，但一直在这个20 年来，UNIX 制作文件，ant，一切，当谈到打包 javascript 模块的这些技巧时，我觉得自己完全是个新手，我看到 bower 和“gruntfiles”似乎都与 node.js 相关，我不知道不需要（仅客户端浏览器）并且从未使用过，所以我不知道从哪里开始。

4

1 回答 1

3

正如 Evert 所说，我应该首先检查文档https://stuk.github.io/jszip/documentation/contributing.html中的构建说明。

很明显，第一个需要 git 并进行本地克隆。然后需要设置 grunt 命令行，它需要 npm，它是 nodejs 自带的。一旦 grunt 运行，还有其他依赖项需要 npm install-ed。这是通常的小事关闭并且不起作用，但是足够的谷歌搜索和蛮力重试以完成它。

现在 jszip/lib/index.js 包含最终导出的资源。就是那个 JSZip 对象。所以只是为了玩内部的东西，我可以将这些添加到 JSZip 对象中，例如，它已经包含：

JSZip.external = require("./external");
module.exports = JSZip;

所以我们可以很容易地添加我们想要玩的其他资源：

JSZip.flate = require("./flate");
JSZip.DataWorker = require('./stream/DataWorker');
JSZip.DataLengthProbe = require('./stream/DataLengthProbe');
JSZip.Crc32Probe = require('./stream/Crc32Probe');
JSZip.StreamHelper = require('./stream/StreamHelper');
JSZip.pako = require("pako");

现在，我可以在 Chrome 调试器中创建概念证明：

(new JSZip.StreamHelper(
   (new JSZip.DataWorker(Promise.resolve("Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!")))
      .pipe(new JSZip.DataLengthProbe("uncompressedSize"))
      .pipe(new JSZip.Crc32Probe())
      .pipe(JSZip.flate.compressWorker({}))
      .pipe(new JSZip.DataLengthProbe("compressedSize"))
      .on("end", function(event) { console.log("onEnd: ", this.streamInfo) }), 
   "uint8array", "")
).accumulate(function(data) { console.log("acc: ", data); })
 .then(function(data) { console.log("then: ", data); })

这有效。我一直在为自己制作一个带有 gzip 标头和预告片的 GZipFileStream，正确地创建了所有内容。我将 jszip/lib/generate/GZipFileWorker.js 放入如下：

'use strict';

var external = require('../external');
var utils = require('../utils');
var flate = require('../flate');
var GenericWorker = require('../stream/GenericWorker');
var DataWorker = require('../stream/DataWorker');
var StreamHelper = require('../stream/StreamHelper');
var DataLengthProbe = require('../stream/DataLengthProbe');
var Crc32Probe = require('../stream/Crc32Probe');

function GZipFileWorker() {
    GenericWorker.call(this, "GZipFileWorker");
    this.virgin = true;
}
utils.inherits(GZipFileWorker, GenericWorker);

GZipFileWorker.prototype.processChunk = function(chunk) {
    if(this.virgin) {
        this.virgin = false;
        var headerBuffer = new ArrayBuffer(10);
        var headerView = new DataView(headerBuffer);
        headerView.setUint16(0, 0x8b1f, true); // GZip magic
        headerView.setUint8(2, 0x08); // compression algorithm DEFLATE
        headerView.setUint8(3, 0x00); // flags
        // bit 0   FTEXT
        // bit 1   FHCRC
        // bit 2   FEXTRA
        // bit 3   FNAME
        // bit 4   FCOMMENT
        headerView.setUint32(4, (new Date()).getTime()/1000>>>0, true);
        headerView.setUint8(8, 0x00); // no extension headers
        headerView.setUint8(9, 0x03); // OS type UNIX
        this.push({data: new Uint8Array(headerBuffer)});
    }
    this.push(chunk);
};

GZipFileWorker.prototype.flush = function() {
    var trailerBuffer = new ArrayBuffer(8);
    var trailerView = new DataView(trailerBuffer);
    trailerView.setUint32(0, this.streamInfo["crc32"]>>>0, true);
    trailerView.setUint32(4, this.streamInfo["originalSize"]>>>0 & 0xffffffff, true);
    this.push({data: new Uint8Array(trailerBuffer)});
};

exports.gzip = function(data, inputFormat, outputFormat, compressionOptions, onUpdate) {
    var mimeType = data.contentType || data.mimeType || "";
    if(! (data instanceof GenericWorker)) {
        inputFormat = (inputFormat || "").toLowerCase();
        data = new DataWorker(
            utils.prepareContent(data.name || "gzip source",
                                 data,
                                 inputFormat !== "string",
                                 inputFormat === "binarystring",
                                 inputFormat === "base64"));
    }
    return new StreamHelper(
        data
            .pipe(new DataLengthProbe("originalSize"))
            .pipe(new Crc32Probe())
            .pipe(flate.compressWorker( compressionOptions || {} ))
            .pipe(new GZipFileWorker()),
        outputFormat.toLowerCase(), mimeType).accumulate(onUpdate);
};

在 jszip/lib/index.js 我只需要这个：

var gzip = require("./generate/GZipFileWorker");
JSZip.gzip = gzip.gzip;

这就像这样：

JSZip.gzip("Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!", "string", "base64", {level: 3}).then(function(result) { console.log(result); })

我可以将结果粘贴到这样的 UNIX 管道中：

$ echo -n "H4sIAOyR/VsAA/NIzcnJVwjPL8pJUVTwoJADAPCORolNAAAA" |base64 -d |zcat

它正确返回

Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!

它也可以与文件一起使用：

JSZip.gzip(file, "", "Blob").then(function(blob) { 
     xhr.setRequestProperty("Content-encoding", "gzip");
     xhr.send(blob); 
  })

我可以将 blob 发送到我的网络服务器。我已经检查过大文件确实是按块处理的。

我唯一不喜欢的是最终的 blob 仍然组装成一个大的 Blob，所以我假设它将所有压缩数据保存在内存中。如果那个 Blow 是那个 Worker 管道的一个端点会更好，这样当 xhr.send 从 Blob 中逐块抓取数据时，它才会消耗来自 Worker 管道的块。但是，鉴于它只包含压缩内容，并且可能（至少对我而言）大文件是不需要 gzip 压缩的多媒体文件，因此影响会大大减轻。

我没有编写 gunzip 函数，因为坦率地说，我不需要，也不想制作一个无法正确解析 gzip 标头中的扩展标头的函数。一旦我将压缩内容上传到服务器（在我的情况下为 S3），当我再次获取它时，我假设浏览器会为我解压缩。我还没有检查过。如果它成为一个问题，我会回来更多地编辑这个答案。

这是我在 github 上的 fork：https ://github.com/gschadow/jszip ，拉取请求已经输入。

于 2018-11-27T13:29:08.750 回答