Update: bower 在 0.9.0 版以前可以使用 component.json,但是為了避免跟其他工具命名衝突,故 0.9.0 以後版本請改為 bower.json bower 是 Twitter 團隊開發的一套網頁工具,用來管理或安裝 Web 開發所需要的 Package,像是 CSS 和 JavaScript,也可以依據套件的相依性來安裝,簡單來說,開發者不用再去煩惱套件相依性問題,以及時間久了想更新最新版本,還要到各 Package 網站來下載,這些步驟都省了,一個指令就可以全部做完上述的步驟。
安裝 Bower 管理套件 透過
Node.js 的 npm 工具來安裝
$ npm install bower -g
使用方式 可以透過 bower –help 來查看如何使用,底下來一一介紹,假設要安裝 jQuery 套件,請執行底下指令
$ bower install bootstrap spine jquery接著該如何查詢已經安裝的套件:
$ bower list執行上述指令,會列出專案安裝的套件名稱及版號
/home/www ├── backbone-amd#0.9.9 ├── handlebars#1.0.0-rc.1 ├── jquery#1.8.3 ├── requirejs#2.1.2 └── underscore-amd#1.4.3移除已安裝的套件:
$ bower uninstall jquery升級已安裝套件:
$ bower update jquery搜尋套件:
$ bower search jquery
Bower 設定檔 bower 預設安裝的目錄是 components 所以一般 bower install 後,你會看到專案目錄底下會多個 components/xxxx,要改變路徑其實很簡單,你可以在自己家目錄新增
~/bowerrc 檔案,或者是在專案裡面增加 .bowerrc 設定檔,檔案內容如下
{ "directory" : "assets/javascript/vendor" }這樣就可以將套件安裝在
assets/javascript/vendor 目錄
Bower 套件相依性 在專案目錄底下新增
component.json bower.json 檔案,裡面寫入 (或者可透過 bower init 來初始化專案)
{ "name": "xxxxx", "version": "1.0.0", "dependencies": { "jquery": "1.8.3", "backbone-amd": null, "underscore-amd": null, "requirejs": null } }完成存檔後,請在專案目錄底下執行 bower install,會發現所有套件都會被安裝到
assets/javascript/vendor 目錄,版號的定義請按照 semver 標準。 上述 bower 安裝的套件,如果搭配 git 控制的話,就不要將上述安裝的原始擋加入版本控制,可以新增 assets/javascript/vendor 目錄,並且在該目錄丟入 .gitignore,接著在將 assets/javascript/vendor 寫入 .gitignore 即可。