摘要: 本文讲的是bower 和 npm 的区别详细介绍, 简单的说,npm是进行后端开发中,使用的模块安装工具,而bower,是前端的模块安装工具。 比如,在安装express,socket.io时,当然使用的是npm,那么比如bootstrap,jquery等前端框架,需要使用bowe

简单的说,npm是进行后端开发中,使用的模块安装工具,而bower,是前端的模块安装工具。
比如,在安装express,socket.io时,当然使用的是npm,那么比如bootstrap,jquery等前端框架,需要使用bower

前端技术和工程实践真的是突飞猛进啊,想当年,我这个半业余前端吭哧吭哧做页面的时候,哪有这么多东西可以用啊,现在先进到我都完全看不懂了。本文主要讲一下同是包管理器的bower和npm的差别。
主要也是在stackoverflow看来的,翻译加一部分自己的理解。

npm 是伴随 Node.js 出现的一个包管理器,最开始只能支持 Node.js 的模块管理,但是后来, npm 官网经过一次改版,打出的口号是,javascript 的包管理器,所以,其已经不在局限于是
Node.js 的模块管理了,已经通用到了所有 js 的包管理工具了,可以说,前后通吃了。

bower 的话,从一开始,就是专门为前端表现设计的包管理器,一切全部为前端考虑的。npm 和 bower 的最大区别,就是 npm 支持嵌套地依赖管理,而 bower只能支持扁平的依赖(嵌套的依赖,由
程序员自己解决)。

嵌套依赖,指的就是,你依赖的软件包,还有它自己的依赖,好像摘葡萄,一摘一大串。在服务器环境的时候,这并没什么关系,因为存储空间够大,一切代码都是本地运行,只要解决完依赖就行了,
但是到了用户产品的浏览器里,就很成问题了,你不能让用户去下载好几M的js代码,那就太糟糕了。在这个情况下,就需要程序员自己手动解决用到的类库的嵌套依赖问题。比如确保各种各样的插件
都依赖同一个版本的jQuery。

为什么有很多项目 bower 和 npm 都用呢,那是因为要用 bower 管理前端的包,而用 npm 去管理一些后端的包和构建工具,例如,yeoman,grunt,gulp,jshint 等等等等。

所有的包管理器,都有自己的弊端,要视需要选用对自己的项目最合适的。

重点来说说NPM和Twitter推出的名为 Bower 的包管理器之间到底有什么样的关系和区别呢?(Bower的官网写到,Bower 是 "A package manager for the web" ,难道说NPM就不是了嘛)。

其实,在实际项目中,NPM和Bower都会被运用进去。并且Bower的安装和升级全都依赖于NPM,使用如下命令就可以全局安装Bower

npm install -g bower
之后你就可以使用

