Grunt,NPM和Bower之间的区别(package.json vs bower.json)

app*_*Dev 605 javascript gruntjs bower

我是新手使用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相同

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

sac*_*024 576

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

  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

--saveoptions还将依赖项添加到package.json文件中.如果您没有指定--save选项,它将只下载包但json文件将不受影响.

你可以这样做,不会有实质性的区别.

  • 恩贝尔不能做什么呢? (14认同)
  • 感谢您的澄清,以及文章!富有洞察力,并澄清差异(这应该有助于决定在何处放置依赖关系).我会等待,如果有人会在最后一个问题上插话(重新:我什么时候想要单独安装软件包),并在以后接受你的答案:) (3认同)
  • 最新的快速入门角度2(RC)教程和git种子仅使用`npm`,而不是使用npm和bower的v1教程.我真的非常喜欢这样的事实:(a)`package.json`是唯一要维护的东西,(b)它在一个单独的'npm install`中递归地计算依赖关系,以及(c)当你出现问题时需要删除`node_modules`文件夹并再次运行npm install. (2认同)

Paw*_*wel 154

2016年中期更新:

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

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

不要误会我的人使用其他工作流程,我仍然在我的遗留项目中使用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(--save通过向依赖项添加条目来更新package.json)

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

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

  • 这个答案似乎做了很多假设.问题是询问npm和bower之间的区别,这个答案是出于某种原因提到了webpack.是的,webpack是一种方法,但这个答案让它看起来似乎是唯一正确的方法.例如,如果某人正在使用Polymer 1.x,标准工作流程将使用bower,并且对webpack的支持不多. (25认同)
  • 你的答案非常自以为是:>在Webpack的帮助下,你可以直接在NPM中完成所有工作!`这不是真的,在他的工作流程中甚至不需要webpack (5认同)
  • 在2017年查看这个答案.转到文档:"webpack v1已被弃用.我们鼓励所有开发人员升级到webpack 2.请按照我们的迁移指南或参考webpack 2文档获取更多信息." 哈哈经典的网页开发. (3认同)