Installation of npm and Introduction to Browserify

Browserify is a development tool that use node.js-style modules means CommonJS module system for frontend JavaScript development. We write our modules in separate files, exporting external methods and properties using the module.exports and exportsvariables. We can even require other modules using the require function.

If we omit the relative path it'll resolve to the module in the node_modules directory.

Getting started with the browserify command-line tool requires node.js and npm (Node Package Manager) installed.

Just visit http://nodejs.org/download/ and download Installer according to your OS type like windows/mac and 32/64 bit.

Install that downloaded application.

After completion of installation, open command prompt (cmd) and write following command

npm install browserify -g Press enter.

This should install the browserify executable. On some platforms, you may need to use sudo i.e. sudo npm install browserify -g if you are getting permission error issues.

You have successfully added node.js and npm installation

Example of using Browserify

multiply.js: var opMultiply = function (a, b) { return a * b; }; module.exports.opMultiply = opMultiply; square.js: var multiply = require('./multiply'); var opSquare = function (n) { return multiply.opMultiply (n, n); }; module.exports.opSquare = opSquare; index.js: var square = require('./square'); alert(square.opSquare (5)); //=> 25

Now we have written a couple of modules that require each other, we can run browserify and generate the file for use in the browser:

Open cmd and run following command Syntax : browserify <source file.js> -o <destination file.js> Example : browserify index.js -o bundle.js

Now that we have a bundle.js file that bundled the three modules we wrote, we can add a single script tag reference to it into our html page and it'll execute in the browser automatically resolving require calls.

<script src="bundle.js"></script> and we should get 25 as in alert message.

Conclusion :

I hope that this article would have helped you in understanding Installation of npm and use of Browserify. Your feedback and constructive contributions are always welcome.