If you're not impressed enough with npm as a backend JavaScript package manager, perhaps Bower will take you to the next level of joy. (Refer to http://bower.io/.) Bower works very similarly to npm. In fact, most commands and conventions that we've just discussed for npm work verbatim in Bower.
In fact, Bower itself is a Node.js module that is installed through npm:
npm install bower -g
We can interact with Bower the same way we've interacted with npm so far.
bower init
// … using all proposed defaults
// - - - - - - -
// bower.json
{
name: 'npm',
version: '0.0.0',
homepage: 'https://github.com/formigone',
authors: [
'Rodrigo Silveira <[email protected]>'
],
license: 'MIT',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
]
}Bower makes use of a bower.json manifest file, which by now should look somewhat familiar to you. To install dependencies, either edit the manifest by hand or leverage Bower.
bower install jquery –save
// - - - - - - -
// bower.json
{
name: 'npm',
version: '0.0.0',
homepage: 'https://github.com/formigone',
authors: [
'Rodrigo Silveira <[email protected]>'
],
license: 'MIT',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
],
"dependencies": {
"jquery": "~2.1.3"
}
}The main difference between Bower and npm, as should be apparent by now, is that Bower deals with frontend dependencies, which can be JavaScript, CSS, HTML, font files, and so on. Bower will save dependencies inside a bower_components directory, similar to npm's node_dependencies.
Finally, let us use this very handy npm package to leverage our CommonJS modules (as well as Node's native modules) for use in the browser. This is exactly what Browserify does: it takes an entry point script, follows all require statements recursively from that file down, then inlines all files in the dependency tree that it builds, and returns a single file. (Refer to http://browserify.org/.) This way, when a browser runs across a require statement in one of your scripts, it doesn't have to fetch the file from the filesystem; it fetches the file from within the same file.
sudo npm install browserify -g
Once we have installed Browserify (again, since this is intended to be used as a command line tool, we install it globally), we can bundle all of our CommonJS files in one.
// - - - - - - -
// app.js
var Player = require('MyPlayer'),
var hero = new Player(0, 0);
console.log(hero);
// - - - - - - -
// node_modules/MyPlayer/index.js
var defaults = {
width: 16,
height: 16
};
var Player = function(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width || defaults.width;
this.height = height || defaults.height;
};
Player.prototype.render = function(delta) {
// ...
};
module.exports = Player;Browserify will take care of requiring all of the dependencies as needed so that the output file will have all of its dependencies ready to be used, as shown in the preceding code sample.
Browserify takes the name of the entry point as the first argument and prints the output to standard output by default. Alternately, we can specify a filename where the bundle will be saved.
browserify app.js -o bundle.js
Browserify will now create a file named bundle.js, which we can include in an HTML file and use in the browser. Additionally, we can compress the output file with any of the many available tools that are found in npm's registry.
sudo npm install uglify-js -g uglifyjs bundle.js -o bundle.min.js --source-map bundle.min.js.map
Running the preceding code will install a node package named UglifyJS, which parses, mangles, compresses, and shrink-wraps our bundle.js file very smartly. (Refer to https://github.com/mishoo/UglifyJS.) The output will be both very small in size and not at all readable by humans. As a bonus, it creates a source map file, which allows us to debug the minified file by mapping it back to the original bundle.js file in its original form.