如何在JSFiddle中导入NPM包？

Question

我想使用valid-url来验证一些URL，以便稍后在JSFiddle中共享。我尝试将链接添加到GitHub的index.js文件（https://raw.githubusercontent.com/ogt/valid-url/master/index.js），但是Fiddle会显示以下内容：

Github不是CDN，这样使用它会导致加载文件时出现问题。您仍然要使用吗？

当我尝试使用它时，会抛出一个错误：

因为其MIME类型为“text/plain”，不可执行，并启用了严格的MIME类型检查，所以拒绝执行来自[...]的脚本。

那么，在JSFiddle中是否有任何使用npm包的方法？或者有什么解决方法可以实现这一点吗？

- josemigallas

---

你不能直接使用GitHub上的代码，但可以从rawgit.com中包含它们。此外，使用RequireJS可能是个好主意，因为你无法在Web上使用正常的require(...)或import ...语法。 - Derek 朕會功夫

Answer 1

使用unpkg.com。它们允许您像使用CDN一样从浏览器中加载任何npm模块。

- Lance

Answer 2

使用 UNPKG，您可以按照这个模式加载来自任何包的任何文件。

https://unpkg.com/:package@:version/:file

因此，如果您添加

https://unpkg.com/valid-url@1.0.9/

那么你将得到这个（如下图所示）

如果您指定index.js文件

https://unpkg.com/valid-url@1.0.9/index.js

那么你将会得到这个（如下图所示）。

然后你可以通过添加你需要的资源，将它用在你的代码片段中。

- Tiago Martins Peres

Answer 3

如果您想在前端从npm中 import 一些内容，您可以使用 https://www.skypack.dev/ ，它将npm模块转换为ES模块，例如：

<script type="module">
  // Use 'https://cdn.skypack.dev/' + 'npm package name' + '@version its optional'
  import random from 'https://cdn.skypack.dev/canvas-sketch-util@1.10.0/random'

  console.log('A random number: ', random.range(1,10))
</script>

这里有一个使用SkyDev加载npm模块的JSFiddle示例：https://jsfiddle.net/0f9t78sz/5/。

许多情况下，https://unpkg.com/无法处理的问题，https://www.skypack.dev/可以解决，因此建议在前端使用它。

我在这里写了一个稍微完整一些的答案：如何在JSFiddle上使用CommonJS模块？

- KevynTD