@babel/plugin-transform-json-modules

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

Trasforma le dichiarazioni import ... with { type: "json" } in API specifiche per piattaforma per leggere e successivamente JSON.parse il file importato.

La trasformazione applicata da questo plugin dipende dai tuoi targets di alto livello per determinare se il codice generato debba essere compatibile con Node.js, browser o entrambi. Quando si punta a Node.js, il codice generato cambia anche in base alla compilazione dei moduli in CommonJS o meno.

attenzione

Questo plugin non può essere utilizzato durante la compilazione di moduli in AMD, SystemJS o UMD.

attenzione

Questo plugin trasforma solo le dichiarazioni di importazione e non le chiamate dinamiche import().

Esempio

input.js

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

verrà trasformato in

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())
);

Installazione

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

Utilizzo

Con un file di configurazione (Consigliato)

babel.config.json

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

Tramite CLI

Shell

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

Tramite Node API

JavaScript

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

Opzioni

uncheckedRequire

Tipo: boolean
Predefinito: false
Aggiunto in v7.25.0

Quando impostato a true, il plugin genera un output più semplice utilizzando direttamente require per importare il file JSON. Quando si utilizza CommonJS, questa opzione produce un output più semplice da analizzare per i bundler ma non verifica che il modulo importato sia effettivamente JSON:

In

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

Out (senza uncheckedRequire: true)

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

Out (con uncheckedRequire: true)

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

Riferimenti

• Proposta: JSON Modules