/

Bower,瀏覽器套件管理工具

Bower,瀏覽器套件管理工具

Bower 定義自己為一個瀏覽器套件管理工具,它是一個強大的工具,用於管理項目資源:JavaScript、CSS 和圖片。

警告:本文章可能已經過時,並且可能不反映最新的技術狀態

Bower 定義自己為一個瀏覽器套件管理工具,它是一個強大的工具,用於管理項目資源:JavaScript、CSS 和圖片。在這裡,我只會講解 JavaScript,因為這是我主要使用的場景。

讓我們開始,第一步安裝 Bower。

npm install bower -g

現在,在你的項目根目錄(也就是你將要執行 bower 的地方)或者你的主目錄中,創建一個名為 .bowerrc 的檔案,並進行一些自定義。例如在這裡,我們告訴 Bower 將套件安裝在子目錄 javascript/components 中,並使用名為 ‘bower.json’ 的檔案來儲存它的資料。

1
2
3
4
{
"directory" : "javascript/components",
"json" : "bower.json"
}

bower.json 檔案與 npmNode.js 中的 package.json 檔案是一樣的,只不過它是用於資源的。

讓我們從一些常用的東西開始,例如 jQuery,將它添加到你的項目中。

你可以透過以下命令來安裝它:

bower install --save jquery

然後在你的 HTML 代碼中引用這個新安裝的套件:

<script src="javascript/components/jquery/jquery.js"></script>

–save 選項告訴 Bower 將這個項目添加到 bower.json 檔案中,這樣以後重建相同的套件結構就變得容易,就像使用 NPM 在 Node.js 中一樣。

一旦這個套件被安裝,要升級到新版的 jQuery 就非常容易:

bower update jquery

Bower 專案在他們的伺服器上維護了一個流行套件的清單,所以你可以輕鬆安裝它們。這裡你可以找到一個清單,按照流行程度排序。

當然,還有成千上萬的專案未包含在內,你可以使用 git:// 協議來安裝每個使用 git 的軟體,例如:

bower install git://github.com/desandro/masonry

或者使用任何路徑:

bower install http://foo.com/jquery.awesome-plugin.js

Bower 足夠智能,可以安裝對於你感興趣的套件的特定標籤或提交,如果你需要一個舊版本來保持兼容性,或者你不需要升級到新版的套件:

bower install git://github.com/components/jquery.git#~1.8.1

刪除安裝的套件也很簡單:

bower uninstall jquery

我真的很喜歡使用 Bower,特別是當需要不時升級依賴項時,我不再需要在多個 Github 專案之間彷徨(如果我們幸運地有一個 Github 頁面),只需要運行一個簡單的 bower update 就可以搞定一切,不過前提是要確保一切在你的項目中仍然正常運作。這是我們的工作 :-)