Npm和Bower都是依赖管理工具。但两者之间的主要区别是npm用于安装Node js模块，而bower js用于管理前端组件，如html, css, js等。

更让人困惑的是，npm提供了一些可以在前端开发中使用的包，比如grunt和jshint。

这些台词增加了更多的含义

与npm不同，Bower可以有多个文件(例如.js， .css， .html， .png， .ttf)，这些文件被认为是主文件。当打包在一起时，Bower从语义上将这些主文件视为一个组件。

编辑:Grunt与Npm和Bower有很大的不同。Grunt是一个javascript任务运行器工具。你可以使用grunt做很多事情，否则你必须手动完成。重点介绍Grunt的一些用法:

压缩一些文件(例如zip插件) 检测js文件(jshint) 编译更少的文件(grunt-contrib-less)

有一些grunt插件用于sass编译，丑陋你的javascript，复制文件/文件夹，缩小javascript等。

请注意，grunt插件也是一个npm包。

问题1

当我想添加一个包(并将依赖项签入git)，它属于哪里-进入包。Json或者变成bower。Json

这要看这个包裹是放在哪里。如果它是一个节点模块(如grunt,request)，那么它将被放在包中。Json，否则为bower Json。

问题2

什么时候我应该像这样显式地安装包，而不将它们添加到管理依赖关系的文件中

无论你是显式地安装包，还是在.json文件中提到依赖关系。假设你正在做一个节点项目，你需要另一个项目，比如请求，那么你有两个选择:

编辑包。Json文件，并在“请求”上添加依赖项 npm安装

OR

使用命令行:npm install——save request

——save options将依赖项添加到包中。Json文件。如果你没有指定——save选项，它将只下载包，但json文件将不受影响。

你可以用任何一种方式来做，不会有实质性的区别。

2016年中期更新:

事情变化得如此之快，如果到了2017年底，这个答案可能就不再是最新的了!

初学者可能很快就会迷失在构建工具和工作流的选择中，但2016年最流行的是根本不用Bower、Grunt或Gulp !在Webpack的帮助下，你可以直接在NPM中做任何事情!

谷歌"npm as build tool"结果: https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa Webpack: https://webpack.github.io/docs/installation.html

不要误解我的意思，人们使用其他工作流程，我仍然在我的遗留项目中使用GULP(但慢慢地离开了它)，但这是最好的公司和开发人员在这个工作流程中赚了很多钱!

看看这个模板，它是一个非常最新的设置，由最好的和最新的技术组成: https://github.com/coryhouse/react-slingshot

Webpack NPM作为构建工具(没有Gulp, Grunt或Bower) 与Redux反应 ESLint 这个名单很长。去探索吧!

你的问题:

当我想添加一个包(并将依赖项签入git)时， 它应该放在哪里，放在包里。Json或者变成bower。Json

所有东西都要打包。json现在 构建所需的依赖项在“devDependencies”中，即npm install require-dir——save-dev(——save-dev更新你的包。添加一个条目到devDependencies) 应用程序在运行时所需的依赖项在“依赖项”中，即npm install lodash——save(——save更新你的包。Json)

如果是这样的话，我应该在什么时候像这样显式地安装包，而不将它们添加到管理依赖关系的文件中(除了全局安装命令行工具)?

总是这样。只是因为舒适。当你添加一个标志(——save-dev或——save)时，管理deps的文件(package.json)会自动更新。不要浪费时间手动编辑其中的依赖项。npm install——save-dev package-name的快捷方式是npm i -D package-name, npm install——save package-name的快捷方式是npm i -S package-name