@chriscalo/browser-require

CommonJS require() and define() functions for use in the browser without a build step

Usage no npm install needed!

<script type="module">
  import chriscaloBrowserRequire from 'https://cdn.skypack.dev/@chriscalo/browser-require';
</script>

README

browser-require

CommonJS require() and define() functions for use in the browser without a build step

Including

<script src="//unpkg.com/@chriscalo/browser-require/index.js"></script>

Usage

The simplest way to use define() is to return a value.

define("string", () => {
  return "string";
});

But you can also set keys on the exports object (1st param).

define("foo", (exports) => {
  exports.foo = "foo";
});

Finally, you can also return a whole new exports object by setting it on the module object (2nd param).

define("bar", (exports, module) => {
  var foo = require("foo");
  module.exports = {
    bar: "bar",
    foo: foo,
  };
});

Then, after those modules have been defined, you can do synchronous require() calls.

var string = require("string");
var bar = require("bar");
var foo = require("foo");

console.log("string:", string); // => string: string
console.log("bar:", bar); // => bar: { bar: "bar", foo: "foo" }
console.log("foo:", foo); // => { foo: "foo" }

The functions supplied to define() are only ever called once:

console.log(
  "test memoization:",
  string === require("string"),
  bar === require("bar"),
  foo === require("foo")
); // => test memoization: true true true