Skip to content

Bower #19

@CoolRabbit520

Description

@CoolRabbit520

概述

Bower是针对浏览器端的包管理工具。

Bower的官网写到:
"A package manager for the web."
Bower 官网对 Bower 的介绍是:
"Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you."

基本操作

Bower基于node.js,所以安装之前,必须先确保已安装node.js。
$ sudo npm install bower --global

bower的操作方式和npm非常相似:

  • 项目初始化:在项目的根目录下运行$ bower init;回答问题之后自动生成bower.json文件,这是项目的配置文件。(在npm中,在项目的根目录下运行$ npm init;回答问题之后自动生成package.json文件)
  • 安装(配置文件中的)库:$ bower install
  • 可以直接对某个库进行操作:
    • 可以直接安装某个库:$ bower install <PackageName>
    • 搜索某个库:$ bower search <PackageName>
    • 更新某个库:$ bower update <PackageName>
    • 卸载某个库:$ bower uninstall <PackageName>
  • 生成Bower项目设置的配置文件—— .bowerrc文件。

bower.json文件:


.bowerrc文件:

.bowerrc文件

bower和npm的区别

  1. npm 的概念和范畴比 Bower 大很多。Bower 能管理的,都在 npm 的范畴内。具体是否使用 Bower,看个人使用习惯。
    npm和bower在功能上有一定的重合,但不是互斥关系,可以在项目中同时运用。
    一般业内对两者的使用方式偏向这样:用 npm 来管理开发用的插件依赖,例如项目中需要用 Gulp,用 Bower 来管理项目上线时需要用的“资源库”依赖或者工具函数库,例如 Bootstrap 和 Semantic-UI、jQuery 等这些 CSS 库以及 Lodash 这些函数库。

  2. npm采用了的是嵌套的依赖关系树。一个普通的前端包的依赖树比较长,npm 会将开发环境一起下载下来, 同时和其它安装包不能共享依赖代码。导致文件非常多,这种方式显然对前端不友好,不适合前端代码部署。
    bower则采用扁平的依赖关系管理方式(嵌套的依赖,由程序员自己解决),bower 只会下载编译后的前度模块,使用上更符合前端开发的使用习惯。

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

不过下一代 npm3 会从根本上改善这一问题,所有依赖包会水平处理共享。随着CommonJS普及,前后端今后统一使用npm是大势所趋。

深入理解

bower其特点是对包结构没有强制规范,也因此bower本身并不提供一套构建工具,它充当的基本上是一个静态资源的共享平台。bower本身不存储模块文件本身(NPM以及SPM则会将模块作者的文件打包保存在自己的服务器中),也不保存模块的版本信息。模块的发布者通过注册(register)的方式,将模块的可访问的公开的git地址记录在bower的数据库中。而所有的版本都是通过模块发布者自己控制代码库的tag来决定。
之所以bower能这么流行,得益于它宽松的规范能很好地直接应用在很多已经存在的项目中,所有人都能通过简单地添加一个bower.json以及补充相关信息,不需要修改代码和目录结构,就马上开始使用注册发布自己的模块。

参考资料

1.npm 和 bower的区别 - 孤舟蓑翁 - 博客园
2. node.js - 求告知,npm和bower的区别 - SegmentFault
3. npm和bower的区别比较 | Frank Fan's Blog
4. Bower:客户端库管理工具 -- JavaScript 标准参考教程(alpha)
5. npm、bower、jamjs 等包管理器,哪个比较好用? - 知乎

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions