# How to use any NPM module with Browserify in the browser

Hi everyone, while working on something came across some issues where the [code](https://tekraze.com/the-right-way-to-ode-and-syntax-you-need-to-follow/) reference available did not work as we can not import npm modules directly on the [web](https://tekraze.com/importance-website-design-development-services/).  
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**](https://browserify.org/)

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](https://tekraze.com/forumz/forum/angular-angularjs-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](https://tekraze.com/text-editors-code-2018/) or even edit with the `nano` editor in the [terminal](https://tekraze.com/using-terminal-in-linux-infographics/)

`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](https://tekraze.com/encrypt-decrypt-file-linux/) 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](https://tekraze.com/new-web-application-development-trends/) in the [browser](https://tekraze.com/brave-browser-basic-attention-token/) 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/*](https://tekraze.com/how-to-use-npm-module-with-browserify-in-the-browser/)