SVG.Draggable.js 正确集成指南：解决模块导入与依赖错误-js教程-PHP中文网

SVG.Draggable.js 正确集成指南：解决模块导入与依赖错误

本文详解 SVG.Draggable.js 在纯前端（无构建工具）环境下的正确引入方式，重点解决因混用 script 标签与 ES 模块语法导致的 Uncaught SyntaxError: The requested module does not provide an export 等常见报错，并提供兼容性更强、可维护性更高的实践方案。

本文详解 svg.draggable.js 在纯前端（无构建工具）环境下的正确引入方式，重点解决因混用 script 标签与 es 模块语法导致的 `uncaught syntaxerror: the requested module does not provide an export` 等常见报错，并提供兼容性更强、可维护性更高的实践方案。

在使用 SVG.Draggable.js 扩展 SVG.js 功能时，许多开发者（尤其是未使用 npm 构建流程的新手）会尝试直接通过 <script> 标签引入本地下载的 svg.js 和 svg.draggable.js 文件，并错误地将后者当作 ES 模块（type="module"）加载——这正是你遇到 Uncaught SyntaxError: The requested module './svg.js' does not provide an export named 'Box' 的根本原因。</script>

❌ 错误做法解析

你当前的 HTML 结构：

<script src="./js/api/svg.js"></script><script type="module" src="./js/api/svg.draggable.js"></script>

配合 svg.draggable.js 中的 import { Box, Element, ... } from './svg.js' 语句，本质上是在强制让浏览器以 ESM 方式解析一个非模块化设计的 UMD/Global 脚本。原始 svg.js（如 v3.0.10 官方 dist 版本）是典型的全局变量注入脚本：它执行后会在 window 上挂载 SVG 对象，但不导出任何 ES 模块成员（如 Box, Element），因此 import 语句必然失败。

✅ 正确解决方案（三选一，推荐按序优先）

方案一：彻底放弃 type="module"，改用全局 API（最简单、零配置）

删除所有 import 语句，直接使用 window.SVG 全局对象：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

<!-- main.html -->
<script src="./js/api/svg.js"></script><script src="./js/api/svg.draggable.js"></script><!-- 注意：去掉 type="module" --><script>
  // 初始化 SVG 画布
  const draw = SVG().addTo('#canvas').size(400, 400);
  const rect = draw.rect(100, 100).fill('#f06');

  // 启用拖拽（调用全局扩展方法）
  rect.draggable();

  // 绑定事件（全局 API 可用）
  rect.on('dragstart', () => console.log('Drag started!'));
</script>

✅ 优势：无需修改任何 JS 文件，兼容所有 SVG.js v3.x 官方 dist 版本；
⚠️ 注意：确保 svg.draggable.js 文件本身未被手动添加 import 语句——若已修改，请恢复为原始未篡改版本（可从 GitHub Releases 下载）。

方案二：使用官方 ESM 分发版（推荐用于现代项目）

若需模块化开发，应引入官方提供的 svg.esm.min.js（支持原生 import）：

<script type="module">
  import { SVG } from 'https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.2.0/dist/svg.esm.min.js';
  import '@svgdotjs/svg.draggable.js@3.0.3'; // 自动扩展 SVG 原型

  const draw = SVG().addTo('#canvas').size(400, 400);
  draw.rect(100, 100).draggable(); // ✅ 直接可用
</script>

? CDN 地址参考：

SVG.js ESM: https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.2.0/dist/svg.esm.min.js

Draggable 插件（UMD，自动注册）: https://cdn.jsdelivr.net/npm/@svgdotjs/svg.draggable.js@3.0.3/dist/svg.draggable.js

方案三：使用 npm + 构建工具（长期项目首选）

彻底告别手动管理脚本文件，享受类型提示与依赖管理：

npm install @svgdotjs/svg.js @svgdotjs/svg.draggable.js

// app.js
import { SVG } from '@svgdotjs/svg.js';
import '@svgdotjs/svg.draggable.js'; // 自动扩展

const draw = SVG().addTo('#canvas').size(400, 400);
draw.circle(50).center(100, 100).draggable();

✅ 优势：版本锁定、Tree-shaking、IDE 智能提示、便于升级；
?️ 配套建议：搭配 Vite / Webpack / Next.js 等现代构建工具，避免一切路径与模块解析问题。