Estoy creando un paquete NPM pequeño que esencialmente serviría como una importación de datos conveniente en una aplicación React. Mi paquete actualmente tiene un método exportado, getSystems() , que devuelve una matriz de objetos. El código del módulo lee el archivo de datos usando fs/promises.readFileSync que obviamente no está disponible en un entorno de navegador.
¿Cómo puedo agrupar los datos en mi paquete para que pueda usarse en una aplicación React?
Esto es lo que está haciendo el módulo:
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;Esto funciona en el nodo. Supongo que lo que necesito es una forma de configurar la compilación de tal manera que los datos se incluyan en los archivos JS de salida.
Código completo aquí .
Descargo de responsabilidad: entiendo que esto generalmente se hace a través de una API en lugar de inflar el código de la aplicación con datos (que es lo que estoy haciendo aquí, supongo). Esto es una especie de cosa de aprendizaje y prueba. Y también me cansé de copiar archivos de datos en Dockerfiles... :)
Resulta que si uso archivos JSON como fuente y solo los importo, el módulo funciona en los navegadores. Si bien el paquete webpack se vuelve bastante grande, gzip parece hacer un gran trabajo al comprimir los datos incrustados, así que supongo que este es el camino a seguir.