JSON 模块脚本现已成为基准

可用。 keywords: docType:Blog,category:Baseline2025,language:JavaScript

Thomas Steiner

发布时间：2025 年 6 月 18 日

如果您想在 JavaScript 模块中导入 JSON 文件，以前必须采取一些繁琐的措施，例如在 JavaScript 中嵌入 JSON，以便使用常规的 import 语句，或者使用 fetch() 下载文件，然后调用 Response.json()。现在，借助 JSON 模块脚本和导入属性，所有现代浏览器都已解决此问题。

以下示例展示了如何从 JavaScript 模块脚本中导入 JSON 模块脚本：

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()，系统会在 import 之后立即解析 JSON 并准备就绪。之所以能这样，是因为浏览器事先知道它要处理 JSON，您使用导入属性 with { type: "json" } 声明了 JSON。

查看此 JSON 模块导入的实时演示，其中使用了上一个列表中的代码。

对模块脚本的 MIME 类型检查非常严格。为了成功提取 JSON 模块脚本，HTTP 响应必须具有 JSON MIME 类型，例如 Content-Type: text/json。

如果省略语句的 with { type: "json" } 部分，浏览器会假定 intent 是用于导入 JavaScript 模块脚本，如果 HTTP 响应的 MIME 类型不是 JavaScript MIME 类型，则提取将失败。

您可以在 HTML 规范中详细了解 JSON 模块脚本处理。