在NPM模块中实现静态数据资产供浏览器使用

Question

我正在做一个小NPM包，这将实质上作为一个方便的数据导入在一个反应应用程序。我的包目前有一个导出的方法，getSystems()，它返回一个对象数组。模块代码使用fs/promises.readFileSync读取数据文件，显然在浏览器环境中是不可用的。

我如何将数据捆绑在包中，以便将其用于React应用程序？

以下是该模块所做的工作：

import { decode } from "@msgpack/msgpack";
import { readFileSync } from "fs";
import path from "path";

const file = readFileSync(path.join(__dirname, "../assets/systems.dat"));
const systems = decode(file);

export const getSystems = () => systems;

这在节点中起作用。我想我需要的是一种方法来配置构建，以便将数据包含在输出JS文件中。

全代码这里。

免责声明:我知道这通常是通过API来完成的，而不是用数据充实应用程序代码(我想这就是我在这里所做的)。这是一种学习和测试的方式。而且我也厌倦了在Dockerfile中复制数据文件。:)

Answer 1

结果发现，如果我使用JSON文件作为源代码并只导入它们，该模块就可以在浏览器中工作。虽然webpack包变得相当大，但是gzip似乎在压缩嵌入式数据方面做得很好，所以我想这是最好的方法。