如何在Observable笔记本上使用svg.js

Question

我几天前开始学习如何使用 Observable。

我可以使用 svg.js 版本 2.7.1，方法是使用：

SVG = require("svg.js") // 2.7.1

但是当我尝试使用版本3.0.12时，这并不起作用。

SVG = require("svg.js@3.0.12")

错误是：

SVG = rt: unable to load package.json

当我试图通过 URL 加载时：

SVG = require("https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.12/svg.js")

还有一个错误。

SVG = rt: invalid module

是否可以在Observable中使用svg.js v3？

请提供一些建议。

- korakot

---

svg.js 的第三个版本已经发布在 svgdotjs 命名空间中。因此，require("@svgdotjs/svg.js") 可能可以使用。 - Fuzzyma

@Fuzzyma，它仍然出现错误 SVG = rt: invalid module。 - korakot

@Fuzzyma 默认使用 unpkg.com。这是关于 require 的文档。https://observablehq.com/@tmcw/introduction-to-require...我不太理解，但也许你会明白。 - korakot

我不确定observable是否能够解决ESM依赖关系。但是我们导出了一个真正的模块。也许它在package.json中使用了错误的键？ - Fuzzyma

Answer 1

我使用模块需求调试器(Module require debugger)测试了@svgdotjs/svg.js，最终找到了解决方案。

SVG = (await import('https://unpkg.com/@svgdotjs/svg.js?module')).SVG
draw = SVG().addTo('#drawing').size('100%', 100)

- korakot