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

Question

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

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

从我收集的，
运行bower install将获取包并将其放入/vendor目录，
运行npm install它将获取它并将其放入/node_modules目录。

这个SO答案说bower用于前端，npm用于后端。
Ember-app-kit似乎从第一眼开始就坚持这种区别......但是gruntfile中用于启用某些功能的指令给出了两个显式命令，所以我在这里完全糊涂了。

直觉我会猜到

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

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

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

Answer 1

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的一些用法：

1. 压缩一些文件（例如zipup插件）
2. Lins on js files（jshint）
3. 编译较少的文件（grunt-contrib-less）

有sass编译的grunt插件，uglifying你的javascript，复制文件/文件夹，缩小javascript等。

请注意，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文件不受影响。

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

Answer 2

2016年中期更新 ：

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

初学者可以快速迷失在构建工具和工作流程的选择上，但2016年最新的是不使用Bower，Grunt或Gulp！ 在Webpack的帮助下，您可以直接在NPM中完成所有工作！

• Google“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），它在哪里 - 属于package.json或bower.json

• 现在一切都属于package.json

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

• 运行时期间应用程序所需的依赖关系是“依赖关系”，即npm install lodash --save （-- npm install lodash --save通过向依赖项添加条目来更新package.json）

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

永远 。 只是因为舒适。 添加标志（ --save-dev或--save ）时，管理deps（package.json）的文件会自动更新。 不要通过手动编辑其中的依赖项来浪费时间。 npm install --save-dev package-name快捷方式npm install --save-dev package-name是npm i -D package-name和npm install --save package-name快捷方式npm install --save package-name是npm i -S package-name