通过 import 语句将二进制数据导入 React 组件

Question

我想设置一个 React hook（或功能组件）来从 gzip 压缩文件中读取数据，使用

pako

库提取其数据，然后在浏览器中呈现它。

编辑：压缩的二进制文件位于项目本地。它没有托管在其他地方的网络服务器上。

我想到的一个简单测试看起来与此类似：

import { memo } from 'react';

import compressedFile from "./data.json.gz";

import './App.css';

const pako = require('pako');

const App = memo(({}) => {

  try {
    const compressedBytes = new Uint8Array(compressedFile);
    const uncompressedStr = pako.inflate(compressedBytes, { to: 'string' });

    return (
      <div>
        Data: <pre>{uncompressedStr}</pre>
      </div>
    );
  } catch (err) {
    return (
      <div>
        Error: <pre>{err}</pre>
      </div>
    );
  }
});

export default App

但是，由于以下错误，这不起作用：

Uncaught SyntaxError: Invalid or unexpected token (at data.json.gz?import:1:1)

文件

data.json.gz

与

App

位于同一目录中，只是一个gzip压缩的测试文件，例如：

$ echo -e '{"a":123,"b":456}' | gzip -c > data.json.gz

import

可以用来读取二进制数据吗？是否有另一种方法可以直接或间接将二进制文件读入我可以使用

pako

处理的字节数组？

请注意，我正在寻找专门关于直接使用二进制文件而不是 Base-64 或其他重新编码的字符串文件的答案。

Answer 1

据我所知，模块系统需要一个可以解析为 JavaScript 可以理解和执行的格式的文件结构。默认情况下，二进制文件不属于该类别。

我可以想到两种方法来处理这个问题：

从 Webpack 配置文件加载器。

或者简单地使用 fetch:

const response = await fetch("/data.json.gz");
const compressedBytes = await response.arrayBuffer();