JSON modülü komut dosyaları artık temel olarak kullanılabilir

kullanılabilir. keywords: docType:Blog,category:Baseline2025,language:JavaScript

Thomas Steiner

Yayınlanma tarihi: 18 Haziran 2025

Bir JSON dosyasını JavaScript modülüne aktarmak istiyorsanız daha önce, normal bir import ifadesi kullanabilmek için JSON'u JavaScript'e yerleştirme veya fetch() ile bir dosya indirip ardından Response.json()'yi çağırma gibi zahmetli işlemler yapmanız gerekiyordu. Bu sorun, JSON modülü komut dosyaları ve içe aktarma özellikleri sayesinde artık tüm modern tarayıcılarda çözüldü.

Aşağıdaki örnekte, bir JSON modülü komut dosyasının JavaScript modülü komut dosyasından nasıl içe aktarılabileceği gösterilmektedir:

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

JSON.parse() gerekmez. JSON, import'dan hemen sonra ayrıştırılır ve kullanıma hazır olur. Bu, tarayıcı with { type: "json" } içe aktarma özelliğiyle belirttiğiniz JSON ile uğraştığını önceden bildiği için işe yarar.

Önceki girişteki kodu kullanan bu JSON modülü içe aktarma canlı demosuna göz atın.

Modül komut dosyaları için MIME türü kontrolü katı şekilde uygulanır. JSON modülü komut dosyasının getirilmesi için HTTP yanıtının JSON MIME türüne (ör. Content-Type: text/json) sahip olması gerekir.

İfadenin with { type: "json" } kısmı atlanırsa tarayıcı, amacın bir JavaScript modülü komut dosyasını içe aktarmak olduğunu varsayar ve HTTP yanıtının MIME türü JavaScript MIME türü değilse getirme işlemi başarısız olur.

HTML spesifikasyonunda JSON modülü komut dosyası işleme hakkında daha fazla bilgi edinebilirsiniz.