Browserify is useful because it will help you to easily bring in and manage necessary dependencies, handling all the file linking thus you need not have to download the dependencies from various websites, placing them into a local dev folder and manually linking them into your html via script tags.
Install Browserify
To install Browserify you need node and npm installed on your computer. Once you have node and npm installed you can use the below command to install browserify :npm install -g browserify
The above command installs Browserify and makes it available system-wide.
Usage
Lets Write an HTML file called browserifyTest.html with below contents<!DOCTYPE html> <html lang="en"> <head> <title>Browserify Test</title> </head> <body> <div id="response"></div> <script src="browserifyTest.js"></script> </body> </html>
Where we have referenced a file called browserifyTest.js whose contents are shown below :
var randomString = require('randomstring');
document.getElementById('response').innerHTML = randomString.generate();
When you run this file in the browser you will get the error as shown below :
So now we will use browserify to convert the JavaScript File to another JavaScript Bundle which will allow us to use require in browser. Browserify bundle up browserifyTest.js by taking note of all the files you require and then include the source of those files in the bundle and also does the same thing for its depenedencies.
browserify browserifyTest.js -o browserifyBundle.js
Then we will be refrencing browserifyBundle.js instead of browserifyTest.js. Once done you can get the required result when you refresh the browser.
No comments:
Post a Comment