Grunt、NPM 和 Bower 之间的区别（ package.json 与 bower.json ）

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

使这更令人困惑的一个事实是，npm 提供了一些也可用于前端开发的包，例如 grunt 和 jshint。

这些线条增加了更多含义

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

编辑：Grunt 与 Npm 和 Bower 完全不同。 Grunt 是一个 javascript 任务运行工具。您可以使用 grunt 做很多事情，否则您必须手动完成。强调 Grunt 的一些用途：

压缩一些文件（例如 zipup 插件） Linting js 文件（jshint） 编译更少的文件（grunt-contrib-less）

有用于 sass 编译、丑化你的 javascript、复制文件/文件夹、缩小 javascript 等的 grunt 插件。

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

问题一

当我想添加一个包（并将依赖项签入 git）时，它属于哪里 - 到 package.json 或 bower.json

这真的取决于这个包属于哪里。如果它是一个节点模块（如 grunt、request），那么它将进入 package.json，否则进入 bower json。

问题2

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

无论您是显式安装软件包还是在 .json 文件中提及依赖关系都没有关系。假设您正在处理一个节点项目，并且需要另一个项目，例如 request，那么您有两个选择：

编辑 package.json 文件并添加对“请求”的依赖

npm 安装

或者

使用命令行： npm install --save request

--save 选项也将依赖项添加到 package.json 文件。如果不指定 --save 选项，它只会下载包，但 json 文件不受影响。

你可以这样做，不会有实质性的区别。

---

2016 年中期更新：

事情变化如此之快，以至于如果是 2017 年末，这个答案可能不再是最新的了！

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

谷歌“npm 作为构建工具”结果：https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa

网页包：https://webpack.github.io/docs/installation.html

不要误会我的意思，人们使用其他工作流程，我仍然在我的遗留项目中使用 GULP（但慢慢地退出它），但这是在最好的公司中完成的，在这个工作流程中工作的开发人员赚了很多钱！

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

网页包

NPM 作为构建工具（没有 Gulp、Grunt 或 Bower）

与 Redux 反应

ESLint

清单很长。去探索吧！

你的问题：

当我想添加一个包（并将依赖项签入 git）时，它属于哪里 - 到 package.json 或 bower.json

现在一切都属于 package.json

构建所需的依赖项位于“devDependencies”中，即 npm install require-dir --save-dev （--save-dev 通过向 devDependencies 添加条目来更新您的 package.json）

您的应用程序在运行时所需的依赖项位于“依赖项”中，即 npm install lodash --save （--save 通过向依赖项添加条目来更新您的 package.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

---