前端bower使用

Bower是一个客户端技术的软件包管理器，是由twitter推出的。它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具，如YeoMan和Grunt.

 

安装bower

使用npm，打开终端，输入：

npm install -g bower

其中-g命令表示全局安装

全局安装Bower后，可以查看Bower的帮助信息，使用命令：
> bower help

用法:

    bower <command> [<args>] [<options>]

命令Commands:

    cache-clean    清除Bower的缓存，或清除指定包的缓存
    completion      Bower的Tab键自动完成
    help                  显示Bower命令的辅助信息
    info                   指定包的版本信息和描述
    init                     交互式的创建bower.json文件
    install               安装一个本地的包
    link                    包目录的符号连接
    list, ls               列出所有已安装的包
    lookup              根据包名查询包的URL
    register            注册一个包
    search              根据包名搜索一个包
    uninstall           删除一个包
    update              更新一个包

bower install jquery-ui#1.10.1

上面的命令指定安装jquery-ui的1.10.1版。

如果某个库依赖另一个库，安装时默认将所依赖的库一起安装。比如，jquery-ui依赖jquery，安装时会连jquery一起安装。

安装后的库默认存放在项目的bower_components子目录，如果要指定其他位置，可在.bowerrc文件的directory属性设置。

{
  "directory" : "public/components"
}

bower install jquery --save

然后bower就会从远程下载jquery最新版本到你的js/lib目录下
其中--save参数是保存配置到你的bower.json.

维护依赖

使用 bower install package --save 能够将包安装到你的项目中，同时将依赖关系写入到bower.json 的 dependencies 数组。

1 2	# install package and add it to bower.json dependencies $ bower install <package> --save

同理，使用 bower install package --save-dev 可以将包写入到 bower.json 的 devDependencies数组。

1 2	# install package and add it to bower.json devDependencies $ bower install <package> --save-dev

 

bower初始化

命令行进入项目目录中，输入命令如下：

bower init

会提示你输入一些基本信息，根据提示按回车或者空格即可，然后会生成一个bower.json文件，用来保存该项目的配置，如下：

{
  "name": "bb_boot",
  "version": "0.0.1",
  "authors": [
    "savokiss <jaynaruto@qq.com>"
  ],
  "moduleType": [
    "amd"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "js/lib",
    "test",
    "tests"
  ],
  "dependencies": {
  }
}

bower.json 的规范中的选项，主要包括：

• name 包名，必选。
• version 有意义的版本号。
• main 字符串或者数组，指定主要会用到包里面哪些文件。
• ignore 数组，一系列文件名或者目录，告诉bower在安装包的时候忽略指定的内容。
• keywords 字符串数组，推荐添加，主要是帮助用户能够搜索到你的包。
• dependencies 哈希结构，依赖的包，可以指定版本号，版本号范围参考。
• devDependencies 哈希结构，生产环境下依赖的包，版本号范围参考。
• private 布尔值，设置为true代表你想保持私有，并且将来不会发布它。

  

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<name>": "<version>",
    "<name>": "<folder>",
    "<name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

 

 

包的信息

比如我们想要查找jquery都有哪些个版本，输入如下命令：

bower info jquery

会看到jquery的bower.json的信息，和可用的版本信息

可以看到jquery最新的兼容版版本为1.11.3

包的更新

上面安装的是最新版的高版本jquery，假如想要兼容低版本浏览器的呢？
已经查到兼容低版本浏览器的jquery版本为1.11.3，下面直接修改bower.json文件中的jquery版本号如下：

  "dependencies": {
    "jquery": "~1.11.3"
  }

然后执行如下命令：

bower update

bower就会为你切换jquery的版本了

包的查找

还有一个很重要的功能，就是包的查找，比如我想要安装bootstrap的某个插件，但是记不住名字了，就可以直接在命令行输入：

bower search bootstrap

bower就会列出包含字符串bootstrap的可用包了

包的卸载

卸载包可以使用uninstall 命令：

bower uninstall jquery

---

 

 

bower install bootstrap

bower会自动从github上down最新的代码，而且，会自动将依赖包jquery也下载进来。

 

 

指定版本：

bower install jquery#1.7.2

bower install bootstrap#3.3.5 --save

 

多版本共存：

同时安装一个package的不同版本（多版本共存）, 比如安装jquery v1.7.0，并且安装v1.9.1以及最新版本的jquery（目前是2.1.1）， 像下面这样安装完成后，你的bower_components目录下就会同时存在jquery-older目录(1.7.0)， jquery-old目录（1.9.1）, jquery目录（最新版）。

# 安装jquery v1.7.0
bower install jquery-older=juqery#1.7.0 [<options>]

# 安装jquery v1.9.0
bower install jquery-old=juqery#1.9.1 [<options>]
  
# 安装最新版jquery
bower install jquery [<options>]

 

参考：

https://segmentfault.com/a/1190000000349555