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目录。

This SO answer说bower用于前端，npm用于后端 Ember-app-kit似乎从第一眼开始就坚持这种区别......但是enabling some functionality的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。

这些行添加更多含义

  

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

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

1. 压缩一些文件（例如zipup插件）
2. 使用js文件（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 install

OR

• 使用命令行：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（ - 通过向依赖项添加条目来更新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

Answer 3

下堡

Bower是专门为前端开发创建的，并且已将其优化。它使用平面依赖树，每个包仅需要一个版本，从而减少了页面负载。主要目的是最小化资源负载。

Bower有一个名为bower.json的配置文件。在此文件中，我们可以维护Bower的配置，例如我们需要哪些依赖项以及许可证详细信息，描述，名称等。

Bower适用于诸如jQuery，Angular，React，Ember，Knockout，Bridge等前端软件包。

Npm（节点程序包管理器）

Npm最常用于管理Node.js模块，但它也适用于前端。它使用嵌套的依赖关系树，这意味着您的依赖关系可以具有自己的依赖关系，也可以具有自己的依此类推。嵌套的依赖关系树意味着您的依赖关系可以具有自己的依赖关系，也可以具有自己的依此类推。在服务器上，您不必太在乎空间和延迟，这真的很棒。

这显然在前端不能很好地工作，因为我们在项目中需要jQuery。我们只需要一个jQuery副本，但是当另一个软件包需要jQuery时，它将再次下载jQuery的另一个副本。这是Npm的主要缺点之一。

Npm有一个名为package.json的配置文件。在此文件中，我们可以维护Npm的配置，例如我们需要哪些依赖项以及许可证详细信息，描述，名称等。 Npm提供依赖关系和DevDependencies 。依赖关系将下载并维护前端文件，例如Jquery，Angular等。 DevDependencies将下载并维护开发工具，例如Grunt，Gulp，JSHint等。

许多项目同时使用的原因是，他们将Bower用于前端软件包，将Npm用于开发人员工具，例如Grunt，Gulp，JSHint等。

矮人

Grunt是用于前端开发人员的命令行工具，用于运行预定义的重复任务。而任务是使用配置对象声明式定义的，这些任务由插件处理以使核心软件包保持足够的大小。它用于自动执行JavaScript工作流，例如串联和缩小JS文件，执行测试，刷新浏览器以上传脚本更改等。它的优点之一是，它可以同时执行各种任务（Grunt插件注册表中的6010多个项目），以实现庞大的插件生态系统。它的缺点是，随着配置的增长，它可能会变得复杂，并趋于过时。