如何在JSFiddle上使用CommonJS模块

How can I use a CommonJS module on JSFiddle?

本文关键字：CommonJS 模块 JSFiddle      更新时间：2023-09-26

有没有办法在plnkr、JSFiddle或JS-Bin等网站上使用CommonJS模块？我想把它变成一个全球性的。

这是为了在不必使用UMD的情况下轻松提供演示。

我会找到Github repos，然后使用rawgit.com.

引用源文件

requirebin是一个类似jsbin的环境，允许使用browserfy构建模块，但我不知道如何使用未发布的模块

您可以使用https://www.skypack.dev/，它调整了要在ESM就绪环境中使用的任何npm包

例如，如果你想使用一个使用UMD（通用模块定义）或CJS（通用JS）的库，你可以使用skypack，模块将转换为ESM（ES模块）。

工作案例

画布草图util/arandom库使用CJS导入和导出一些模块（内部使用require('something')），但代码会通过该服务转换为ESM，并且可以直接在用户的浏览器中运行

<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>

非工作案例

如果我们使用https://unpkg.com/，因为它只分发准备好的，并且代码给出错误（在文件的最开始，已经有一些CJS需要的功能）：

<script type="module">
import random from 'https://unpkg.com/canvas-sketch-util@1.10.0/random'
console.log('A random number: ', random.range(1,10))
</script>

重要

  1. 在脚本中使用type="module"很重要，jsfiddle和codePen已经做到了，它也可以在本地工作
  2. 每个库都有不同的导出，您必须了解库是如何导出的，才能将其导入到代码中。以下是一些不同导入方式的示例，并非所有情况下，您都必须知道哪种导入方式是正确的
<script type="module">
// Usually when don't have a default export
import * as libOne from 'https://cdn.skypack.dev/lib-one'
libOne.initSomething({someconf:true})
// OR
libOne(someParam1, someParam2)
// Usually when export is just one function/object
import libTwo from 'https://cdn.skypack.dev/lib-two'
libTwo(someParam1, someParam2)
// Usually when there are several things inside the lib and you only want to use one
import { libThree } from 'https://cdn.skypack.dev/lib-three'
libThree(someParam1, someParam2)
</script>

最终考虑因素-2022

他们的网站（https://www.skypack.dev/）表示以下

Skypack是免费用于个人和商业目的，永远。基本CDN已准备好生产，得到Cloudflare、Google Cloud和AWS的支持。我们完全致力于打造您可以信赖的核心基础设施。

因此，它似乎是您可以信任的

相关文章：