Les scripts de module JSON sont désormais disponibles en tant que référence

disponibles. keywords: docType:Blog,category:Baseline2025,language:JavaScript

Thomas Steiner

Publié le 18 juin 2025

Si vous souhaitez importer un fichier JSON dans un module JavaScript, vous deviez auparavant passer par des étapes complexes, comme intégrer du code JSON dans JavaScript pour pouvoir utiliser une instruction import standard, ou télécharger un fichier avec fetch(), puis appeler Response.json(). Ce problème est désormais résolu dans tous les navigateurs modernes grâce aux scripts de module JSON et aux attributs d'importation.

L'exemple suivant montre comment importer un script de module JSON à partir d'un script de module JavaScript:

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

const {explanation, title, url} = astronomyPictureOfTheDay;

document.querySelector('h2').textContent = title;
document.querySelector('figcaption').textContent = explanation;
Object.assign(document.querySelector('img'), { src: url, alt: title });

Aucun JSON.parse() n'est nécessaire. Le fichier JSON est analysé et prêt à l'emploi juste après le import. Cela fonctionne, car le navigateur sait à l'avance qu'il s'agit de JSON, que vous déclarez avec l'attribut d'importation with { type: "json" }.

Découvrez cette démonstration en direct des importations de modules JSON qui utilise le code de la liste précédente.

La vérification du type MIME pour les scripts de module est stricte. Pour que l'extraction du script de module JSON aboutisse, la réponse HTTP doit avoir un type MIME JSON, par exemple Content-Type: text/json.

Si la partie with { type: "json" } de l'instruction est omise, le navigateur suppose que l'intent consiste à importer un script de module JavaScript, et la récupération échouera si la réponse HTTP a un type MIME qui n'est pas un type MIME JavaScript.

Pour en savoir plus sur le traitement des scripts de module JSON, consultez la spécification HTML.