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

Difference between Grunt, NPM and Bower ( package.json vs bower.json )

我刚开始使用NPM和Bower,在EmberJS中构建我的第一个应用程序。我对Rails有一定的经验,所以我很熟悉列出依赖项的文件(如Bundler-GemFile)的概念。

问题:当我想添加一个包(并将依赖项签入Git)时,它属于哪一个——package.jsonbower.json中?

根据我收集的资料,运行bower install会取包放在/vendor目录中,运行npm install时,会取出来放入/node_modules目录。

这个答案说鲍尔是前端的,NPM是后端的。灰烬应用工具包似乎坚持这一区别从第一眼看…但是gruntfile中用于启用某些功能的指令给出了两个明确的命令,所以这里我完全搞不清。

凭直觉我猜

  • npm install--save dev包名相当于将包名添加到my package.json中。

  • bower install——保存包名称可能与将包添加到bower.json并运行bower install相同?

  • 如果是这样的话,我什么时候应该显式地安装这样的包而不将它们添加到管理依赖项的文件中(除了全局安装命令行工具之外)?


    NPM和Bower都是依赖性管理工具。但两者的主要区别在于NPM用于安装节点JS模块,而BowerJS用于管理前端组件,如HTML、CSS、JS等。

    更让人困惑的是,NPM提供了一些可用于前端开发的包,如gruntjshint

    这些线条增加了更多的意义

    Bower, unlike npm, can have multiple files (e.g. .js, .css, .html, .png, .ttf) which are considered the main file(s). Bower semantically considers these main files, when packaged together, a component.

    编辑:咕噜声和NPM和鲍尔有很大不同。grunt是一个javascript任务运行工具。你可以用咕噜声做很多事情,否则你必须手动做。强调咕噜的一些用法:

  • 压缩某些文件(例如压缩插件)
  • JS文件上的linting(JShint)
  • 编译更少的文件(无需控制)
  • 有一些用于SASS编译的Grunt插件,比如修改JavaScript、复制文件/文件夹、缩小JavaScript等。

    请注意,grunt插件也是一个NPM包。

    问题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

    这真的取决于这个包裹属于哪里。如果它是一个节点模块(如grunt、request),那么它将进入package.json,否则进入bower json。

    问题2

    When should I ever install packages explicitly like that without adding them to the file that manages dependencies

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

    • 编辑package.json文件并添加对"request"的依赖项
    • NPM安装

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

    --save选项也将依赖项添加到package.json文件中。如果不指定--save选项,它将只下载包,但JSON文件将不受影响。

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


    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-b401076f488b0.c33e74tsa

    • 网络包:https://webpack.github.io/docs/installation.html

    别误会我,人们使用其他工作流,而我仍然在我的遗留项目中使用Gulp(但慢慢退出),但这是在最好的公司中完成的,在这个工作流中工作的开发人员赚了很多钱!

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

    • WebPACK
    • NPM作为构建工具(无咕噜声、咕噜声或凉亭)
    • 与Redux反应
    • 埃斯林特
    • 名单很长。去探险吧!

    你的问题:

    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

    • 现在一切都属于package.json

    • 构建所需的依赖项位于"dev dependencies"中,即npm install require-dir --save-dev(--save dev通过向devdependencies添加条目来更新package.json)

    • 运行时应用程序所需的依赖项位于"依赖项"中,即npm install lodash --save(--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)?

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


    凉亭

    Bower是专为前端开发而创建的,并基于这一点进行了优化。它使用平面依赖树,每个包只需要一个版本,从而减少了页面负载。它主要是为了最小化资源负载。

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

    Bower适用于jquery、Angular、React、Ember、Knockout、主干等前端包。

    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个项目),以实现插件的庞大生态系统。它的缺点是,随着配置的增长,它可能变得复杂,并趋于过时。