Overview
NodeJS has the most amazing package manager, npm that allows you to install modules easily. After installing a module, you can simply require it by doing require(‘moduleName’). Wouldn’t it be great if you could do that on the client side too? Using browserify, you can. You can find more information here.
Installation
Step 1
1
2
3
4
5
6
7
8
9
10
11
12
### Command Line ###
# Get the right packages
npm install -g grunt-cli
npm install --save-dev bower
npm install --save-dev debowerify
npm install --save-dev load-grunt-tasks
npm install --save-dev grunt
npm install --save-dev grunt-contrib-clean
npm install --save-dev grunt-browserify
Step 2
1
2
3
4
5
6
### Command Line ###
# Create a Gruntfile.js
touch Gruntfile.js
touch bower.json
touch .bowerrc
Step 3
1
2
3
4
5
6
7
8
9
10
11
// ### in bower.json ###
{
"name": "Server14Browserify",
"version": "0.0.1",
"dependencies": {}
}
// ### in .bowerrc ###
{
"directory": "public/bower_components"
}
Step 4
1
2
3
4
5
6
// ### in package.json ###
// add the following
"browserify" : {
"transform": ["debowerify"]
}
Step 5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// ### in Gruntfile.js ###
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
// will clean
clean: {
build: {
src: ['public/javascripts/build.js']
}
},
// will browserify all the js files
browserify: {
client: {
src: ['public/javascripts/**/*.js'],
dest: 'public/javascripts/build.js'
}
}
});
grunt.registerTask('default', ['clean', 'browserify:client']);
};
Step 6
1
2
3
4
5
6
7
8
9
10
// ### in public/javascripts/index.js ###
// you can now require node modules or bower modules, or even other js files
var unique = require('uniq');
var $ = require("jquery");
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log($("body").html());
console.log(unique(data));
Step 7
1
2
3
4
5
6
### in Command Line ###
# running this will generate a build.js file
# that contains all the js you need (jquery + uniq + index.js)
# to use it, simply make a script with that file as the src
grunt
How to use
After installing the modules you want to use (using bower or npm), you simply require them in your file
1
2
3
4
5
6
7
8
9
10
11
// ### in public/javascripts/index.js ###
var unique = require('uniq'); // node module
var $ = require('jquery'); // bower module
var sayMyName = require('./sayMyName'); // own module
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log("'Uniq' node module", unique(data));
console.log("'jQuery' bower module", $('body').html());
console.log("'sayMyName', own module", sayMyName());
To make your own file into a module, you use module.exports like you would in node
1
2
3
4
5
// ### in public/javascripts/sayMyName.js ###
module.exports = function(){
return "This is sparta";
};