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

本文翻译自：Difference between Grunt, NPM and Bower ( package.json vs bower.json )

I'm new to using npm and bower, building my first app in emberjs :). 我是新手使用npm和bower，在emberjs中构建我的第一个应用程序:)。
I do have a bit of experience with rails, so I'm familiar with the idea of files for listing dependencies (such as bundler Gemfile) 我对rails有一些经验，所以我对列出依赖项的文件的想法很熟悉（例如bundler Gemfile）

Question: when I want to add a package (and check in the dependency into git), where does it belong - into package.json or into bower.json ? 问题：当我想添加一个包（并将依赖项检入git），它属于哪里 - 进入package.json或bower.json ？

From what I gather, 从我收集的，
running bower install will fetch the package and put it in /vendor directory, 运行bower install将获取包并将其放入/vendor目录，
running npm install it will fetch it and put it into /node_modules directory. 运行npm install它将获取它并将其放入/node_modules目录。

This SO answer says bower is for front-end and npm is for backend stuff. 这个SO答案说bower用于前端，npm用于后端。
Ember-app-kit seems to adhere to this distinction from the first glance... But instructions in gruntfile for enabling some functionality give two explicit commands, so I'm totally confused here. Ember-app-kit似乎从第一眼开始就坚持这种区别......但是gruntfile中用于启用某些功能的指令给出了两个显式命令，所以我在这里完全糊涂了。

Intuitively I would guess that 直觉我会猜到

1. npm install --save-dev package-name would be equivalent to adding the package-name to my package.json npm install --save-dev package-name相当于将package-name添加到我的package.json中

2. bower install --save package-name might be the same as adding the package to my bower.json and running bower install ? bower install --save package-name可能与将包添加到我的bower.json并运行bower install相同 ？

If that is the case, when should I ever install packages explicitly like that without adding them to the file that manages dependencies (apart from installing command line tools globally)? 如果是这种情况，我什么时候应该像这样明确地安装软件包而不将它们添加到管理依赖项的文件中（除了全局安装命令行工具）？

---

#1楼

参考：https://stackoom.com/question/1Qwoz/Grunt-NPM和Bower之间的区别-package-json-vs-bower-json

---

#2楼

Npm and Bower are both dependency management tools. Npm和Bower都是依赖管理工具。 But the main difference between both is npm is used for installing Node js modules but bower js is used for managing front end components like html, css, js etc . 但两者之间的主要区别是npm用于安装Node js模块，但是bower js用于管理前端组件，如html，css，js等 。

A fact that makes this more confusing is that npm provides some packages which can be used in front-end development as well, like grunt and jshint . 让这更令人困惑的一个事实是，npm提供了一些可以用于前端开发的软件包，比如grunt和jshint 。

These lines add more meaning 这些行增加了更多含义

Bower, unlike npm, can have multiple files (eg .js, .css, .html, .png, .ttf) which are considered the main file(s). 与npm不同，Bower可以有多个文件（例如.js，.css，.html，.png，.ttf），这些文件被认为是主文件。 Bower semantically considers these main files, when packaged together, a component. Bower在语义上将这些主文件打包在一起时，它们是一个组件。

Edit : Grunt is quite different from Npm and Bower. 编辑 ： Grunt与Npm和Bower完全不同。 Grunt is a javascript task runner tool. Grunt是一个javascript任务运行器工具。 You can do a lot of things using grunt which you had to do manually otherwise. 你可以使用grunt做很多事情，否则你必须手动完成。 Highlighting some of the uses of Grunt: 强调Grunt的一些用法：

1. Zipping some files (eg zipup plugin) 压缩一些文件（例如zipup插件）
2. Linting on js files (jshint) Lins on js files（jshint）
3. Compiling less files (grunt-contrib-less) 编译较少的文件（grunt-contrib-less）

There are grunt plugins for sass compilation, uglifying your javascript, copy files/folders, minifying javascript etc. 有sass编译的grunt插件，uglifying你的javascript，复制文件/文件夹，缩小javascript等。

Please Note that grunt plugin is also an npm package. 请注意，grunt插件也是一个npm包。

Question-1 问题1

When I want to add a package (and check in the dependency into git), where does it belong - into package.json or into bower.json 当我想添加一个包（并将依赖项检入git），它在哪里 - 属于package.json或bower.json

It really depends where does this package belong to. 这真的取决于这个包属于哪里。 If it is a node module(like grunt,request) then it will go in package.json otherwise into bower json. 如果它是一个节点模块（如grunt，request）那么它将在package.json中进入bower json。

