《原生JSON模块终于成为现实》

标签：#JavaScript #ESModules #JSON #Web标准

总结：本文介绍了JavaScript平台原生支持JSON模块导入的新特性。通过使用import attributes语法with { type: "json" }，开发者现在可以在浏览器、Node.js、Deno和Bun中直接导入JSON文件，无需构建工具转换。这标志着从构建时模拟到运行时原生支持的转变，使模块系统更加显式和可扩展。

文章要点：
- 使用import config from "./config.json" with { type: "json" }语法实现原生JSON导入，替代了以往需要打包工具转换的方式
- 动态导入同样支持：await import("./config.json", { with: { type: "json" } })
- 导入的JSON会被解析一次并缓存，多次导入返回同一对象实例（a === b为true）
- 浏览器仍需服务器返回Content-Type: application/json，并遵循CORS规则
- 与打包工具方案对比：原生方案在运行时获取文件，而打包工具通常在构建时内联JSON
- 此特性不仅限于JSON，已扩展支持CSS模块脚本（with { type: "css" }），为未来其他结构化模块类型建立模式
- 现代浏览器、Node.js、Deno、Bun均已支持该特性，但打包工具在代码分割、资源哈希等方面仍有价值

文章URL：https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/

Allthingssmitty

Native JSON modules are finally real - Matt Smith

JSON imports finally work natively. Learn how import ... with { type: 'json' } changes runtime behavior, caching, and makes bundlers optional.

《使用 SurveyJS 在 React 中构建动态 JSON 驱动表单》

标签：#前端 #React #SurveyJS #JSON_Schema #Form_Builder #Dynamic_Forms #No_Code

总结

本文介绍了 SurveyJS 表单构建器在 React 应用中的集成与使用方法。通过 JSON Schema 定义表单结构，开发者可实现运行时动态渲染表单，避免硬编码。文章详细讲解了安装配置、组件初始化、主题定制、数据持久化（localStorage/服务端）、图片上传处理、PDF 导出等核心功能，并提供了完整的 Next.js 集成示例代码，帮助开发者快速搭建自托管、数据可控的动态表单解决方案。

文章要点：

- **JSON Schema 驱动**：表单结构通过 JSON 定义，支持运行时动态加载和修改，实现真正的数据驱动表单渲染
- **可视化构建器**：Survey Creator 提供拖拽式界面，非技术人员也能设计表单，实时生成对应 JSON 配置
- **React 集成方案**：需安装 survey-creator-react 和 survey-creator-core`，组件不支持 SSR，在 Next.js 中需使用动态导入并设置 `ssr: false
- **数据持久化**：通过 saveSurveyFunc 回调可将表单配置保存至 localStorage 或后端服务，支持加载已有 JSON 配置继续编辑
- **扩展功能**：支持 Ace 编辑器集成（JSON 编辑）、图片上传至服务器（非 Base64 存储）、PDF 导出、自定义主题等高级功能
- **商业化许可**：Survey Creator 商用需购买许可证，否则界面会显示警告横幅

文章URL：https://surveyjs.hashnode.dev/build-dynamic-json-driven-forms-react

Schema-Driven Forms in React: A Practical Guide to Forms as Data

Schema-Driven Forms in React: Practical Guide

Learn how to define forms as data, manage logic in JSON, and build scalable React forms using SurveyJS.