【发布时间】：2015-03-23 02:26:34
【问题描述】：
有没有办法在像 plnkr、JSFiddle 或 JS Bin 这样的网站上使用 CommonJS 模块？ 我想把它变成一个全球性的。
这是为了在不使用 UMD 的情况下轻松提供演示。
我会找到 Github 存储库，然后使用 rawgit.com 引用源文件。
【问题讨论】：
标签： javascript jsfiddle browserify commonjs
【发布时间】：2015-03-23 02:26:34
【问题描述】：
requirebin 是一个类似 jsbin 的环境，允许使用 browserify 构建模块，但我不知道如何使用未发布的模块
【讨论】：
-
谢谢！正是我想要的。
-
requirebin 发生了什么？它消失了吗？你现在可以使用类似的东西吗？
-
@react_or_angluar 我找到了一种新方法，我在这个问题stackoverflow.com/questions/29202426/… 中提出了另一个答案
您可以使用https://www.skypack.dev/，它调整任何 npm 包以在 ESM 就绪环境中使用
例如，如果你想使用一个使用UMD（通用模块定义）或CJS（通用JS）的库，你可以使用skypack，模块将被转换为ESM（ES模块）。
工作案例
canvas-sketch-util/random库使用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 的 require 函数）：
<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>重要
- 在脚本中使用
type="module"很重要，jsfiddle 和 codePen 已经这样做了，它也可以在本地工作。 - 每个库都有不同的导出方式，您必须了解如何导出库才能将其导入到您的代码中。以下是一些不同导入方式的示例，并非所有情况，您必须知道哪种导入方式是正确的方式。
<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 提供支持。我们完全致力于构建您可以信赖的核心基础架构。
所以它似乎是你可以信任的东西
【讨论】：