@babel/plugin-transform-json-modules

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Transforma declaraciones import ... with { type: "json" } en APIs específicas de cada plataforma para leer y luego procesar con JSON.parse el archivo importado.

La transformación aplicada por este plugin depende de la opción de nivel superior targets para determinar si el código generado debe ser compatible con Node.js, navegadores, o ambos. Cuando se dirige a Node.js, el código generado también variará según si estás compilando módulos a CommonJS o no.

precaución

Este plugin no puede utilizarse al compilar módulos a AMD, SystemJS o UMD.

precaución

Este plugin solo transforma declaraciones de importación, no llamadas dinámicas import().

Ejemplo

input.js

import data from "./data.json" with { type: "json" };

se transformará en

Browsers

output.js

const data = await fetch(import.meta.resolve("./data.json")).then(r => r.json());

Node.js (ESM)

output.mjs

import { readFileSync as _readFileSync } from "fs";
const data = JSON.parse(_readFileSync(new URL(import.meta.resolve("./data.json"))));

Node.js (CommonJS)

output.cjs

"use strict";

const data = JSON.parse(require("fs").readFileSync(require.resolve("./data.json")));

Browsers and Node.js (ESM)

output.js

const data = await (
  typeof process === "object" && process.versions?.node
    ? import("fs").then(fs => fs.promises.readFile(new URL(import.meta.resolve("./data.json")))).then(JSON.parse)
    : fetch(import.meta.resolve("./data.json")).then(r => r.json())
);

Instalación

npm

npm install --save-dev @babel/plugin-transform-json-modules

Yarn

yarn add --dev @babel/plugin-transform-json-modules

pnpm

pnpm add --save-dev @babel/plugin-transform-json-modules

Bun

bun add --dev @babel/plugin-transform-json-modules

Uso

Mediante un archivo de configuración (Recomendado)

babel.config.json

{
  "plugins": ["@babel/plugin-transform-json-modules"]
}

Mediante la CLI

Shell

babel --plugins=@babel/plugin-transform-json-modules script.js

Mediante la API de Node

JavaScript

require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-json-modules"],
});

Opciones

uncheckedRequire

Tipo: boolean
Valor predeterminado: false
Añadido en v7.25.0

Cuando se establece en true, el plugin generará una salida más simple usando require directamente para importar el archivo JSON. Al dirigirse a CommonJS, esta opción produce un resultado más fácil de analizar para los bundlers, pero no verifica que el módulo importado sea realmente JSON:

Entrada

import data from "./data.json" with { type: "json" };

Salida (sin uncheckedRequire: true)

const data = JSON.parse(require("fs").readFileSync(require.resolve("./data.json")));

Salida (con uncheckedRequire: true)

const data = require("./data.json");

Referencias

• Propuesta: Módulos JSON