Question-2 问题2

When should I ever install packages explicitly like that without adding them to the file that manages dependencies 什么时候我应该像这样明确地安装包而不将它们添加到管理依赖项的文件中

It does not matter whether you are installing packages explicitly or mentioning the dependency in .json file. 无论是显式安装包还是提及.json文件中的依赖项都无关紧要。 Suppose you are in the middle of working on a node project and you need another project, say request , then you have two options: 假设您正在处理节点项目，并且需要另一个项目，比如request ，那么您有两个选择：

• Edit the package.json file and add a dependency on 'request' 编辑package.json文件并在'request'上添加依赖项
• npm install npm安装

OR 要么

• Use commandline: npm install --save request 使用命令行： npm install --save request

--save options adds the dependency to package.json file as well. --save选项也将依赖项添加到package.json文件中。 If you don't specify --save option, it will only download the package but the json file will be unaffected. 如果未指定--save选项，则只会下载程序包，但json文件不受影响。

You can do this either way, there will not be a substantial difference. 你可以这样做，不会有实质性的区别。

---

#3楼

Update for mid 2016 : 2016年中期更新 ：

The things are changing so fast that if it's late 2017 this answer might not be up to date anymore! 事情变化如此之快，如果是2017年末，这个答案可能不再是最新的了！

Beginners can quickly get lost in choice of build tools and workflows, but what's most up to date in 2016 is not using Bower, Grunt or Gulp at all! 初学者可以快速迷失在构建工具和工作流程的选择上，但2016年最新的是不使用Bower，Grunt或Gulp！ With help of Webpack you can do everything directly in NPM! 在Webpack的帮助下，您可以直接在NPM中完成所有工作！

• Google "npm as build tool" result: https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa 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 Webpack： https ：//webpack.github.io/docs/installation.html

Don't get me wrong people use other workflows and I still use GULP in my legacy project(but slowly moving out of it), but this is how it's done in the best companies and developers working in this workflow make a LOT of money! 不要误会我的人使用其他工作流程，我仍然在我的遗留项目中使用GULP（但是慢慢地离开它），但这就是在最好的公司中完成的工作，在这个工作流程中工作的开发人员赚了很多钱！

Look at this template it's a very up-to-date setup consisting of a mixture of the best and the latest technologies: https://github.com/coryhouse/react-slingshot 看看这个模板，这是一个由最新技术和最新技术组合而成的最新设置： https ： //github.com/coryhouse/react-slingshot

• Webpack 的WebPack
• NPM as a build tool (no Gulp, Grunt or Bower) NPM作为构建工具（没有Gulp，Grunt或Bower）
• React with Redux 与Redux反应
• ESLint ESLint
• the list is long. 清单很长。 Go and explore! 去探索！

Your questions: 你的问题：

When I want to add a package (and check in the dependency into git), where does it belong - into package.json or into bower.json 当我想添加一个包（并将依赖项检入git），它在哪里 - 属于package.json或bower.json

• Everything belongs in package.json now 现在一切都属于package.json

• Dependencies required for build are in "devDependencies" ie npm install require-dir --save-dev (--save-dev updates your package.json by adding an entry to devDependencies) 构建所需的依赖关系在“devDependencies”中，即npm install require-dir --save-dev （--save-dev通过向devDependencies添加条目来更新package.json）

• Dependencies required for your application during runtime are in "dependencies" ie npm install lodash --save (--save updates your package.json by adding an entry to dependencies) 运行时期间应用程序所需的依赖关系是“依赖关系”，即npm install lodash --save （-- npm install lodash --save通过向依赖项添加条目来更新package.json）

If that is the case, when should I ever install packages explicitly like that without adding them to the file that manages dependencies (apart from installing command line tools globally)? 如果是这种情况，我什么时候应该像这样明确地安装软件包而不将它们添加到管理依赖项的文件中（除了全局安装命令行工具）？

Always . 永远 。 Just because of comfort. 只是因为舒适。 When you add a flag ( --save-dev or --save ) the file that manages deps (package.json) gets updated automatically. 添加标志（ --save-dev或--save ）时，管理deps（package.json）的文件会自动更新。 Don't waste time by editing dependencies in it manually. 不要通过手动编辑其中的依赖项来浪费时间。 Shortcut for npm install --save-dev package-name is npm i -D package-name and shortcut for npm install --save package-name is npm i -S package-name 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