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

javascript bower gruntjs

2022-08-29 22:40:40

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

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

从我收集到的信息来看，
运行将获取包并将其放在目录中，
运行它将获取它并将其放入目录中。bower install/vendornpm install/node_modules

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

凭直觉，我会猜到

npm install --save-dev package-name 将等效于将 package-name 添加到 my package.json
bower install --save package-name 可能与将软件包添加到我的 bower.json 并运行 bower install 相同？

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

答案 1

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

使这更加令人困惑的一个事实是，npm提供了一些也可以在前端开发中使用的包，例如和。gruntjshint

这些行增加了更多的意义

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

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

压缩某些文件（例如压缩插件）
Linting on js files （jshint）
编译更少的文件（grunt-contrib-less）

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

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

问题-1

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

这实际上取决于此包属于何处。如果它是一个节点模块（如grunt，request），那么它将进入package.json，否则进入bower json。

问题-2

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

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

编辑 package.json 文件并添加对“请求”的依赖关系
npm 安装

或

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

--save选项还会将依赖项添加到 package.json 文件中。如果未指定 option，它将仅下载包，但 json 文件将不受影响。--save

无论哪种方式，您都可以这样做，不会有实质性的区别。

答案 2

2016 年年中更新：

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

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

谷歌“npm作为构建工具”结果：https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa
网页包： https://webpack.github.io/docs/installation.html

不要误会我的意思，人们使用其他工作流程，我仍然在我的遗留项目中使用GULP（但慢慢地退出它），但这就是最好的公司和开发人员在这个工作流程中工作的方式，赚了很多钱！

看看这个模板，它是一个非常最新的设置，由最好和最新的技术混合而成：https://github.com/coryhouse/react-slingshot

网络包
NPM作为构建工具（没有Gulp，Grunt或Bower）
React with Redux
ESLint
列表很长。去探索吧！

您的问题：

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

现在一切都属于 package.json
构建所需的依赖项位于“devDependencies”中，即（--save-dev 通过向 devDependencies 添加一个条目来更新你的 package.json）npm install require-dir --save-dev
应用程序在运行时所需的依赖项位于“依赖项”中，即（--通过向依赖项添加条目来保存更新 package.json）npm install lodash --save

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

始终如一。只是因为舒适。当您添加标志（或）时，管理 deps 的文件（package.json）将自动更新。不要浪费时间手动编辑其中的依赖项。的快捷方式是和快捷方式是--save-dev--savenpm install --save-dev package-namenpm i -D package-namenpm install --save package-namenpm i -S package-name