#browserify javascript modularjs

Install browserify

You need Node.js installed and NPM comes with Node.js.

npm install -g browserify

Now, let’s set jQuery as our dependency library in our module-alerter.js

var $ = require('jquery'); // Note that we don’t need to specify relative path for our jquery library // jQuery 2.0+ is AMD compatible and it returns jQuery or $ module.exports = function alerter(message) { window.message(message); $(‘body’).css(‘color’, ‘red’); }

Please, use the appropriate directory structure for your modules, libraries. I usually adhere to the following

/modules

- This is where you will put all your custom modules

/vendor

- This is where you will put all your libraries such as jQuery, Backbone, underscore

/assets/js/

- This is where browserify will bundle up all your modules along with vendor libraries in 1 neat and tidy file. (Notice we don’t have anything there yet? We will get to that part)

browserify Magic

It is time to let browserify wave it magic wand over our code and get us to work. Just run the following command by reaching your project directory. In my case, I should be in the directory node (Don’t worry. This is a non-node project. I named it node because I am in love with node.js)

$ browserify src/js/main.js -o assets/js/bundle.js // Please do not prefix $ to the command

Now, switch to the browser and reload or whatever to see the result. Boom! Now, wasn’t that easy?

Your

assets/js/

directory should now look like this

assets/js/bundle.js

bundle.js is that neat and tidy file I mentioned earlier. You don’t have to worry about what’s in there.

Include this bundle.js in your HTML code right before the body ends. Like this

<script src="assets/js/bundle.js"></script>

There’s one problem though. You might wonder, “Do I have to run this command everytime I add new module/vendor library or re-arrange my modules in project structure?” NO.

What you need is something that will keep a track of changes happening in your project. Something that will over watch your beautiful modular code. Fortunately there’s a Node package that can do that for us. Introducing watchify

Install watchify

npm install -g watchify

and change your previous command

from

$ browserify src/js/main.js -o assets/js/bundle.js

to

$ watchify src/js/main.js -o assets/js/bundle.js