Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/576https://channel.meo-ai.com/posts/576Wed, 18 Mar 2026 01:43:35 GMT<span class="post-title-source">《原生JSON模块终于成为现实》</span><br /><br />标签：<a href="/search/result?q=%23JavaScript" title="#JavaScript">#JavaScript</a> <a href="/search/result?q=%23ESModules" title="#ESModules">#ESModules</a> <a href="/search/result?q=%23JSON" title="#JSON">#JSON</a> <a href="/search/result?q=%23Web%E6%A0%87%E5%87%86" title="#Web标准">#Web标准</a><br /><br />总结：本文介绍了JavaScript平台原生支持JSON模块导入的新特性。通过使用<code>import attributes</code>语法<code>with { type: "json" }</code>，开发者现在可以在浏览器、Node.js、Deno和Bun中直接导入JSON文件，无需构建工具转换。这标志着从构建时模拟到运行时原生支持的转变，使模块系统更加显式和可扩展。<br /><br />文章要点：<br />- 使用<code>import config from "./config.json" with { type: "json" }</code>语法实现原生JSON导入，替代了以往需要打包工具转换的方式<br />- 动态导入同样支持：<code>await import("./config.json", { with: { type: "json" } })</code><br />- 导入的JSON会被解析一次并缓存，多次导入返回同一对象实例（<code>a === b</code>为true）<br />- 浏览器仍需服务器返回<code>Content-Type: application/json</code>，并遵循CORS规则<br />- 与打包工具方案对比：原生方案在运行时获取文件，而打包工具通常在构建时内联JSON<br />- 此特性不仅限于JSON，已扩展支持CSS模块脚本（<code>with { type: "css" }</code>），为未来其他结构化模块类型建立模式<br />- 现代浏览器、Node.js、Deno、Bun均已支持该特性，但打包工具在代码分割、资源哈希等方面仍有价值<br /><br />文章URL：<a href="https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/" target="_blank" rel="noopener" title="https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/">https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/</a><a class="tgme_widget_message_link_preview" href="https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real" target="_blank" rel="noopener" title="JSON imports finally work natively. Learn how import ... with { type: 'json' } changes runtime behavior, caching, and makes bundlers optional."> <i class="link_preview_right_image" style="background-image:url('https://cdn4.telesco.pe/file/WN5gYHdJxxyjhkTgck1yzTf1hu3GVGPgTf7sTJjL1R4FDEQxWgnaKsxJTN74xI6ToumUaGyPU4tKOxWG1OX_cDOzLdEQQLdFuL7_vckUQlocyH7yD1Ajpwy6zfsc_aE4EQGUUsiMxWydbksynuRCtpteUyQZvzDFHKWkFfZ3Vg2EoOLFiUJVyNsOxbU8_DDw-QBlaMPOrByqIZprutZc7ebjn4bjTPi2GlwbbkUPqqozRQPrVoJo6ghcZ_UqyqNNMv_toySloGJNHPpRh2kU7Oe2NJtSXcTb2nbIUgZODpzcbQn1QkEEABEy6rZtZVGie_kvMXZ6JHnrstj4_Xbw2Q.jpg')"></i> <div class="link_preview_site_name accent_color">Allthingssmitty</div> <div class="link_preview_title">Native JSON modules are finally real - Matt Smith</div> <div class="link_preview_description">JSON imports finally work natively. Learn how import ... with { type: 'json' } changes runtime behavior, caching, and makes bundlers optional.</div> </a>