How to work with Browserify?

Before we even could think of using native modules’ system, the JavaScript community created two solutions:

• CommonJS – mainly implemented in Node.js
• AMD (Asynchronous Module Definition) – used in Require.js

Both solutions present a slightly different way of implementing and folding modules’ system.

Relations between Browserify and CommonJS

Browserify is one of the most popular implementations of CommonJS API which allows to define modules in JavaScript code sent to the browser. This tool provides us with require() function which is used for loading dependencies and module.exports variable to which we assign the value returned by the module or a fragment of code after loading the file.

Browserify checks every module loaded via require and builds the whole dependencies’ tree at the launch. As an argument to require we should dish up a file path to the JS file (or the name of the npm package – more on that later) which contains loaded module. All files are combined into a single JS file and the modules’ objects are created from functions, so this is the only one thing that should be attached to HTML script.

Where to start?

You need to have NodeJS and npm installed on your computer before you start working with this tool. A few words were said in the article about Gulp – if you’re not familiar with using npm yet, I recommend checking it. To install Browserify we use the command:

npm install browserify –g

The next step requires creating a new file named module.js in the modules folder. This file contains the following code:

function getArray() {
    return ['foo', 'bar'];
}

module.exports = getArray;

Now we can load the code coming from the separate file into main file:

var getArray = require('./modules/module.js');
var table = getArray();

After that you have to run Browserify which will create the bundle, that means, our output file. We type in the console:

browserify main.js –o build/main.js –d

In the command we have to input our startup file and, after the –o flag (which means output), the location where our output file is meant to be found. It is necessary to add the –d flag if we want to generate source maps, thanks to which the debugging process will relate to our source code rather than to our output file.

All we have to do next is to link our output file in HTML:

<script src=”build/main.js”></script>

A vast amount of npm packages are compatible with Browserify. If we want to use jQuery in our project, all we have to do is to install the latest version via npm:

npm install jquery --save

All files downloaded in such a way can be found in the node_modules folder. Now, in order to get access to jQuery in our scripts, we just have to use require and set to the file the name of the package with npm instead of path file.

var $ = require('jquery');

Unfortunately, not every library can be found in npm or is compatible with CommonJS – if that happens, you have to use Browserify-shim

Browserify hand in hand with Gulp

Typing the same command in order to create a package every time we changed our code a bit and want to see the results is surely annoying. Gulp is the perfect tool for working with Browserify as we can create special task that will set up the package with every change.

The basic task for Gulp looks like that:

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');

gulp.task('browserify', function() {
  return browserify().bundle()
    .pipe(source('main.js'))
    .pipe(gulp.dest('build'));
});

It’s the simplest implementation which doesn’t react on changes in files – in order to obtain such functionality, it is necessary to use watchify module.

Browserify vs RequireJS

RequireJS, the concurrent alternative to Browserify, gives us similar functionalities with a bit different syntax. Modules can be defined by using define() function. As arguments it takes, in order:

• the name of the module

• the modules names’ array – modules we want to have access to in the module we are currently defining

• the function that takes modules defined in the array as its own arguments

To clear it up, that’s how the example module looks like:

//modules/module.js
define('getArray', function() {
  return ['foo', 'bar'];
});

//main.js
define('main', ['getArray'], function() {
  var table = getArray();
});

The preferred syntax is obviously the subjective choice, however I definitely lean towards CommonJS, as in my opinion its syntax is far more understandable and convenient in use. Additionally the same syntax is used, as I mentioned at the beginning, in NodeJS. The another advantage of Browserify is that it easily integrates with npm packages and it automatically assemblies packages into the single file. In case of RequireJS, if we want to combine all files into the single one, we have to do it on our own. On the other hand, RequireJS allows to load modules asynchronously.

Summing up – why to choose Browserify?

Browserify is the ideal tool for various-sized projects. It is clearly a good choice for those who want to keep order in the project and to move between scripts with ease. Additionally, a well-written code can be easily implemented in other projects. The effortless integration with Gulp and the automatic execution of create-output-package task makes that tool very convenient in use.