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
（本篇完）