UD5工具箱
常见问题
什么是组件预览沙盒？
组件预览沙盒是一个在线的代码编辑和预览环境，允许开发者在浏览器中直接编写、编译和查看 React 与 Vue3 组件的运行效果。它通过 iframe 沙盒技术将组件代码的执行环境与工具主界面完全隔离，确保组件代码的运行不会影响到工具本身。开发者无需安装任何开发工具或配置构建环境，只需打开浏览器即可开始组件开发和实验。本工具内置了 Babel Standalone 编译器，支持 JSX 语法的实时编译，让开发者能够即时看到代码修改后的组件效果。
使用本工具的代码格式要求是什么？
在 React 模式下，您可以直接编写 JSX 语法的组件代码。组件需要使用函数组件的形式定义，并通过 export default 导出。工具会自动在代码前后添加必要的 import 语句（如 import React from "react"），您无需手动编写这些导入语句。在 Vue3 模式下，您可以使用选项式 API 或组合式 API 的风格编写组件代码。组件需要通过 export default 导出一个包含 template 和 setup（或 data、methods 等选项）的对象。工具会自动加载 Vue3 框架并处理组件的挂载逻辑。两种模式下的代码都应该是完整的、可独立运行的组件代码。
JSX 编译的原理是什么？
JSX 编译由工具内置的 Babel Standalone 编译器负责完成。Babel Standalone 是 Babel 编译器的浏览器端版本，它包含了 JSX 转换插件（@babel/plugin-transform-react-jsx），能够将 JSX 标签语法转换为标准的 JavaScript 函数调用。具体来说，JSX 表达式会被转换为 React.createElement 调用：JSX 标签名变为 createElement 的第一个参数，属性对象变为第二个参数，子元素变为后续参数。编译过程在每次代码变更时自动触发，编译结果会被包装在 setTimeout 中延迟执行，确保编译完成后再渲染到 iframe 沙盒中。如果 JSX 语法存在错误，Babel 会抛出编译错误并显示在工具界面上。
是否支持 .vue 单文件组件？
本工具不支持完整的 .vue 单文件组件格式。.vue 单文件组件需要专门的构建工具（如 vue-loader 或 Vite 的 Vue 插件）来处理 template、script 和 style 三个块的编译和分离。本工具支持的是在 JavaScript 代码中内联 template 字符串的方式，即在 export default 对象的 template 属性中编写模板字符串，在 setup 函数（或 data 函数）中编写组件逻辑。这种编写方式虽然不是标准的 .vue 文件格式，但在功能上能够实现相同的组件效果。如果您需要测试标准的 .vue 单文件组件，建议使用本地的 Vite 或 Vue CLI 开发环境。
如何使用第三方 UI 库？
本工具目前不支持直接引入第三方 UI 库（如 Ant Design、Element Plus、Material UI 等）。工具的沙盒环境是一个隔离的 iframe，只能使用预先加载的 React 和 Vue3 框架本身的功能。如果需要使用第三方库的组件效果，建议在本地开发环境中配置完整的构建工具链。不过，您可以在组件代码中通过内联样式和 CSS 类名来模拟类似 UI 库的视觉效果。工具的预设示例展示了如何使用内联样式和 CSS 来实现美观的组件界面，可以作为参考。未来版本可能会考虑增加对常用第三方库的预加载支持。
console.log 的显示原理是什么？
控制台输出的捕获和显示基于对 iframe 沙盒中 console 对象方法的拦截机制。在 iframe 沙盒加载组件代码之前，工具会先通过 JavaScript 注入的方式覆写 iframe 内的 console.log、console.warn 和 console.error 等方法。覆写后的方法在执行原始的控制台输出功能的同时，会将输出的内容通过 postMessage 机制传递给工具的主界面。主界面接收到消息后，将其格式化并显示在控制台面板中。这种方式既保留了组件代码中控制台方法的正常功能，又能够将所有输出集中展示在工具界面上，方便开发者查看和调试。
组件隔离测试的最佳实践是什么？
在使用本工具进行组件测试时，建议遵循以下最佳实践：(1) 每次只测试一个组件的功能，避免在一个沙盒中混合多个无关组件的代码；(2) 在组件代码中添加充分的 console.log 输出，以便通过控制台面板验证组件的状态变化和事件触发情况；(3) 使用工具提供的重置功能在每次测试新功能前恢复到示例初始状态，避免前一次修改的残留影响；(4) 充分利用全屏预览功能检查组件在不同尺寸下的表现效果；(5) 通过复制代码功能保存每次成功测试的代码版本，建立组件开发的版本记录；(6) 在 React 模式下注意清理 useEffect 中的副作用（返回清理函数），避免内存泄漏影响后续测试。
沙盒隔离机制的安全性如何？
本工具使用了多层隔离机制来确保安全性。首先，iframe 沙盒通过 sandbox 属性限制了组件代码的执行权限，默认不允许访问父窗口、不允许提交表单、不允许触发弹窗等。其次，每个预设示例切换时会销毁旧的 iframe 并创建全新的 iframe 实例，确保不同示例之间的状态完全隔离，不存在变量泄漏的风险。第三，组件代码中加载的外部脚本和样式也受到 iframe 沙盒的安全限制，无法突破沙盒边界。需要注意的是，虽然沙盒提供了较强的安全隔离，但在极端情况下（如浏览器安全漏洞），理论上仍存在沙盒逃逸的可能性。因此，不要在沙盒中处理高度敏感的数据，也不要在未经审核的情况下执行来源不可信的用户代码。