在Vite+React应用程序中从zlib导入出现错误

Question

我正在尝试从我们的 react+vite 应用程序上的 zlib** 包导入 gunzipSync。但是，从包中导入任何内容时，我收到以下错误消息：

✘ [ERROR] Could not resolve "./zlib_bindings"

    node_modules/zlib/lib/zlib.js:1:25:
      1 │ module.exports = require('./zlib_bindings');
        ╵                          ~~~~~~~~~~~~~~~~~

2:41:58 PM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/zlib/lib/zlib.js:1:25: ERROR: Could not resolve "./zlib_bindings"
    at failureErrorWithLog (/home/jukka/documents/NavigilService/node_modules/esbuild/lib/main.js:1649:15)
    at /home/jukka/documents/NavigilService/node_modules/esbuild/lib/main.js:1058:25
    at /home/jukka/documents/NavigilService/node_modules/esbuild/lib/main.js:1525:9
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

在我们使用 create-react-app 的旧版本应用程序中，从 zlib 导入任何内容都没有任何问题。我认为这是由于 webpack 知道如何处理 zlib，因为 Vite 不使用 webpack。

有人知道如何让zlib在Vite+React下工作吗？

Answer 1

设法使用 pako 包从 fetch 中解压缩 gzip 数据。如果有人遇到同样的问题，我是这样做的：

import pako from 'pako';

const checkUnZip = async data => {
  try {
    if (data.body.isBase64Encoded) {
      let strData = atob(data.body.zipped);
      // Convert binary string to character-number array
      const charData = strData.split('').map(x => x.charCodeAt(0));
      // Turn number array into byte-array
      const binData = new Uint8Array(charData);
      // Pako magic
      const pakoData = pako.inflate(binData);
      // Convert gunzipped byteArray back to ascii string:
      strData = String.fromCharCode.apply(null, new Uint16Array(pakoData));
      const unzippedData = { statusCode: data.body.statusCode, body: JSON.parse(strData) };
      return unzippedData;
    }
    return data;
  } catch (error) {
    return data;
  }
};

// in middle of your fetch-logic/middleware/whatever
...
    data = await response.json();
    data = await checkUnZip(data);
// continue with your operation
...

这并没有解决导入 zlib 的问题，所以我不会将其标记为我的问题的解决方案。