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

Question

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

627

如果我想添加一个包（并将其依赖项检入git），应该将其放在哪里 - 放到package.json还是放到bower.json中？据我所知，运行bower install会获取该包并将其放在/vendor目录中，而运行npm install则会获取它并将其放入/node_modules目录中。这篇SO答案说bower用于前端，npm用于后端。看起来Ember-app-kit遵循了这个区分......但是在gruntfile中启用某些功能的指令给出了两个明确的命令，所以我完全困惑了。直觉告诉我：

npm install --save-dev package-name相当于将package-name添加到我的package.json中
bower install --save package-name可能相当于将该包添加到我的bower.json中并运行bower install

如果是这样的话，何时才需要使用显式安装包而不将它们添加到管理依赖关系的文件中（除了全局安装命令行工具）？

- apprenticeDev

1

可能是什么是Bower和NPM的区别？的重复问题。 - Sindre Sorhus

14

@SindreSorhus 这不是完全重复的问题。这篇帖子中还有一个相关的问题。顺便问一句，您介意解释一下“downvote”的含义吗？ - Sachin Jain

1

你改变了被接受的答案吗？看起来2014年得到高票数的那个回答和2016年被接受的回答说的有些不同。它也解释了为什么建议采用另一种方法，所以我很满意。只是有点惊讶它被接受了（或重新被接受）。 - user6944170

1

是的，我改变了已接受的答案，因为我认为后面的答案更相关。我想在这个前端丛林里，很多人和我一样感到困惑，所以这个问题的流行度远远超出了我的预期...而且两年后仍在吸引关注。感谢Pawel，现在有更加实时的答案供人们参考（顺便说一句，我目前的工作正在使用webpack）。 - apprenticeDev

2个回答

157

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）
React与Redux
ESLint
列表很长。去探索吧！

你的问题：

当我想添加一个包并将依赖项检入Git时，它应该属于package.json还是bower.json？

现在所有的东西都属于package.json

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

应用程序在运行时所需的依赖项在“dependencies”中，例如：npm install lodash --save（--save通过向dependencies添加条目来更新您的package.json）

如果是这样，那么除了全局安装命令行工具之外，我何时需要显式安装包而不将它们添加到管理依赖项的文件中呢？

始终如此。这只是为了方便起见。当您添加一个标志（--save-dev或--save）时，管理依赖关系的文件（package.json）会自动更新。不要浪费时间手动编辑其中的依赖项。npm install --save-dev package-name的快捷方式是npm i -D package-name，而npm install --save package-name的快捷方式是npm i -S package-name

- Pawel

6

你的回答很主观：

借助 Webpack，你可以直接在 NPM 中完成所有操作！ 这并不正确，一个人甚至不需要将 webpack 加入他的工作流程中。

- Augustin Riedinger

27

这个答案似乎有很多假设。问题是在询问npm和bower之间的区别，但这个答案却不知道为什么提到了webpack。是的，webpack是其中一种实现方式，但这个答案让它看起来好像它是唯一正确的方式。例如，如果有人正在使用Polymer 1.x，则标准工作流程将使用bower，并且对于webpack并没有太多的支持。 - John Powers

1

答案实际上是相关的，但给出的论点并不真正相关：“但这就是做法” - 好吧，不能仅仅因为似乎应该这样做（即他人已经这样做）而去做任何事情。金钱与工作流程的推理无关。 - forsberg

3

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

1

@user643011 当您查看迁移指南时，您会注意到大多数配置保持不变，其余的只是配置结构上的外观变化。我在一个下午内完成了迁移，包括提交了一个PR。 - Pawel

显示剩余5条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sachin Jain · Accepted Answer

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插件）
对js文件进行linting（jshint）
编译less文件（grunt-contrib-less）

有关sass编译、uglify JavaScript、复制文件/文件夹、最小化JavaScript等方面的grunt插件。

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

问题1

当我想添加一个包（并将其依赖项检入git）时，它应该属于package.json还是bower.json

这实际上取决于此包属于哪个类型。如果它是一个node模块（如grunt、request），则放在package.json中；否则放在bower json中。

问题2

何时会像那样明确安装软件包而不将它们添加到管理依赖项的文件中

只有在您需要全局访问某些软件包或特定情况下需要将软件包安装到非默认位置时，才需要显式安装软件包。

无论你是显式地安装包还是在.json文件中提及依赖关系都没有关系。假设你正在进行一个node项目，并且需要另一个项目，比如

request，那么你有两个选择：


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


或者


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


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

你可以以任何一种方式执行此操作，不会有实质性的区别。