by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12241
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、原生JSON模块导入

现在所有的主流浏览都已经支持直接import JSON文件并直接解析为JSON数据了。

过去和现在

在过去，我们想要在项目中导入JSON，写法多半是这样的：

import config from "./config.json";

然后打包工具在构建时会读取 JSON 文件，将其转换为 JavaScript 模块，满足开发需求。

如果脱离打包工具，上面的语法是无效的，甚至会报错。

现在，浏览器已经有了原生的JSON导入能力，只需要在传统写法后面写上with { type: "json" }就可以了，例如：

import config from "./config.json" with { type: "json" };

并且还支持动态引入：

const module = await import("./config.json", {
  with: { type: "json" }
});

console.log(module.default);

二、深入JSON模块解析

导入带有属性的 JSON 时，我们可以把import后面的变量当做正常的 ES 模块一样处理。

比方说有一个名为config.json的文件，其里面的内容是：

{
  "bookName": "HTML并不简单",
  "url": "https://www.htmlapi.cn/"
}

此时，我们可以再业务JS代码中直接获取相关的数据，例如：

import config from "./config.json" with { type: "json" };
console.log(config.bookName); // 'HTML并不简单' 

无需像过去那样先fetch再JSON.parse()解析，浏览器自动完成了解析。

对了，忘记说了，不是说只要是json后缀的文件就能解析，还需要服务器返回Content-Type: application/json的文件头信息。

其他补充说明

• 如果JSON文件的体积较大，那么其实推荐使用传统的实现方法，即使用fetch() 动态请求，以优化首屏加载速度，否则，构建工具会将其直接内联到JS代码中，导致主包体积大幅膨胀。
• 原生导入的 JSON 模块在解析后生成的纯 JS 对象是冻结（Frozen）的。对其直接进行修改（如 data.key = ‘value’）会导致失败或在严格模式下抛出 TypeError 错误。
• 在 TS 中使用原生 JSON 模块，必须在 tsconfig.json 中配置 “resolveJsonModule”: true，否则无法正确推断导入对象的类型定义。

三、至此，结束

好了，本文内容就这么多，比较短，今儿个也不碎碎念了，展示下近期的钓获。

六张渔获图，分别是：

小蜗牛回锅鲤鱼鲫鱼138钓了37斤。
凯祥148六小时钓了33斤全鳊鱼。
六六180六小时连护36斤，也全都鳊鱼。
强子钓场150六小时，十几斤鱼，比较杂，罗非银鳕鱼昂刺鱼都有。
新胜148六小时，鳊鱼为主，20斤
福檀钓场，100元5小时鲫鱼塘，就两条，坑塘。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12241

（本篇完）