Bower和npm有什么区别？

本文翻译自：What is the difference between Bower and npm?

What is the fundamental difference between bower and npm ? bower和npm之间的根本区别是什么？ Just want something plain and simple. 只需要简单明了的东西。 I've seen some of my colleagues use bower and npm interchangeably in their projects. 我已经看到一些同事在他们的项目中交替使用bower和npm 。

#1楼

参考：https://stackoom.com/question/1GDbn/Bower和npm有什么区别

#2楼

All package managers have many downsides. 所有程序包管理器都有很多缺点。 You just have to pick which you can live with. 您只需要选择可以忍受的内容即可。

History 历史

npm started out managing node.js modules (that's why packages go into node_modules by default), but it works for the front-end too when combined with Browserify or webpack . npm开始管理node.js模块（这就是为什么软件包默认进入node_modules的原因），但是当与Browserify或webpack结合使用时，它也适用于前端。

Bower is created solely for the front-end and is optimized with that in mind. Bower是专门为前端创建的，并且考虑到这一点已进行了优化。

Size of repo 回购规模

npm is much, much larger than bower, including general purpose JavaScript (like country-data for country information or sorts for sorting functions that is usable on the front end or the back end). NPM是多少，比亭子，包括通用的JavaScript大得多（如country-data为国家信息或sorts用于分拣功能是在前端或后端可用）。

Bower has a much smaller amount of packages. Bower的包装数量要少得多。

Handling of styles etc 样式等的处理

Bower includes styles etc. 凉亭包括样式等。

npm is focused on JavaScript. npm专注于JavaScript。 Styles are either downloaded separately or required by something like npm-sass or sass-npm . 样式要么单独下载，要么需要npm-sass或sass-npm类的样式。

Dependency handling 依赖处理

The biggest difference is that npm does nested dependencies (but is flat by default) while Bower requires a flat dependency tree (puts the burden of dependency resolution on the user) . 最大的区别是npm确实嵌套了依赖项（但默认情况下是平坦的），而Bower需要平坦的依赖项树（这给用户带来了依赖项解决的负担） 。

A nested dependency tree means that your dependencies can have their own dependencies which can have their own, and so on. 嵌套的依赖关系树意味着您的依赖关系可以具有自己的依赖关系，也可以具有自己的依此类推。 This allows for two modules to require different versions of the same dependency and still work. 这允许两个模块要求具有相同依赖项的不同版本，并且仍然可以工作。 Note since npm v3, the dependency tree will by flat by default (saving space) and only nest where needed, eg, if two dependencies need their own version of Underscore. 请注意，从npm v3开始，依赖项树默认情况下将是扁平的（节省空间），并且仅在需要的地方嵌套，例如，如果两个依赖项需要它们自己的Underscore版本。

Some projects use both is that they use Bower for front-end packages and npm for developer tools like Yeoman, Grunt, Gulp, JSHint, CoffeeScript, etc. 一些项目同时使用这两种方法，即它们将Bower用于前端软件包，将npm用于开发人员工具，例如Yeoman，Grunt，Gulp，JSHint，CoffeeScript等。

Resources 资源资源

Nested Dependencies - Insight into why node_modules works the way it does 嵌套依赖关系 -深入了解node_modules的工作方式

#3楼

Bower maintains a single version of modules, it only tries to help you select the correct/best one for you. Bower维护模块的单一版本，它仅尝试帮助您为您选择正确/最佳的模块。

Javascript dependency management : npm vs bower vs volo? Javascript依赖管理：NPM vs Bower vs Volo？

NPM is better for node modules because there is a module system and you're working locally. NPM对于节点模块更好，因为存在模块系统并且您在本地工作。 Bower is good for the browser because currently there is only the global scope, and you want to be very selective about the version you work with. Bower对浏览器很有用，因为当前只有全局范围，并且您希望对使用的版本非常有选择性。

#4楼

Found this useful explanation from http://ng-learn.org/2013/11/Bower-vs-npm/ 从http://ng-learn.org/2013/11/Bower-vs-npm/找到了这个有用的解释

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来安装在node.js环境中使用的模块，或者安装使用node.js构建的开发工具，例如Karma，lint，minifiers等。 npm can install modules locally in a project ( by default in node_modules ) or globally to be used by multiple projects. npm可以在项目中本地安装模块（默认情况下在node_modules中），也可以全局安装模块以供多个项目使用。 In large projects the way to specify dependencies is by creating a file called package.json which contains a list of dependencies. 在大型项目中，指定依赖项的方法是创建一个名为package.json的文件，其中包含依赖项列表。 That list is recognized by npm when you run npm install, which then downloads and installs them for you. 当您运行npm install时，npm会识别该列表，然后npm install会为您下载并安装它们。

On the other hand bower was created to manage your frontend dependencies. 另一方面，创建Bower来管理您的前端依赖项。 Libraries like jQuery, AngularJS, underscore, etc. Similar to npm it has a file in which you can specify a list of dependencies called bower.json. 像jQuery，AngularJS，下划线等之类的库。类似于npm，它有一个文件，您可以在其中指定一个名为bower.json的依赖项列表。 In this case your frontend dependencies are installed by running bower install which by default installs them in a folder called bower_components. 在这种情况下，可以通过运行bower install来安装您的前端依赖项，默认情况下，它们会安装在一个名为bower_components的文件夹中。

As you can see, although they perform a similar task they are targeted to a very different set of libraries. 如您所见，尽管它们执行相似的任务，但是它们针对的是一组非常不同的库。

#5楼

For many people working with node.js, a major benefit of bower is for managing dependencies that are not javascript at all. 对于许多使用node.js的人来说，bower的主要好处是可以管理根本不是JavaScript的依赖项。 If they are working with languages that compile to javascript, npm can be used to manage some of their dependencies. 如果他们使用可编译为javascript的语言，则npm可用于管理其某些依赖项。 however, not all their dependencies are going to be node.js modules. 但是，并非所有依赖项都将是node.js模块。 Some of those that compile to javascript may have weird source language specific mangling that makes passing them around compiled to javascript an inelegant option when users are expecting source code. 其中一些可编译为javascript的代码可能具有怪异的特定于源语言的修饰，这使得在用户期望源代码时，将它们传递给已编译为javascript的选择不明智。

Not everything in an npm package needs to be user-facing javascript, but for npm library packages, at least some of it should be. 并非npm软件包中的所有内容都需要使用面向用户的javascript，但是对于npm库软件包，至少其中一些应该是。

#6楼

This answer is an addition to the answer of Sindre Sorhus. 此答案是Sindre Sorhus答案的补充。 The major difference between npm and Bower is the way they treat recursive dependencies. npm和Bower之间的主要区别在于它们对待递归依赖项的方式。 Note that they can be used together in a single project. 请注意，它们可以在单个项目中一起使用。

On the npm FAQ : (archive.org link from 6 Sep 2015) 关于npm常见问题解答：（从2015年9月6日开始，archive.org链接）

It is much harder to avoid dependency conflicts without nesting dependencies. 在不嵌套依赖关系的情况下，避免依赖关系冲突要困难得多。 This is fundamental to the way that npm works, and has proven to be an extremely successful approach. 这是npm工作方式的基础，并且已被证明是一种非常成功的方法。

On Bower homepage: 在Bower主页上：

Bower is optimized for the front-end. Bower针对前端进行了优化。 Bower uses a flat dependency tree, requiring only one version for each package, reducing page load to a minimum. Bower使用平面依赖树，每个包仅需要一个版本，从而将页面负载降至最低。

In short, npm aims for stability. 简而言之，npm旨在稳定。 Bower aims for minimal resource load. Bower旨在最小化资源负载。 If you draw out the dependency structure, you will see this: 如果绘制依赖关系结构，则会看到以下内容：

npm: 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

As you can see it installs some dependencies recursively. 如您所见，它以递归方式安装了一些依赖项。 Dependency A has three installed instances! 依赖项A具有三个已安装的实例！

Bower: 凉亭：

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

Here you see that all unique dependencies are on the same level. 在这里，您会看到所有唯一依赖项都处于同一级别。

So, why bother using npm? 那么，为什么要麻烦使用npm？

Maybe dependency B requires a different version of dependency A than dependency C. npm installs both versions of this dependency so it will work anyway, but Bower will give you a conflict because it does not like duplication (because loading the same resource on a webpage is very inefficient and costly, also it can give some serious errors). 也许依赖项B需要与依赖项C不同的版本。npm安装了该依赖项的两个版本，因此无论如何都可以工作，但是Bower会给您带来冲突，因为它不喜欢重复（因为在网页上加载相同的资源是效率低下且成本高昂，也会带来一些严重的错误）。 You will have to manually pick which version you want to install. 您将必须手动选择要安装的版本。 This can have the effect that one of the dependencies will break, but that is something that you will need to fix anyway. 这可能会导致其中一个依赖项中断，但是无论如何，这都是您需要修复的问题。

So, the common usage is Bower for the packages that you want to publish on your webpages (eg runtime , where you avoid duplication), and use npm for other stuff, like testing, building, optimizing, checking, etc. (eg development time , where duplication is of less concern). 因此，常见的用法是使用Bower表示要在网页上发布的软件包（例如， 运行时 ，避免重复），而将npm用于其他内容，例如测试，构建，优化，检查等（例如开发时间） ，而不必担心重复）。

Update for npm 3: npm 3更新：

npm 3 still does things differently compared to Bower. 与Bower相比，npm 3所做的事情仍然有所不同。 It will install the dependencies globally, but only for the first version it encounters. 它将全局安装依赖性，但仅针对遇到的第一个版本。 The other versions are installed in the tree (the parent module, then node_modules). 其他版本安装在树中（父模块，然后是node_modules）。

[node_modules] [node_modules]
- dep A v1.0 Dep A v1.0
- dep B v1.0 部门B v1.0
  - ~~dep A v1.0 Dep A v1.0~~ (uses root version) （使用根版本）
- dep C v1.0 Dep C v1.0
  - dep A v2.0 (this version is different from the root version, so it will be an nested installation) dep A v2.0（此版本与根版本不同，因此它将是嵌套安装）