By Seth Vincent
There is still no best answer to client-side package managers and dependency management. We still have to cobble together the solutions that work best in the context of each project, but at least we’re not downloading js/css manually through the browser, using wget or writing bash scripts to download/update our client-side dependencies.
We have better options.
In this article I will focus on three that fit best with my development workflow and discuss my personal strategy for when and how to use them:
All three are quite different:
You install npm by installing node. Packages are installed using
npm install <package name>.
npm install --save request
--save option adds the package as a dependency to the project’s package.json file. You can create a package.json file using the
npm init command.
Bower is distributed as an npm package, so install it with:
npm install -g bower
-g option installs the Bower package globally and exposes the
bower command. Packages are then installed like this:
bower install --save <package name>
--save option adds the package as a dependency in the project’s bower.json file. If a bower.json doesn’t already exist, you can create one with the
bower init command.
component is also installed using npm:
npm install -g component
The syntax of the
component command is a little different. It relies on GitHub repositories and uses the same namespace, so a package is identified by a
Installing looks like this:
component install <username>/<package name>
component install component/dom
The above command installs the dom component, which is a collection of small components that replicate the functionality of jQuery.
To add dependencies to component.json, you can use the
You can learn more about component here: https://github.com/component/component
When I use npm for browser code
If I’m using npm and browserify, I’m almost always using beefy as the live-reload development server. It’s great.
I sketch ideas in requirebin.com sometimes. It’s a pretty great little service that let’s you require modules from npm, run them through browserif, and view the results of that code – all in the browser.
You can learn more about npm at npmjs.org
When I use Bower for browser code
Typically using Bower means that I am also using the Grunt build tool and its associated plugins as the live-reload development server as well as for packaging builds and any other task automation.
To learn more about Bower, visit bower.io.
I don’t really use component yet…
…but I definitely want to. It looks like there’s some great work happening around component. I expect that there will be instances when I’ll want to use some of the available components. Many components have Node.js support and should just fit into my usual npm/browserify workflow without issue. However, I would likely be installing those components via npm rather than the
Use all three at once!
Check out this great guide for using components, bower packages, AMD modules and even global variables with browserify: Browserify and the universal module definition
Brian has published in a variety of technical publications over the years, has presented at numerous conferences and events and has served as a technical editor on a number of books.
You can read Brian’s blog archive with 9+ years of content at remotesynthesis.com (he still posts, infrequently). You can find a full list of Brian’s past publications and presentations. Follow Brian on Twitter @remotesynth.