סקריפטים של מודולים ב-JSON זמינים עכשיו כ-Baseline

זמין. keywords: docType:Blog,category:Baseline2025,language:JavaScript

Thomas Steiner

תאריך פרסום: 18 ביוני 2025

אם רוצים לייבא קובץ JSON למודול JavaScript, בעבר היה צריך לבצע פעולות מורכבות כמו הטמעת JSON ב-JavaScript כדי שאפשר יהיה להשתמש בהצהרה רגילה של import, או להוריד קובץ באמצעות fetch() ואז לבצע קריאה ל-Response.json(). זו בעיה שאפשר לפתור עכשיו בכל הדפדפנים המודרניים, בזכות סקריפטים של מודולים ב-JSON ומאפייני ייבוא.

בדוגמה הבאה מוסבר איך לייבא סקריפט של מודול JSON מתוך סקריפט של מודול 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 });

אין צורך ב-JSON.parse(), ה-JSON מנותח ומוכון לשימוש מיד אחרי ה-import. הסיבה לכך היא שהדפדפן יודע מראש שהוא מטפל ב-JSON, מודעה על כך מופיעה במאפיין הייבוא with { type: "json" }.

כדאי לצפות בהדגמה של ייבוא מודולים של JSON שמשתמשת בקוד מהרשימה הקודמת.

הבדיקה של סוג ה-MIME של סקריפטים של מודולים היא מחמירה. כדי שהאחזור של סקריפט המודול ב-JSON יצליח, תגובת ה-HTTP צריכה להיות מסוג MIME של JSON, למשל Content-Type: text/json.

אם משמיטים את החלק with { type: "json" } במשפט, הדפדפן יחשוב שהכוונה היא לייבא סקריפט של מודול JavaScript, והאחזור ייכשל אם לסוג ה-MIME של תגובת ה-HTTP לא יהיה סוג MIME של JavaScript.

מידע נוסף על עיבוד סקריפטים של מודולים ב-JSON זמין במפרט HTML.