Getting Started With Browserify Part2 -Tutorial Savvy

In my previous post we have configured and learnt Browserify.In this post we will learn how Browserify fits with commonJS module programming style.
commonJS provides exporting of methods so it can be used by other program. CommonJS provides the exporting of function and used by NodeJS program.
In this demo, “We will learn to export methods and used by other program in NodeJS environment.Also we will use Browserify to bundle it and used by client/browser side”.
The initial directory structure is as following screenshot.The my-script.js file contains all the JavaScript code.The demo.js file contains the code to import the my-script.js file and use them in different operation.

The following code has the content of my-script.js file.It uses the commonJS programming style to export few methods.To export methods we need to use module.exports property. The three methods makeSquare(), addTwoNumbers() and sayHello() methods are exported.But the findGreatesNumber() method is not exported.

//Exporting mulitple items
module.exports={
    //method will be exported
    makeSquare :function(number){
        return number * number;
    },
    //method will be exported
    addTwoNumbers: function(number1,number2){
        return number1+number2;
    }
};
//method will not exported
var findGreatestNumber = function(number1,number2){
    return number1 > number2 ? number1:number2;
}
//Exporting single item
module.exports.sayHello = function(inputText){
   return "Hello "+inputText;
};

The following code shows the content of demo.js file.It has imported all the methods from my-script.js file which are marked exported using require() method.

var myScript = require("./my-script.js")
    result1 = myScript.addTwoNumbers(3,2),
    result2 = myScript.makeSquare(9),
    result3 = myScript.sayHello("Sandeep");

console.log("Exported methods are: ",myScript);
console.log("Addition of 3 and 2: ", result1);
console.log("Square of 9: ", result2);
console.log("SayHello method returns: ", result3);

The following screenshot shows the terminal with NodeJS execution of demo.js file.We can see the imported object from my-script.js file logging all the exported method.Other console log messages are result of the operations performed by the imported method.

Now it is time to do the magic of Browserify to create a bundle which can be used by the client/browser.The following screenshot shows the terminal with Browserify command in progress.It generates bundle.js file.

To use the bundle.js file in client/browser we have created a demo.html file which includes the generated bundle.js file.Now the updated file structure looks like following screenshot.

The following code shows the content of demo.html.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Browserify Demo Part2</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

The output of demo.html is as following screenshot.We can find the same log messages printed in the chrome console.

The demo code can be downloaded from the following link.

https://github.com/saan1984/BrowserifyDemoPart2

Getting Started With Browserify Part2

Related

Sandeep