Two package managers? This might get novices into a pretty pickle. In the following paragraphs, you will find out when to use NPM and when to use Bower.
When dealing with UI, you can use these two managers to install two types of packages:
- web components – e.g. Bootstrap or jQuery and its plugins (usually using Bower)
- software for developers’ use – e.g. Grunt plugins improving your workflow (usually using NPM)
What Is a Packaging System for, Anyway?
Coders are not used to using a packaging system so let’s explain why it is good to do so.
First, installation is easier – just type
bower install jquery and an
up-to-date version of jQuery will be installed into the
Second, updates are easier – when a new version of jQuery is released, all
you need to do is type
bower update jquery and you have it in your project.
Third, all this improves project manageability – both NPM and Bower components are stored in special directories which are not versioned. Project dependencies are versioned in NPM or Bower configuration files. Thanks to that, our repository and its history are simplified.
Node Package Manager - NPM.js
In my workflow, I use NPM mainly for installing libraries such as Grunt and its plugins. However, there are several approaches to packaging, so it is good to know that web libraries such as jQuery can be installed using NPM too.
NPM uses a
package.json config file and installs everything into a
See more at npmjs.org.
In my case, Bower manages project dependencies - not just the usual jQuery packages but also polyfills like Respond.js or Picturefill and other libraries such as Bootstrap.
Bower uses a
bower.json config file and installs everything into a
See more at bower.io.
A Few Useful Commands
Fortunately, Bower has adopted the NPM syntax so working with it is similar to using NPM.
npm|bower search jquery
npm|bower install jquery
--save-dev will save the library into the project’s dependencies in a
package.json config file. However, jQuery is a user dependency
so it is better to use
--save when developing a website.
Let’s move on: updating jQuery:
npm|bower update jquery
Installing and updating can be done within the same project at once. Both Bower and NPM compare the configuration file with the latest version of dependencies:
Bower vs NPM
Now, let’s review differences based on their purpose:
- Bower is a package system for front-end. It is used for web components.
The package systems differ not only in purpose but in the way they save dependencies as well:
- NPM installs packages and their dependencies one at a time. As a result of this, the directory into which the packages are installed contains multiple package versions. This makes perfect sense when using Grunt plugins - every packages requires a different dependency.
- Bower, on the other hand, installs all dependencies at once. This also makes perfect sense - you want a single jQuery version on your website.
Therefore, when running a standard project, the
will contain much less data than the