How to use any NPM module with Browserify in the browser

Hi everyone, while working on something came across some issues where the code reference available did not work as we can not import npm modules directly on the web.\
There are CDN versions but not everything it supports. So, what can be done?

NPM modules are built mostly for node.js system and may not work directly in the browser because of different dependencies used within any module. In that case, it becomes difficult to use that script. So, here is a better way to use any NPM module in the web without worrying for any dependencies.

Using Npm Module with Browserify

So, after looking for a way I found the way to do that.

The idea behind this approach

• is to create a project with NPM that will give us a package.json for installing npm packages
• add all dependencies whatever you want like Buffer
• assign them to the window object that will be used to call the modules in the web script
• generate a JS bundle to be exported later
• serve locally in the same folder or via CDN as per your ease and requirement

Now, you have the idea. Let's see how to do this.

Steps to make a JS bundle with Browserify NPM

1. Install the Npm package globally

Enter the below command in your terminal

npm i -g browserify

2. Create a folder and initialize the NPM project

Create a directory and move to the directory

Enter the command in the terminal

mkdir example cd example npm init -y

this will create an npm project where you can add your dependencies.

3. Let's add Some npm packages for example

Let's say we need to have the Buffer package installed and use it to convert while file upload

Then add via command

npm install buffer

4. Create a file to import npm modules you need

You can name the file anything, let's say we create the file with the name main.js and import our modules in the same file. Then we need to assign that variable to the window object that is available globally in the browser. As the window object is globally available in the browser, we can simply call the module by window.module syntax where we call the module name we assign in the main.js file.

Enter command

touch main.js

Open in the editor or even edit with the nano editor in the terminal

nano main.js

Paste the following code in the main.js file

// Here we import the module we need

const Buffer = require('buffer').Buffer;

// here we assign the imported module to use in the window later.

window.Buffer = Buffer;

Then save the file.

5. Create a Browser Bundle to export npm modules bundled as one

Now, we need to convert this file to a static JS script, which will pull all code from the NPM modules and make it a simple script that works in the browser locally or using CDN.

Enter the following command in the terminal

browserify main.js -o example.js

here main.js is the file with our imports and example.js is the output file. You can name it anything you like.

6. Import the bundle into the project

Now just copy this file in the root or any folder as the index.html where we want to use this.

Let's say we have the files index.html and example.js in the same folder. then to import we can include the script tag and use the code. In this method, we can import our buffer module easily.

<script src="./example.js"></script>

<script>

async function someMethod() {

const res = window.Buffer.from('somestring');

}

</script>

So, this is how you can make use of NPM modules in your web project in the browser or even just a simple HTML + JS project.

We will be sharing more of these tips often.

Thanks for reading.

Cross Posted from https://tekraze.com/how-to-use-npm-module-with-browserify-in-the-browser/