01/13/2023

Bundling NPM packages for the browser

How to bundle your NPM package for production

When building Kod.js I wanted it to work on both Node and in the browser. I had to be careful not to use modules that aren't compatible with both environments. However, once the code was written it still relied on external packages that had to be loaded separately, this clearly isn't a good way to create a package. After doing a bit of research I came across module bundlers like browserify that could make my code into one big file. Here's how to do the same:

Installing Browserify

Browserify is an open-source javascript bundler that runs as an OS-level command so you will want to install it globally.

npm install -g browserify

Using ES6 import

Out of the box, browserify doesn't support ES6 modules, you will need to install esmify to be able to bundle using browserify.

npm install -g esmify

Minifying your bundle

When bundling code you will notice there is a lot of code all in one file, to reduce the file size you can use a code minifying tool like terser that can compress your bundle by replacing all the variables with the smallest name possible.

npm install -g terser

Using it all together

Below is the command I have set in my package.json to build my web bundle for Kod.js.

npx browserify -p esmify index.mjs | terser --compress --mangle > ./dist/kod.min.js
Back

Comments


Be the first to comment!

Read More

JS Chunk Array

Here's a simple function that uses generators to chunk an array. Generators are a type of function that returns an iterator and traverse it one at a time if you u...

Lazy Loading Images

Lazy loading is a technique that defers the loading of images until they are needed, rather than loading them all at once when the page first loads. This can help improve th...

Generating Random Colors on a Range

If you want to add some visual interest to your website, consider incorporating random colors. While using the Math.random() function to generate colors can be a quick and easy option, it may result in some less-than-appealing hues. An alternative approach is to create a set...