Browserify is a tool for Node.js that allows developers to write code in a modular style and then bundle it together for use in a web browser. It allows us to use the require() in the browser, the same way you would use it in Node. By using Browserify, you can write code that uses CommonJS modules and then uses that code in the browser without any additional changes. This allows for better code organization and reuse and eliminates the need for a separate build process for the browser. Additionally, Browserify allows you to use npm packages in the browser, making it easy to use popular libraries and modules in your web projects. In this article, we will see how we can integrate Browserify into Node.js.
Steps to Install Browserify and Setup it for the project:
Step 1: Create a New Project folder:
mkdir Project
Step 2: Change the directory to the created project folder and initialize npm init:
To use Browserify in your project, you need to create a package.json file. This file contains information about your project, including its dependencies. You can create a package.json file by running the following command in your project’s root directory:
npm init
Step 3: Install using npm.
To use Browserify, you first need to install it. Run this command on your terminal:
npm install browserify -g
By doing this, Browserify will be installed globally on your system, enabling you to utilize it in any project.
How to integrate browserify for Node.js?
Project Structure: The Basic Project Structure that is followed by the examples given below should look like below:
How to integrate browserify for Node.js?
Example 1: We can now use Browserify. Let’s create a quick program to add two integers to see if it works or not. The ‘mathjs’ module is used in this project to add two numbers. In order to use mathjs we need to install it. So to install it follow the steps given below:
To Install mathjs module using npm follow the command below:
npm install mathjs
How to integrate browserify for Node.js?
Approach:
- The first line var math = require(‘mathjs’); is requiring the ‘mathjs’ module.
- The second line console.log(“The sum of 1 and 2 is “+math.add(1, 2)); is passing the data to the ‘add’ function and the output is logging the sum of two numbers.
- After that, it will show the result as the addition of two numbers in the console.
- The HTML structure of the code should be written in the index.html
- The javascript code should be in the main.js
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Adding the script into the html -->
<script src="bundle.js"></script>
</head>
<body>
<h1>GeekForGeeks</h1>
<h3>Mathjs Module</h3>
</body>
</html>
|
// Including module var math = require('mathjs');
// Print response in the console console.log("The sum of 1 and 2 is " + math.add(1, 2));
|
Steps to run:
- Execute the following command on the terminal. The current file in the command below is called “main.js,” and the file created after conversion is called “bundle.js.”
browserify main.js -o bundle.js
- After that, a file named ‘bundle.js’ is created.
- We can now use the live server to access the HTML file (we are using an HTML file to simply display the output on the screen) or you can open the index.html file directly, as seen below.
Output:
How to integrate browserify for Node.js?
Example 2: In this example, we are using the “moment” module to show the current date and time in the console. In order to use the moment module we need to install it. So to install it follow the steps given below:
To Install the moment module using npm follow the command below:
npm install moment
How to integrate browserify for Node.js?
Approach:
- Require the moment package using “const moment = require(‘moment’);”.
- Create a variable named ‘currentTimeAndDate’ and store the result coming from “moment().format(‘MMMM Do YYYY, h:mm:ss a’);” in that variable.
- In the last step log the result in the console and show the output.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Adding the script into the html -->
<script src="bundle.js"></script>
</head>
<body>
<h1>GeekForGeeks</h1>
<h3>Moment Module</h3>
</body>
</html>
|
// Require the moment module const moment = require('moment');
// Saving the result in currentTimeandDate const currentTimeAndDate = moment() .format('MMMM Do YYYY, h:mm:ss a');
// Printing the result console.log(`Hello, it's ${currentTimeAndDate}`); |
Steps to run:
- Execute the following command on the terminal. The current file in the command below is called “main.js,” and the file created after conversion is called “bundle.js.”
browserify main.js -o bundle.js
- After that, a file named ‘bundle.js’ is created.
- We can now use the live server to access the HTML file (we are using an HTML file to simply display the output on the screen) or you can open the index.html file directly, as seen below.
Output:
How to integrate browserify for Node.js?
In conclusion, Browserify is a great tool for Node.js developers who want to write code in a modular style and use it in web browsers. By following the steps outlined in this article, you can easily integrate Browserify into your Node.js project and start using it to write more organized, reusable code.