JSON 模块现在可以在所有现代浏览器中导入 JavaScript

谷歌开发者关系工程师Thomas Steiner最近发表了一篇博文，宣布 JSON 模块脚本现已在所有现代浏览器中可用。使用最新版本现代浏览器的开发者现在可以直接将 JSON 模块导入到他们的 JavaScript 代码中。该功能基于导入属性提案。原生 CSS 模块导入功能可能很快就会推出。

导入属性告诉运行时应如何加载特定模块。主要用例是加载非 JS 模块，例如 JSON 模块和 CSS 模块。

Steiner 提供了以下代码示例来说明语法：

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

非浏览器运行时（例如 Deno）与浏览器语义一致：

import file from "./version.json" with { type: "json" };
console.log(file.version);
const module = await import("./version.json", {
  with: { type: "json" },
});
console.log(module.default.version);
{
  "version": "1.0.0"
}

在这两种情况下，都无需进行 JSON 解析，因为所有主流浏览器都已在Interop 2025（新推出的 Baseline）中实现了原生解析。此前，Web 开发者的选项包括使用打包器、额外的转译步骤，或使用 polyfill 来支持尚未实现该功能的浏览器。

在 Web 上，每个 import 语句都会引发一个 HTTP 请求。响应随后会被转换为 JavaScript 值，并由运行时提供给程序使用。规范明确要求type: "json"支持该属性。type然而，该属性也支持 CSS 模块：

import styles from "https://example.com/styles.css" with { type: "css" };

正如一位开发人员在 Reddit 上指出的那样，CSS 模块导入不是 Interop 2025 的一部分，但可能会包含在下一个 Interop 中：

我曾提议将它用于 Interop 2025，但被否决了，所以希望明年能实现。不过目前 Chrome 已经支持它了。

使用 CSS，导入 CSS 文件的结果将是一个可构造的样式表，您可以将其直接提供给 DOM API adoptedStyleSheets（例如自定义元素/ Web 组件）

[…] 只需等待 Interop 2026 的 CFP

虽然在早期版本的提案中已经考虑过这一点，但 JSON 模块目前并不支持命名导出。提案倡导者选择不允许命名导出，是因为并非所有 JSON 文档都是对象，而且在他们看来，将 JSON 文档从概念上视为“单一事物”比将多个恰好并列在一个文件中的事物视为“单一事物”更合理。

开发人员可以在 MDN 上查看导入属性语法、CSS 模块导入和 JSON 模块导入的浏览器兼容性。