如何在 JSFiddle 上使用 CommonJS 模块？

Question

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

这是为了方便地提供演示而无需使用 UMD。

我会找到 Github 存储库，然后使用 rawgit.com 引用源文件。

Answer 1

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

Answer 2

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

例如，如果你想使用一个使用UMD（Universal Module Definition）或CJS（Common JS）的库，你可以使用skypack，模块将被转换为ESM（ES Modules）。

工作案例

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>

Non-working个案

如果我们使用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 is free to use for personal and commercial purposes, forever. The basic CDN is production-ready and is backed by Cloudflare, Google Cloud, and AWS. We're fully committed to building a core piece of infrastructure you can rely on.

所以这似乎是你可以信任的东西

如何在 JSFiddle 上使用 CommonJS 模块？

How can I use a CommonJS module on JSFiddle?

javascript

jsfiddle

browserify

commonjs

工作案例

Non-working个案

重要

最终考虑 - 2022