为了账号安全,请及时绑定邮箱和手机立即绑定

npm和bower的区别

标签:
Html/CSS

标签(空格分隔): npm和bower的区别 前端包管理器


前端富应用时代,写代码,基本不会从底层自己开始造轮子了,尽管你想锻造自己的技艺,但是丢过来的项目周期不允许你肆无忌惮的慢悠悠的潜心雕琢。所以我们怎么办,前端开发助力军为了互相解放,为了千千万万的基层程序员也能过上正常下班的生活,有些自己贡献的代码库,汇总到一个地方---叫“npm”;说白了,就是托管我们第三方的服务器,上面提供一系列的下载,版本管理的功能服务。

区别

npm的依赖管理是倒向树结构(不同于linux越底层依赖越小),层层递归。一个普通的前端包的依赖树非常冗长,甚至可能触及windows下256字符的路径长度限制。同时和其它安装包不能共享依赖代码。导致文件非常多,不适合前端代码部署。而bower让模块开发者定义了简洁的输出文件。不过下一代 npm3 会从根本上改善这一问题,所有依赖包会水平处理共享。随着CommonJS普及,前后端今后统一使用npm是大势所趋。

二者功能上是一样的,
两个都是包管理器,bower偏重于前端一些。例如在html文件中直接引入第三方的依赖,我们侧重使用bower-components里的资源。

为什么用它们

1.节省时间。

没用Bower之前,每次需要安装jQuery的时候,都需要去jQuery网站下载包或使用CDN版本。但用了Bower,你只需要输入一个命令,jquery就会安装在本地计算机上,你不需要去记版本号之类的东西,你也可以通过Bower的info命令去查看任意库的信息。

2.脱机工作。

Bower会在用户主目录下创建一个.bower的文件夹,这个文件夹会下载所有的资源、并安装一个软件包使它们可以离线使用。如果你熟悉Java,Bower即是一个类似于现在流行的Maven构建系统的.m2仓库。每次你下载任何资源库都将被安装在两个文件夹中 —— 一个在的应用程序文件夹,另一个在用户主目录下的.bower文件夹。因此,下一次你需要这个仓库时,就会用那个用户主目录下.bower中的版本。

3.可以很容易地展现客户端的依赖关系。

你可以创建一个名为bower.json的文件,在这个文件里你可以指定所有客户端的依赖关系,任何时候你需要弄清楚你正在使用哪些库,你可以参考这个文件。

4.让升级变得简单。

假设某个库的新版本发布了一个重要的安全修补程序,为了安装新版本,你只需要运行一个命令,bower会自动更新所有有关新版本的依赖关系。

众所周知,npm(Node Package Manager)是nodejs时代不可或缺的最好的包管理器,现在已经随nodejs官方包同时会安装到你的设备上去。只要给项目书写好package.json放于项目根目录,在重新部署之时只需要执行 npm install一行简单的命令,所有相关的依赖就能够自动安装到项目目录下面,并且还能很方便的对不同项目的不同依赖包版本进行良好、统一的管理。

Bower

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设计之初就采用了的是嵌套的依赖关系树,这种方式显然对前端不友好;而Bower则采用扁平的依赖关系管理方式,使用上更符合前端开发的使用习惯。

不过,现在越来越多出名的js依赖包可以跨前后端共同使用,所以Bower和NPM上面有不少可以通用的内容。实际项目中,我们可以采用NPM作用于后端;Bower作用于前端的组合使用模式。让前后端公用开发语言的同时,不同端的开发工程师能够更好地利用手上的工具提升开发效率。

小结、

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



作者:麦壳儿UIandFE2
链接:https://www.jianshu.com/p/e422c28e2471


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消