Bower 管理網站套件的好工具

Update: bower 在 0.9.0 版以前可以使用 component.json,但是為了避免跟其他工具命名衝突,故 0.9.0 以後版本請改為 bower.json bowerTwitter 團隊開發的一套網頁工具,用來管理或安裝 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 即可。
  • Pingback: YSHPace – Bower套件管理工具()

  • ria

    您好,這篇中文介紹帶入門好讚
    我想問一個問題
    這種工具主要是安裝在伺服器環境下去應用的嗎?

  • appleboy48

    Hi, 這工具用來整合前端 Tool,不管是 deploy 專案,或者是初始化專案都是需要的,不一定是伺服器阿,個人的開發環境也是需要的。

  • ria

    謝謝你的回答!!

  • jaceju

    補充:新版 Bower 為了避免衝突,設定檔已經改用 bower.json ,安裝目錄預設為 bower_component 。

  • appleboy48

    感謝鐵兄提醒,我已經將內文修正,並且在文章最前面加上補充,在 0.9.0 版本以後請改用 bower.json,當然如果是透過 bower 工具來初始化專案,就可忽略。

  • Knovour

    你好,第一次嘗試使用 bower 管理前端,我想問幾個問題:
    bower 能不能讓他不要安裝其他相依性的套件,很多東西像 jquery、bootstrap 之類的都可以透過 cdn 載入,但如果有其他套件需要這些就會一併安裝。

    另外,有沒有讓他只下載需要的 css 跟 js 就好的方法?謝謝。

  • appleboy48

    Hi, 相依性套件他會下載,但是要不要用就取決於開發者阿,你是不想讓 vendor 的 folder 這麼肥嗎?還是有其他想法?通常 Bower 就整個 Project 都會下載,無法單純只下載 css 及 js。

  • appleboy48

    或者是你可以定義 “ignore“ 來避免下載多餘的檔案像是 .jshintrc 或 *.txt

  • Knovour

    謝謝您的回答。

    其實是平常自己載入時都只是下載需要的 js 跟 css 檔,第一次用 bower 感覺前端的東西變這麼多很不習慣,而且有些 bower 上的專案裡,需要的檔案的路徑還放在好幾層資料夾裡面,載入的路徑變長看著挺不舒服