Importar JSON como un módulo ESM en JavaScript nativo

Importar archivos JSON puede ser muy útil para cargar configuración en una aplicación. Para hacerlo, normalmente hemos tenido que usar algunas triquiñuelas porque de forma nativa no es posible.

Esto va a cambiar porque tenemos una propuesta en el TC39 para poder importar JSON como si fuera un módulo. En el momento de escribir este post, la propuesta ya está en fase 3, por lo que más pronto que tarde esta funcionalidad verá la luz en JavaScript.

Cómo funciona

Imagina que en la raíz de tu aplicación tienes un archivo config.json con este contenido:

{
  "appName": "Mi aplicación",
  "version": "1.0.0"
}

Pues bien, esto es lo que podremos hacer importando JSON como si fuera un módulo:

import config from "./config.json" assert { type: "json" }

console.log(
  `Esto es la app "${config.appName}" en la versión ${config.version}`
)
// Esto es la app "Mi aplicación" en la versión 1.0.0

Y así de fácil podremos cargar la información contenida en un archivo JSON. Puede parecer raro tener que indicar específicamente que cargamos un archivo JSON con el assert, pero esto es necesario para evitar problemas de seguridad.

Cómo se hacía hasta ahora

La triquiñuela que se ha venido usando para importar un archivo JSON ha sido a través de la función fetch y promesas JavaScript:

// función para cargar archivo JSON
async function getConfigData(path) {
  const urlConfig = new URL(path, import.meta.url)

  const response = await fetch(urlConfig.toString())
  const json = await response.json()

  return json
}

// cargamos JSON en config
const config = await getConfigData("config.json")
console.log(
  `Esto es la app "${config.appName}" en la versión ${config.version}`
)
// Esto es la app "Mi aplicación" en la versión 1.0.0

Como puedes ver, con fetch conseguimos obtener el archivo de configuración. Con import.meta.url conseguimos que tenga en cuenta el directorio donde se ejecuta el código por si cargamos archivos con una ruta relativa.

Los inconvenientes de hacerlo así es que el código se complica un poco y que en Node no hay forma, de momento, de usar fetch.

Este artículo está basado en el artículo ECMAScript proposal: JSON modules de Axel Rauschmayer en su blog 2ality.