javascript tutorial - Difference between Bower and npm - javascript - java script - javascript array
Problem:
What is the fundamental difference between bower and npm? Just want something plain and simple. I've seen some of my colleagues use bower and npm interchangeably in their projects.
Solution 1:
npm is most commonly used for managing Node.js modules, but it works for the front-end too when combined with Browserify and/or $ npm dedupe. Bower is created solely for the front-end and is optimized with that in mind. The biggest difference is that npm does nested dependency tree (size heavy) while Bower requires a flat dependency tree (puts the burden of dependency resolution on the user). A nested dependency tree means that our dependencies can have their own dependencies which can have their own, and so on. This is really great on the server where we don't have to care much about space and latency. It lets we not have to care about dependency conflicts as all our dependencies use e.g. their own version of Underscore. This obviously doesn't work that well on the front-end. Imagine a site having to download three copies of jQuery.
The reason many projects use both is that they use Bower for front-end packages and npm for developer tools like Yeoman, Grunt, Gulp, JSHint, CoffeeScript, etc.
All package managers have many downsides. We just have to pick which we can live with.
Resources
- Nested Dependencies - Insight into why node_modules works the way it does
Solution 2:
Bower maintains a single version of modules, it only tries to help we select the correct/best one for you.
NPM is better for node modules because there is a module system and you're working locally. Bower is good for the browser because currently there is only the global scope, and we want to be very selective about the version we work with.
Solution 3:
My team moved away from Bower and migrated to npm because:
- Programmatic usage was painful
- Bower's interface kept changing
- Some features, like the url shorthand, are entirely broken
- Using both Bower and npm in the same project is painful
- Keeping bower.json version field in sync with git tags is painful
- Source control != package management
- CommonJS support is not straightforward
- For more details, see "Why my team uses npm instead of bower".
Solution 4:
npm:
project root
[node_modules] // default directory for dependencies
-> dependency A
-> dependency B
[node_modules]
-> dependency A
-> dependency C
[node_modules]
-> dependency B
[node_modules]
-> dependency A
-> dependency D
click below button to copy the code. By JavaScript tutorial team
As we can see it installs some dependencies recursively. Dependency A has three installed instances! Bower:
project root
[bower_components] // default directory for dependencies
-> dependency A
-> dependency B // needs A
-> dependency C // needs B and D
-> dependency D
click below button to copy the code. By JavaScript tutorial team
Solution 5:
Found this useful explanation from On one hand npm was created to install modules used in a node.js environment, or development tools built using node.js such Karma, lint, minifiers and so on. npm can install modules locally in a project ( by default in node_modules ) or globally to be used by multiple projects. In large projects the way to specify dependencies is by creating a file called package.json which contains a list of dependencies. That list is recognized by npm when we run npm install, which then downloads and installs them for you. On the other hand bower was created to manage our frontend dependencies. Libraries like jQuery, AngularJS, underscore, etc. Similar to npm it has a file in which we can specify a list of dependencies called bower.json. In this case our frontend dependencies are installed by running bower install which by default installs them in a folder called bower_components. As we can see, although they perform a similar task they are targeted to a very different set of libraries.