Skip to content
  • About Us
  • Contact Us
  • Privacy Policy
  • Disclaimer
  • Corona Virus Stats (Covid-19)
  • Work with us
  • FB
  • LinkedIn
  • Twitter
  • Instagram.com
Tekraze

Tekraze

Dive Into Technology

  • Guides
    • Developer Guide
    • PC Guide
    • Web Guide
    • Android Guide
    • Music
    • Tutorials
  • Feed
    • Tech News
    • Shared Tech
    • Gaming Videos
    • Unboxing videos
  • Forums
    • Android Apps
    • Angular Npm Packages
    • Useful Site Links
    • Tech Queries
    • Windows OS Help
    • Web Guide and Help
    • Android Os And Rooting
    • Jhipster Discussion
    • Git & GitHub forum
    • Open Source Forum
  • Work with us
  • Toggle search form
How to use NPM module with Browserify in the browser

How to use any NPM module with Browserify in the browser

Posted on January 25, 2023January 28, 2023 By Balvinder Singh No Comments on 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.

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

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.

We also share these posts on different crypto platforms like Hive, Blurt, Serey

Content Protection by DMCA.com
Developer Guide Tags:code, module, npm, Programming, Tutorial

Post navigation

Previous Post: 5 Exceptional Snakes and Ladders Games for Android Smartphone Users
Next Post: Drone Safety in 2023

Related Posts

  • Top 10 Emerging Technologies in Computer Science You Must Know
    Top 10 Emerging Technologies in Computer Science You Must Know Tech News
  • Benefits of Providing Cyber Security Training to Your Employees Banner
    13 Benefits of Providing Cyber Security Training to Employees Emerging Startups
  • Tekraze Web development
    The Absolute Beginners Guide for Learning Web Development in 2018 Developer Guide
  • Best Headless CMS examples
    Top 15 Best Headless CMS in 2023 with examples mentioned Developer Guide
  • How to Encrypt Decrypt Files in Linux Tekraze
    How to Encrypt and Decrypt Files in Linux Tutorials
  • Pro. Web Developer - I hope You might know these things 1
    Pro. Web Developer – I hope You might know these things Developer Guide

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Advertisements

Subscribe to updates

Enter your email below to subscribe





Posts by Categories

Advertisements
  • Cartoonize yourself with Colorcinch online photo editor app
    How to cartoonize yourself with Colorcinch Online Photo Editor App Web Guide
  • ADD AWS Transcribe to Spring Boot APP Tekraze
    Add AWS Transcribe to Spring boot App Developer Guide
  • eCommerce in Wordpress using plugins Tekraze
    Build an eCommerce Store in WordPress using plugins easily Developer Guide
  • 12 Tips on How to Extend the Life of Your Laptop
    13 Tips on How to Extend the Life of Your Laptop easily Tech News
  • The Qualities of a Great Mobile app
    The Qualities of a Great Mobile App Developer Guide
  • A Guide For Newcomers to Artificial Intelligence 2
    A Guide For Newcomers to Artificial Intelligence Developer Guide
  • Softwares for Building Website Tekraze
    Softwares for Building Website in minutes Web Guide
  • Realme 6 Pro Tekraze
    Realme 6 and Realme 6 Pro – Launched Tech News

Affliate Links

Sell with Payhip

Earn with Magenet

Sell and Buy with Adsy

GainRock affiliate Program

Automatic Backlinks

Advertise with Anonymous Ads

accessily tekraze verificationIndian Blog Directory

Copyright © 2023 Tekraze.

Powered by PressBook News WordPress theme