3

Is there a way to use a CommonJS module on a site like plnkr, JSFiddle, or JS Bin? I'd want to turn it into a global.

This is for easily providing demos without having to use UMD.

I'd find the Github repos and then reference the source files using rawgit.com.

Max Heiber
  • 14,346
  • 12
  • 59
  • 97

2 Answers2

7

requirebin is a jsbin like enviroment that allows for modules built using browserify, but I am not aware of a way to use an unpublished module

Patrick
  • 13,872
  • 5
  • 35
  • 53
  • What happened to requirebin? Is it gone? Is there something like it that you can use now? – react_or_angluar Nov 28 '20 at 08:03
  • @react_or_angluar I found a new way to do this, I put another answer here in this question https://stackoverflow.com/questions/29202426/how-can-i-use-a-commonjs-module-on-jsfiddle/71302802#71302802 – KevynTD Mar 01 '22 at 01:31
1

You can use https://www.skypack.dev/, it adjusts any npm package to be used in an ESM-ready environment

For example, if you want to use a library that uses UMD (Universal Module Definition) or CJS (Common JS), you can use skypack and the module will be converted to ESM (ES Modules).

Working case

The canvas-sketch-util/random library uses CJS to import and export some modules (it use require('something') inside), but the code is converted to ESM with that service, and can run directly in the user's browser

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

The same library doesn't work if we use https://unpkg.com/, as it only distributes what is ready, and the code gives error (at the very beginning of the file there are already some require functions from 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>

Important

  1. It's important to use type="module" inside the script, jsfiddle and codePen already do that, it can work locally too.
  2. Each library has an export differently, you must understand how the library is being exported to be able to import it into your code. Here are some examples of different ways of importing, not all cases, you have to know which way of import is the right way.
<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>

Final considerations - 2022

Their website ( https://www.skypack.dev/ ) says the following

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.

So it seems to be something you can trust

KevynTD
  • 487
  • 4
  • 9