Tango 低代码引擎沙箱实现解析
内容提要
本文介绍了Tango低代码引擎的沙箱功能和使用的CodeSandbox沙箱的结构和工作流程。Tango低代码引擎通过CodeSandbox实现了可视化预览和构建能力，提供了快速高效的开发体验。文章还提到了Tango开源方案的进展和计划。
延伸解读
为何选择 CodeSandbox 而非其他沙箱方案
Tango 曾调研 Sea.js 等 AMD 方案，但依赖固定，需预构建 UMD 资源，无法灵活增加依赖。SystemJS 和 ViteSandbox 等 ESM 方案则因现有组件物料以 CommonJS 为主，缺少 ESM 产物而未被采用。最终选择 CodeSandbox，因其提供接近本地开发的运行时环境，支持直接拉取 npm 包并实时转译，且运行在 iframe 中隔离全局变量，避免污染规划器。
依赖初始化与转译的轻量化设计
CodeSandbox 在初始化依赖时忽略 devDependencies 和 @types 等仅开发时需要的包，大幅减少初始化与转译时间。其默认通过 Serverless 服务 dependency-packager 在线拉取依赖，一次性返回包含子依赖的所有必要文件；若项目引用了未包含的文件，则回退到 unpkg/jsdelivr 获取。此外，利用 Service Worker 缓存资源，减少二次访问的网络请求。
跨域通讯与 React 组件封装
由于沙箱运行在独立域名的 iframe 中，与规划器跨域，Tango 通过将双方 document.domain 设为相同父域名，并添加 Origin-Agent-Cluster: ?0 响应头实现通讯。为简化使用，Tango 封装了 React 组件 @music163/tango-sandbox，包含 IFrameProtocol 负责消息传递、PreviewManager 管理渲染、Sandbox 组件挂载 iframe 并处理配置与事件，使规划器能通过传入 files 和 eventHandler 实现拖拽
私有化部署与开源进展
沙箱获取依赖主要依赖 CodeSandbox 的 packager 及 JSDelivr、unpkg 等公共服务，若需使用团队内部私有 registry，则需私有化部署相关服务。目前 Tango 已开源核心引擎内核、沙箱、设置器、应用结构、物料协议等，并发布 RC 版本。今年计划继续开源服务端能力、前端组件库等，并优化文档，社区可通过 GitHub Issues 反馈问题。
Q&A
Tango 低代码引擎的主要功能是什么？
Tango 低代码引擎用于快速构建低代码渠道，支持源代码的可视化建立，提供低代码可视化能力。
为什么Tango需要使用沙箱？
Tango需要沙箱来支持源代码的实时运转和与已有物料的集成，提供接近本地开发的环境。
CodeSandbox的沙箱结构是怎样的？
CodeSandbox的沙箱结构包括前端组件、在线打包器和后端服务，简化了开发流程。
Tango沙箱的工作流程是什么？
Tango沙箱的工作流程包括代码准备、依赖初始化、转译代码和执行代码。
Tango如何实现跨域兼容？
Tango通过设置相同的父域名和HTTP响应头来实现跨域通讯。
Tango的开源进展如何？
Tango的核心引擎部分已开源，文档已更新，并欢迎社区参与开源建设。
