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
  • Four Cybersecurity Essentials for Startups 1
    Four Cybersecurity Essentials for Startups Shared Tech Posts
  • Biggest Innovation Since internet – Blockchains Tech News
  • Top 3 Signs That Your Beloved Macbook Needs Tuning
    Top 3 Signs That Your Beloved Macbook Needs Tuning Latest tech
  • Female Founded StartUps 2
    Female Founded StartUps Tech News
  • How AI is changing B2B Banner image
    How AI is changing B2B Businesses Tech News
  • Your IP Address Says More About You Than You Know 3
    Your IP Address Says More About You Than You Know Guest posts
  • Trends in Technology Driving e-Commerce in 2020 Banner Image
    Trends in Technology That are Driving e-Commerce in 2020 Tech News
  • Hacking of high-profile Twitter users prompts FBI investigation 4
    Hacking of high-profile Twitter users prompts FBI investigation Tech News
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: 18 Top mini games to play online for free in browser
Next Post: Drone Safety in 2023

Related Posts

  • How to Encrypt Decrypt Files in Linux Tekraze
    How to Encrypt and Decrypt Files in Linux Tutorials
  • Installing Software in Linux - Three easy ways 5
    Installing Software in Linux – Three easy ways Developer Guide
  • beautify your wordpress blog tekraze
    Beautify your WordPress Blog Content Developer Guide
  • How to install Java Development Kit (JDK) on Windows Banner
    How to install Java Development Kit (JDK) on Windows PC Guide
  • 5 best apps for programming students 6
    5 best apps for programming students Guest posts
  • Cloud Security for Business 7
    Cloud Security for Business Guest posts

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
  • How to Earn Money Through Social Media 8
    How to Earn Money Through Social Media Guest posts
  • ADD AWS Transcribe to Spring Boot APP Tekraze
    Add AWS Transcribe to Spring boot App Developer Guide
  • Full Stack Developer Vs Other Developers explained better 9
    Full Stack Developer Vs Other Developers explained better Developer Guide
  • What are the best Music Streaming Apps in India? 10
    What are the best Music Streaming Apps in India? Music
  • Workflow of Git 11
    Workflow of Git Uncategorized
  • beautify your wordpress blog tekraze
    Beautify your WordPress Blog Content Developer Guide
  • Why Python Programming? 12
    Why Python Programming? Uncategorized
  • Synaptic package manager in linux basics linux guide part 3 banner
    Synaptic package manager in Linux infographics basic Linux tools guide part 3 Developer Guide

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