Hay varias preguntas similares relacionadas con la importación o la solicitud de archivos JSON (.json) al compilar el código en TypeScript. Mi pregunta es específicamente sobre la necesidad de un archivo JSON en un módulo ES6 que se transfiere al destino del nodo actual mediante Babel (núcleo y cli). No veo ninguna opción de configuración como resolveJsonModule de TypeScript para Babel, lo que me lleva a creer que debería funcionar sin ninguna configuración.
Estoy importando un archivo JSON ( example.json ) desde un archivo JS ( index.js ) en el mismo directorio, haciendo lo siguiente:
const myObj = {}; myObj.myJSON = require("./example.json");También intenté importar usando la sintaxis ES6 más nueva como:
import * as myJson from "./example.json";Estoy usando VSCode y, en ambos casos, la función de autocompletar me sugiere la ruta relativa correcta al archivo JSON en el código fuente.
El directorio se parece a:
src/ |_dir/ |_index.js |_example.json En ambos casos, al transpilar con babel-cli usando el comando: babel src --out-dir build , la compilación producida se ve así:
src/ |_dir/ |_index.js Por alguna razón, el archivo example.json no está incluido, a pesar de que se requiere en el archivo index.js compilado:
... const myObj = {}; myObj.myJSON = require("./example.json"); ... Como tal, cuando se ejecuta la compilación transpilada con el nodo usando node build/index.js , arroja el error:
internal/modules/cjs/loader.js:883 throw err; ^ Error: Cannot find module './example.json' Require stack: - ... - .../build/index.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15) at Function.Module._load (internal/modules/cjs/loader.js:725:27) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at Object.<anonymous> (.../index.js:15:25) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) { code: 'MODULE_NOT_FOUND', requireStack: [ ... ] }Aquí está la configuración relevante:
package.json
... "scripts": { "build": "babel src --out-dir build", "start": "node build/index.js", ... }, "devDependencies": { "@babel/cli": "^7.16.8", "@babel/core": "^7.16.7", "@babel/preset-env": "^7.16.8", ... }, "dependencies": { "@babel/plugin-transform-runtime": "^7.16.8", ... } .babelrc
{ "presets": [ [ "@babel/preset-env", { "targets": { "node": "current" } } ] ], "plugins": [ "@babel/plugin-transform-runtime" ] }Creo que la respuesta aburrida es que Babel solo procesa archivos JavaScript. Cualquier cosa que no sea JavaScript (p. ej., JSON) se deja atrás, aunque "parece" que el archivo JSON es una dependencia de código con la que Babel debería "hacer lo correcto" (ya que require d o import ) -- o al menos darte un error o una advertencia. Pero no es así como se diseñó Babel en este caso de uso.
Necesita hacer un trabajo adicional para copiar archivos de datos. Sugiero tres alternativas principales para elegir:
--copy-files de Babel que copia todo. Puede espolvorear --ignore patrones para tratar de evitar copiar cosas que no desea que se copien.shx npm que le permite ejecutar comandos de sistema de archivos de estilo Unix de una manera multiplataforma desde scripts de paquete.json. "build": "babel src --out-dir build && npx shx cp src/*.json dist/"