UD5工具箱
我们的 Import Map 演示工具提供了一套完整的功能体系，帮助开发者从概念理解到实际应用，全面掌握浏览器端模块映射技术。以下是你能使用的所有核心功能。
快速预设系统
内置 7 个精心配置的预设模板，覆盖主流前端框架和常用工具库。每个预设都包含完整的 Import Map 配置和学习代码，只需点击即可加载，无需手动编写配置。
- React 18 - 包含 react、react-dom 和 react/jsx-runtime 的完整映射，支持 JSX 转换
- Vue 3 - 支持 Composition API 和单文件组件的 ES 模块版本
- Three.js - 3D 图形渲染库的完整 ESM 构建
- Lit - 轻量级 Web Components 框架，支持声明式模板
- Lodash - 函数式编程工具库，支持按需导入
- Preact - 仅 3KB 的 React 轻量级替代方案
- 空白实验 - 提供空模板，从零开始自定义 Import Map 配置
可视化编辑器
采用左右分栏的双编辑器布局，左侧配置 Import Map JSON，右侧编写模块代码。两个编辑器均具备专业的代码编辑功能，支持语法高亮、缩进调整和错误提示。
- JSON 编辑器 - 自动语法高亮，括号匹配，格式化校验
- JavaScript 编辑器 - ES6+ 语法支持，关键字自动补全
- 一键复制 - 快速将 Import Map 配置复制到剪贴板
- 格式化按钮 - 自动美化 JSON 缩进和空格
- 实时同步 - 编辑内容自动保存到浏览器本地存储
实时预览与执行
代码修改后自动在 iframe 沙箱中执行，提供即时的渲染结果反馈和完整的控制台输出捕获。支持 DOM 操作、事件绑定、动画效果等全部浏览器 API。
- 自动运行 - 代码修改后自动重新执行，无需手动刷新
- 控制台捕获 - 捕获 console.log、warn、error、info 等所有输出
- 错误追踪 - 显示完整的错误堆栈，定位模块加载失败原因
- 性能计时 - 显示模块加载耗时和代码执行时间
- 沙箱隔离 - 预览在独立 iframe 中运行，不影响主页面
HTML 导出功能
将实验配置和代码导出为独立的 HTML 文档，包含完整的 DOCTYPE 声明、字符编码和 viewport 设置，可直接在浏览器中打开或部署到静态服务器。
- 完整文档 - 生成符合 HTML5 标准的完整文档结构
- 自包含 - 所有代码内联，无需外部依赖文件
- 一键下载 - 直接保存为 .html 文件到本地
- 复制到剪贴板 - 快速复制 HTML 代码用于分享或嵌入
多 CDN 源支持
预设支持多种主流 ESM CDN 服务，方便开发者比较不同源的加载速度、可用性和功能差异，选择最适合自己项目的 CDN 方案。
- esm.sh - 专为 ESM 优化的 CDN，自动处理依赖和路径重写
- unpkg - npm 包的直接访问服务，支持版本指定
- jsDelivr - 全球分布式 CDN 网络，加载速度快
- 自定义源 - 支持配置其他兼容的 ESM CDN 服务
教学辅助功能
内置丰富的学习资源和文档链接，帮助开发者从入门到进阶，逐步深入理解 Import Map 的各个方面。
- 代码注释 - 预设代码中包含详细的行内注释
- 术语表 - 涵盖 Import Map 相关的核心概念解释
- 最佳实践 - 推荐的配置模式和使用建议
- 兼容性提示 - 实时显示目标浏览器的支持情况
响应式界面设计
工具界面采用 Bootstrap 5 响应式框架构建，完美适配桌面、平板和移动设备。编辑器支持触摸操作，让你可以在任何设备上进行 Import Map 实验。
桌面端
双栏编辑布局，完整功能
平板端
自适应布局，触控友好
移动端
堆叠布局，随时实验