ryanwold.net

A civic-minded citizen seeking the singularity

An entry

Packaging up a TypeScript library for use in a browser

Date: 2022-12-19
Status:
Tags: javascript elixir esbuild jungle bus

Here's the punchline:

browserify dist/typescript-npm-package.umd.js --standalone JungleBus > js/jungle_bus.js

Here's the story:

I wanted to use JungleBus in an Elixir app to listen for events from the bitcoin (BSV) blockchain. The current version of Elixir uses esbuild, as opposed to npm for package management. And when I went to import the JungleBus functions in app.js, I got a variety of errors that lead me to start digging. Errors like import_js_jungle_bus is not a constructor, and require is not defined for centrifuge, a dependent library of JungleBus.

I found my way to Browserify, and tried a few different commands that did not work, including:

browserify dist/typescript-npm-package.umd.js -o --standalone js/jungle_bus.js

And I tried referencing the generated jungle_bus.js as an import in app.js as well as linking to it as a type=module next to other apps in root.html.leex, but no luck.

Ultimately, I found the --standalone option, and was able to run:

browserify dist/typescript-npm-package.umd.js --standalone JungleBus > js/jungle_bus.js

to generate file I was able to reference in app.js and got the imports to work... finally. 😅