如何在JSFiddle中导入NPM包？

ruarlubt 于 2022-11-24 发布在其他

关注(0)|答案(3)|浏览(192)

我想使用valid-url来验证一些使用JSFiddle的URL，这样我就可以在以后共享它。我尝试从Github（https://raw.githubusercontent.com/ogt/valid-url/master/index.js）添加一个指向index.js文件的链接，但是Fiddle说：
Github不是一个CDN，这样使用它会导致加载文件时出现问题。你还在使用它吗？
显然，当我尝试使用它时，会抛出一个错误：
拒绝执行来自[...]的脚本，因为其MIME类型（'text/plain'）不可执行，并且启用了严格的MIME类型检查。
那么，有没有办法在JSFiddle中使用npm包呢？或者有没有解决办法？

npm

来源：https://stackoverflow.com/questions/46845199/how-to-import-npm-package-in-jsfiddle

3条答案

按热度按时间

7gyucuyw1#

使用unpkg.com。它们允许您像CDN一样使用load any npm module from the browser。

赞(0）回复(0）举报 2022-11-24

htzpubme2#

使用UNPKG，您可以按照以下模式从任何包中加载任何文件

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

所以，如果你加上

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

然后您将得到this（如下图所示）

如果指定index.js文件

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

然后您将得到this（如下图所示）

然后，您就可以通过添加所需的资源来在您的小提琴中使用它。

赞(0）回复(0）举报 2022-11-24

5vf7fwbs3#

如果您想在前端从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>

这是一个JSFiddle using SkyDev to load an npm module。
在很多情况下，https://unpkg.com/无法处理https://www.skypack.dev/可以处理的问题，因此我建议在前端使用它
关于这一点，我在这里写了一个稍微完整的答案：如何在JSFiddle上使用CommonJS模块？

赞(0）回复(0）举报 2022-11-24

我来回答

如何在JSFiddle中导入NPM包？

3条答案

相关问题

热门标签

最新问答