@babel/plugin-transform-json-modules

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Transforme les déclarations import ... with { type: "json" } en API spécifique à la plateforme pour lire puis parser via JSON.parse le fichier importé.

La transformation appliquée par ce plugin dépend de votre configuration de haut niveau targets pour déterminer si le code généré doit être compatible avec Node.js, les navigateurs, ou les deux. Lorsque Node.js est ciblé, le code généré varie également selon que vous compilez les modules en CommonJS ou non.

attention

Ce plugin ne peut pas être utilisé lors de la compilation de modules en AMD, SystemJS ou UMD.

attention

Ce plugin transforme uniquement les déclarations d'importation statiques, pas les appels dynamiques import().

Exemple

input.js

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

sera transformé 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())
);

Installation

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

Utilisation

Avec un fichier de configuration (Recommandé)

babel.config.json

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

Via CLI

Shell

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

Via l'API Node

JavaScript

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

Options

uncheckedRequire

Type : boolean
Par défaut : false
Ajouté en v7.25.0

Lorsque défini sur true, le plugin génère un code simplifié en utilisant directement require pour importer le fichier JSON. Lorsque CommonJS est ciblé, cette option produit un résultat plus facile à analyser pour les bundlers, mais ne vérifie pas que le module importé est réellement du JSON :

Entrée

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

Sortie (sans uncheckedRequire: true)

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

Sortie (avec uncheckedRequire: true)

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

Références

• Proposition : Modules JSON