如何在 JSFiddle 中導入 NPM package？

Question

我想使用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 包？ 或任何解決方法來實現這一目標？

Answer 1

使用unpkg.com 。 它們允許您像 CDN 一樣從瀏覽器加載任何 npm 模塊。

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

然后你會得到這個（如下圖所示）

然后您就可以通過添加您想要的資源在您的小提琴中使用它。

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://unpkg.com/無法處理https://www.skypack.dev/可以處理，所以我建議在前端使用它

我在這里寫了一個稍微更完整的答案： How can I use a CommonJS module on JSFiddle?