Gli script dei moduli JSON sono ora disponibili come riferimento

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

Thomas Steiner

Pubblicata: 18 giugno 2025

Se vuoi importare un file JSON in un modulo JavaScript, in precedenza dovevi eseguire operazioni complesse come incorporare il JSON in JavaScript per poter utilizzare un normale statement import o scaricare un file con fetch() e poi chiamare Response.json(). Questo è un problema ora risolto in tutti i browser moderni grazie agli script dei moduli JSON e agli attributi di importazione.

L'esempio seguente mostra come è possibile importare uno script del modulo JSON dall'interno di uno script del modulo 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 });

Non è necessario JSON.parse(), il JSON viene analizzato e può essere utilizzato subito dopo import. Questo funziona perché il browser sa in anticipo che ha a che fare con JSON, che dichiari con l'attributo import with { type: "json" }.

Dai un'occhiata a questa demo dal vivo delle importazioni dei moduli JSON che utilizza il codice dell'elenco precedente.

Il controllo del tipo MIME per gli script del modulo è rigoroso. Affinché il recupero dello script del modulo JSON vada a buon fine, la risposta HTTP deve avere un tipo MIME JSON, ad esempio Content-Type: text/json.

Se la parte with { type: "json" } dell'istruzione viene omessa, il browser assume che l'intenzione sia importare uno script del modulo JavaScript e il recupero non andrà a buon fine se la risposta HTTP ha un tipo MIME diverso da un tipo MIME JavaScript.

Puoi scoprire di più sull'elaborazione degli script dei moduli JSON nella specifica HTML.