The first problem that I faced while working on JavaScript development is creating reusable libraries that can work on node and on browsers. I wanted a simple start from scratch tutorial and so I ended up creating my first blog.
Tools required
- Install NodeJS from https://nodejs.org
- Any text editor (I use atom from https://atom.io)
Lets Begin
At first we need to install some node modules that are required for setting up our development environment.
To initialize the new node module we need to create package.json that will store the configuration of the app. Run the below command in your terminal/ command prompt and provide the info it asks.
$ npm init
The node modules follow the syntaxes of Common-JS modules whereas it is not supported by the browsers yet. Lets write a simple javascript file that supports both node and browsers.
Directory structure
I followed the below directory structure for my js library.
simple
app
math.js
tests
test-math.js
app.js
app.html
package.json
karma.conf.js
In a browser, window is the global object where as in node it is called exports (alias for module.exports). I’ve taken addition of two numbers as the simple javascript library.
We can follow a test driven approach for writing our code. Our library is going to be call “math” and “math.add(a, b)” will be function which adds two numbers a, b and returns the sum of it. I used jasmine as the unit test framework.
describe("the add function", function () {
it("should return 30 for inputs 10, 20", function () {
expect(math.add(10,20)).toEqual(30);
});
});
As we are going to write the script compatible with the I chose karma test runner. Run the following commands in the terminal to install the required packages.
$ npm install karma-cli --save-dev $ npm install karma-jasmine --save-dev $ npm install karma-phantomjs-launcher --save-dev
I used PhantomJS as the browser. The “–save-dev” option is used to store the dependencies in the package.json. You can also install the packages globally by using “-g” option. Now run the following command to create the karma configuration file (karma.conf.js). You can give “./app/math.js” and “./tests/test-math.js” where it asks for the JS files to be loaded and give PhantomJS as the launcher.
$ karma init
After creating the karma.conf.js, the run the below command to start the karma runner. It will continue to run and monitor for any changes in the files added while configuring.
$ karma start
So our first step will be to create a common global object that references either window/this or the exports object.
var global = (typeof exports === "undefined") ? this : exports;
Next step would be making you script understand that you are using global object to export the functions and properties.
(function(global) {
global.exported_function = function () {
//some code here;
};
})(global);
Next step is to change the implementation of the above function to include our math library.
// math.js
(function(global) {
global.math = (function () {
return {
add : function (a, b) {
return a + b;
}
};
})();
})((typeof exports === "undefined") ? this : exports);
Now see the terminal where the karma test runner is running. This should pass the test case.
Let’s make the function even more generic in terms of namespace as below.
// math.js
(function(global, ns) {
global[ns] = (function () {
return {
add : function (a, b) {
return a + b;
}
};
})();
})((typeof exports === "undefined") ? this : exports, "math");
Now we can create the app.js (the main file for our node module) and app.html to check whether our code runs on the server or not.
You can now open the html file in any browser to see the result. The app.js file looks like below.
// app.js
var math = require("./app/math.js").math;
console.log(math.basic.add(10, 20));
Run the following command in the terminal to run the code in node.
$ node app.js
This concludes the steps to create a simple single file JS library that works on browser and node without the need of third party libraries.
In my next blog, I will explain about writing multi-file javascript library which can be used in both browser and node.
Learn with me 