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