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

Posted 2023-02-19

【中文标题】Grunt、NPM 和 Bower 之间的区别（ package.json 与 bower.json ）

【英文标题】：Difference between Grunt, NPM and Bower ( package.json vs bower.json )

【发布时间】：2014-02-07 13:19:51

【问题描述】：

我是使用 npm 和 bower 的新手，我在 emberjs 中构建了我的第一个应用程序 :)。 我确实对rails有点经验，所以我熟悉列出依赖项的文件的想法（例如bundler Gemfile）

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

据我所知， 运行bower install 将获取包并将其放入/vendor 目录中， 运行npm install 它将获取它并将其放入/node_modules 目录。

This SO answer 说 bower 用于前端，npm 用于后端。Ember-app-kit 乍一看似乎坚持这种区别...但是在 gruntfile 中为 enabling some functionality 提供了两个明确的说明命令，所以我在这里完全感到困惑。

直觉上我会猜到

npm install --save-dev package-name 相当于将包名添加到我的 package.json 中

bower install --save package-name 可能与将包添加到我的 bower.json 并运行 bower install 相同强>?

如果是这种情况，我什么时候应该像这样显式安装软件包而不将它们添加到管理依赖项的文件中（除了全局安装命令行工具）？

【问题讨论】：

Difference between Bower and NPM? 的可能副本

@SindreSorhus 这不是完全重复的。这篇文章中还有一个相关的问题。顺便说一句，你介意解释一下投票吗？

您是否更改了已接受的答案？似乎 2014 年获得高度评价的内容与 2016 年被接受的内容完全不同。它也解释了为什么它提出了另一种方法，所以我对此很满意。只是有点惊讶它被接受（或重新接受）。

是的，我改变了接受的答案，因为我觉得后一个更相关。我想在这个前端丛林中，很多人都和我一样困惑，所以这个问题的受欢迎程度超出了我的预期......并且在 2 年后仍然得到了关注。多亏了 Pawel，人们现在有了一个更新的答案供人们参考（我现在的工作中使用的是 webpack）。

【参考方案1】：

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

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

这些行增加了更多意义

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

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

压缩一些文件（例如 zipup 插件） 对 js 文件进行 linting (jshint) 编译更少的文件 (grunt-contrib-less)

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

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

问题 1

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

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

问题 2

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

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

编辑 package.json 文件并添加对 'request' 的依赖项 npm 安装

或

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

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

这两种方法都可以，不会有太大的区别。

【讨论】：

感谢您的澄清和文章！有见地，并澄清了差异（这应该有助于决定将依赖项放在哪里）。我会等待也许有人会插话最后一个问题（回复：我什么时候想单独安装软件包），稍后接受你的回答:)

关于 npm，它可能是 NodeJS 模块的包管理器，但我们忽略了它不仅限于 NodeJS。 npm 同样有效地管理客户端依赖项。例如：dontkry.com/posts/code/using-npm-on-the-client-side.html

什么是 bower 可以做而 npm 不能做的？

请注意，jQuery 插件库 (plugins.jquery.com) 已替换为 npm。

最新的快速入门 Angular 2 (RC) 教程和 git 种子仅使用 npm，与同时使用 npm 和 bower 的 v1 教程相反。我真的非常喜欢以下事实：（a）package.json 是唯一需要维护的东西，（b）它在单行 npm install 中递归地计算依赖关系，以及（c）当有问题时你只需要删除node_modules 文件夹并再次运行 npm install。

【参考方案2】：

2016 年年中更新：

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

初学者很快就会迷失在构建工具和工作流程的选择上，但 2016 年的最新情况是根本不使用 Bower、Grunt 或 Gulp！借助 Webpack，您可以直接在 NPM 中完成所有操作！

谷歌“npm 作为构建工具”结果： 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

网页包 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

【讨论】：

你的回答很自以为是：> With help of Webpack you can do everything directly in NPM!这不是真的，他的工作流程甚至不需要 webpack

这个答案似乎做了很多假设。问题是询问 npm 和 bower 之间的区别，这个答案出于某种原因提到了 webpack。是的，webpack 是一种方法，但这个答案使它看起来像是唯一且正确的方法。例如，如果有人在使用 Polymer 1.x，标准工作流程将使用 bower，而对 webpack 的支持并不多。

答案实际上是相关的，但给出的论点并不真正：“但这就是它的完成方式” - 好吧，什么都不应该仅仅因为它看起来应该完成（即由其他人完成） ）。金钱与工作流程的推理无关。

在 2017 年查看此答案。转到文档：“webpack v1 已弃用。我们鼓励所有开发人员升级到 webpack 2。请遵循我们的迁移指南或参阅 webpack 2 文档以获取更多信息。”哈哈，经典的 Web 开发。

@user643011 当您查看迁移指南时，您会注意到大部分配置保持不变，其余的只是配置结构的外观更改。我在一个下午完成了迁移，包括一个 PR