When I started my last frontend JavaScript project I wasn't super familiar with all the package managers, what they do, and what they're for, so I quickly became very confused.
I was recently reminded of that time when I saw this question:
Am I the only one frustrated by the package management situation in frontend development?
I did a little research and I found SEVEN JavaScript package managers that you can use on the frontend.
Why are there so many?
To answer that, I've built a comprehensive list of frontend JavaScript package managers. For each one I'll discuss what sets it apart and why you might use it.
At the very end I'll tell you which package manager I use for everything, and why.
1. NPM
npmjs.com ◦ github.com/npm/npm
First Commit: Sep 29, 2009
Creator: @izs
Tagline: "npm is the package manager for javascript"
This one is usually thought of as the node package manager. NPM even stands for node package manager. Obviously you aren't using node in the browser/frontend.
So why is this listed here?
You can use NPM packages for frontend AND backend. Any NPM package that you find might be intended for node only, browser only, or both. These days it seems like most packages can be used in both places.
2. Yarn
Yarn is new and Open Source JavaScript package manager developed by Facebook. Yarn is fully compatible with the npm registry and can work alongside npm, but it's aim it to be a safer, more secure and more reliable alternative.
You can replace your whole npm workflow with Yarn for new or current projects with very minimal effort. Dependencies in Yarn are kept in a yarn.lock file that should be checked-in your source control, but the file itself is for Yarn only and shouldn’t be edited. Here just enough to get your started with Yarn.
3. Bower
bower.io ◦ github.com/bower/bower
First Commit: Sep 6, 2012
Creator: @cra
Tagline: A package manager for the web
Bower has more github stars by far than any other package manager in this list. It is clearly very popular (and has a great logo!).
But you can't go on the star count alone. Bower probably has so many stars because it used to be incredibly useful.
When Bower was created, NPM existed already, but it was for node, not the browser. Node packages didn't usually include assets (like bundled JS and CSS) in their NPM packages. If you needed the assets, you would just download them. That's janky - and that's why Bower was created.
Nowadays NPM packages include frontend assets, so if you are already using NPM for your node backend, you might want to stick with NPM and skip Bower.
4. JSPM
jspm.io ◦ github.com/jspm/jspm-cli
First commit: Sep 16, 2013
Creator: @guybedford
Tagline: Frictionless browser package management
For users of the SystemJS bundler. If you aren't using SystemJS, you can go ahead and skip this one.
JSPM doesn't host any of its own packages. It allows you to install packages that are hosted on NPM or github. So if you use JSPM, you should search for packages on npmjs.com.
5. Duo
duojs.org ◦ github.com/duojs/duo
First commit: Apr 9, 2014
Creator: @MattMueller, @mako281
Tagline: A next-generation package manager for the front-end.
Duo lets you specify your require() statements as github paths, (with an optional version) like this:
var uid = require("matthewmueller/uid");
var fmt = require("yields/fmt");
var reactive = require("component/[email protected]");
The idea is that it saves you time and effort because you don't have to install the package or create a package.json file. Duo finds and installs the package automatically.
I would argue that this is foolish. If you require() a package in multiple places, you have to update all your require() statements any time you want to change the version.
Duo may save a little time in the short term, but it will cost you more in the long term.