Twitter的包管理工具 Bower介绍

raid 前端开发

bower

Bower是什么？

前端开发常会用到主流的框架和库，如：Angular，Bootstrap，Jquery等，项目开发中经常需要我们去官方下载或者更新，更麻烦的是如果有依赖包还需要单独下载。Bower是 Twitter 推出的一款包管理工具，它的出现就是为了解决这些问题。

Bower安装

与其他前端工具一样，Bower运行于Nodejs，通过NPM来管理，安装非常简单：

$ npm install -g bower

Bower命令列表

使用bower help查看所有命令

$ bower help

Usage:
bower <command> [<args>] [<options>]
Commands:
cache Manage bower cache
help Display help information about Bower
home Opens a package homepage into your favorite browser
info Info of a particular package
init Interactively create a bower.json file
install Install a package locally
link Symlink a package folder
list List local packages
lookup Look up a package URL by name
prune Removes local extraneous packages
register Register a package
search Search for a package by name
update Update a local package
uninstall Remove a local package
version Bump a package version
Options:
-f, –force Makes various commands more forceful
-j, –json Output consumable JSON
-l, –log-level What level of logs to report
-o, –offline Do not hit the network
-q, –quiet Only output important information
-s, –silent Do not output anything, besides errors
-V, –verbose Makes output more verbose
–allow-root Allows running commands as root
–version Output Bower version
See ‘bower help <command>’ for more information on a specific command.

  • cache：bower缓存管理
  • help：显示Bower命令的帮助信息
  • home：通过浏览器打开一个包的github发布页
  • info：查看包的信息
  • init：创建bower.json文件
  • install：安装包到项目
  • link：在本地bower库建立一个项目链接
  • list：列出项目已安装的包
  • lookup：根据包名查询包的URL
  • prune：删除项目无关的包
  • register：注册一个包
  • search：搜索包
  • update：更新项目的包
  • uninstall：删除项目的包

Bower使用

1. 安装框架或库到项目

进入项目目录，安装需要用到的框架或者库：

$ bower install bootstrap
$ bower install Angular
# 或者指定版本号
$ bower install Angular#1.2.23
# 或者直接指定 git 库下载安装
$ bower install git://github.com/components/jquery.git
# 或者按照github上的别名
$ bower install components/jquery
# 或者本地库
$ bower install ./repos/jquery

注意：Bower依赖于版本控制工具git，需要从github拉取信息，需要安装git且设置path。

2. 查看项目中已导入的类库

$ bower list

bower check-new Checking for new versions of the project dependencies..
atom-test /data/proj/atom-test
├── angular#1.2.23 extraneous (1.2.24-build.441+sha.5061d2c available, latestis 1.3.0-rc.0)
└─┬ bootstrap#3.2.0 extraneous
└── jquery#2.1.1

用bower提交自己类库

1. 生成bower.json配置文件

$ bower init

[?] name: bower-test
[?] version: 0.0.1
[?] description: bower tools test
[?] main file: bower-test.js
[?] what types of modules does this package expose?
[?] keywords: bower-test
[?] authors: alei
[?] license: MIT
[?] homepage: http://www.u396.com/
[?] set currently installed components as dependencies? No
[?] add commonly ignored files to ignore list? No
[?] would you like to mark this package as private which prevents it from being
[?] would you like to mark this package as private which prevents it from being
accidentally published to the registry? No

{
name: ‘bower-test’,
version: ‘0.0.1’,
authors: [
‘alei’
],
description: ‘bower tools test’,
main: ‘bower-test.js’,
keywords: [
‘bower-test’
],
license: ‘MIT’,
homepage: ‘http://www.u396.com/’
}

[?] Looks good? Yes

2. 在github创建资源库 bower-test

3. 将本地项目提交至github

$ git init
$ git add .
$ git commit -m &quot;init&quot;
$ git remote add origin https://github.com/alei817927/bower-test
$ git push -u origin master

4. 注册到bower官方类库

$ bower register nodejs-bower git@github.com:alei817927/bower-test.git

5. 查询自己的包

$ bower search bower-test

结束语

本文只是列举了主要的使用方式，Bower 简单易用，项目开发准备阶段，可以轻松帮助我们解决繁琐的包管理问题，相信你已经迫不及待的想尝试了吧！

发表评论