前端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