bower install [#]
类似于NPM的方式,对于当前项目进行前端依赖的相关管理。使用起来和NPM一样方便快捷。

其中,与NPM最大的区别在于,NPM主要运用于Node.js项目的内部依赖包管理,安装的模块位于项目根目录下的node_modules文件夹内。而Bower大部分情况下用于前端开发,对于CSS/JS/模板等内容进行依赖管理,依赖的下载目录结构可以自定义。

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索前端 , 程序员 , 模块 , 代码 , 前端开发 用户 bower npm 区别、npm和bower的区别、bower和npm有什么区别、bower和npm区别、npm bower,以便于您获取更多的相关知识。

(原文地址:https://yq.aliyun.com/ziliao/40449)

bower 和 npm 的区别详细介绍的更多相关文章

  1. C++中引用与指针的区别(详细介绍)

    C++中引用与指针的区别(详细介绍) C++中的引用与指针的区别   指向不同类型的指针的区别在于指针类型可以知道编译器解释某个特定地址(指针指向的地址)中的内存内容及大小,而void*指针则只表示一 ...

  2. bower 和 npm 的区别

    前端技术和工程实践真的是突飞猛进啊,想当年,我这个半业余前端吭哧吭哧做页面的时候,哪有这么多东西可以用啊,现在先进到我都完全看不懂了.本文主要讲一下同是包管理器的bower和npm的差别. 主要也是在 ...

  3. nodejs中exports与module.exports的区别详细介绍

    如果模块是一个特定的类型就用Module.exports.如果模块是一个典型的"实例化对象"就用exports. exports.name = function() { conso ...

  4. nodejs 中module.exports 和 exports 区别详细介绍

    你肯定非常熟悉nodejs模块中的exports对象,你可以用它创建你的模块接下来介绍创建过程,感兴趣的朋友可以参考下 你肯定非常熟悉nodejs模块中的exports对象,你可以用它创建你的模块.例 ...

  5. hive内部表与外部表区别详细介绍

    问题导读:1.创建内部表与外部表的区别是什么?2.external关键字的作用是什么?3.外部表与内部表的区别是什么?4.删除表的时候,内部表与外部表有什么区别?5.load data local i ...

  6. mysql中int、bigint、smallint 和 tinyint的区别详细介绍

    1 bytes = 8 bit ,一个字节最多可以代表的数据长度是2的8次方 11111111 在计算机中也就是 -128到127 1.BIT[M] 位字段类型,M表示每个值的位数,范围从1到64,如 ...

  7. php中is_null,empty,isset,unset 的区别详细介绍

    is_null, empty, isset, unset 我们先来看看这4个函数的描述. isset 判断变量是否已存在(配置)unset 把变量删除(释放)掉empty 判断变量是否为空is_nul ...

  8. 在C和C++中struct与typedef struct的区别详细介绍

    c中测试code struct Cmstruct { int c; } Cm; // Cm是一个变量 typedef struct MyStruct //这里的 Mystruct 可以省略 { int ...

  9. VMware网络连接模式—桥接、NAT以及仅主机模式的详细介绍和区别

    在使用VMware Workstation(以下简称:VMware)创建虚拟机的过程中,配置虚拟机的网络连接是非常重要的一环,当我们为虚拟机配置网络连接时,我们可以看到如下图所示的几种网络连接模式:桥 ...

随机推荐

  1. 手推SVM

    推不动了,改日再更!

  2. (转)kafka实战教学

    转载自:https://www.cnblogs.com/hei12138/p/7805475.html Apache kafka 工作原理介绍-----https://www.ibm.com/deve ...

  3. 【转】深入理解Java中的final关键字

    Java 中的final关键字非常重要,它可以应用于类.方法以及变量.这篇文章中我将带你看看什么是final关键字?将变量,方法和类声明为final代表了 什么?使用final的好处是什么?最后也有一 ...

  4. 详解C#泛型(二)

    一.自定义泛型方法(Generic Method),将类型参数用作参数列表或返回值的类型: void MyFunc<T>() //声明具有一个类型参数的泛型方法 { Type generi ...

  5. spring security的简单应用

    本文只包涵spring security配置部分,不是一个完整项目,不过可以任意添加到一个web项目中,不需要对原来的程序做任何修改 部分内容来源于网络,如有雷同,毫无意外 1.xml配置文件 < ...

  6. 页面出现Incorrect string以及数据库内容乱码

    我在制作 (www.helpqy.com) 的时候遇到了页面报错Incorrect string的问题,我使用的是mysql,数据表中有很多中文内容,最后发现在安装mysql的时候需要选择defaul ...

  7. Ubuntu 配置Tomcat环境(转载)

    Ubuntu 配置Tomcat环境   1.下载Tomcat http://tomcat.apache.org/,下载Tomcat 8(由于目前最新eclipse不支持tomcat 9) 将下载的ap ...

  8. [转]Easily Add a Ribbon into a WinForms Application

    本文转自:https://www.codeproject.com/articles/364272/easily-add-a-ribbon-into-a-winforms-application-cs ...

  9. Android.mk 中常用“LOCAL_” 变量

    编写模块的编译文件,实际就是定义一系列以“LOCAL_”开头的编译变量,因此我们有必要弄明白这些变量的具体含义.下面是一些经常使用的LOCAL_编译变量的说明: 变量名 说明 LOCAL_ASSET_ ...

  10. WebForm 【简单控件】【表单元素】

    一.HTML 表单元素复习 (1)文本类 文本框:<input type="text" name="" id="" value=&qu ...