Table of contents
- Using Npm Module with Browserify
- Steps to make a JS bundle with Browserify NPM
- 1. Install the Npm package globally
- 2. Create a folder and initialize the NPM project
- 3. Let’s add Some npm packages for example
- 4. Create a file to import npm modules you need
- 5. Create a Browser Bundle to export npm modules bundled as one
- 6. Import the bundle into the project
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 tekraze.com/how-to-use-npm-module-with-brow..