Bower,瀏覽器程序包管理器

Bower定義自己為瀏覽器包管理器,它是管理項目資產(JavaScript,CSS和圖像)的強大工具。

警告:此帖子已過時,可能無法反映當前的最新狀態

涼亭將自己定義為瀏覽器包管理器,並且它是管理項目資產的強大工具:JavaScript,CSS和圖像。在這裡,我僅討論JavaScript,因為這是我的主要用例。

讓我們開始安裝它。

npm install bower -g

現在,在項目根目錄(將在其中調用Bower的目錄)或主文件夾中創建一個.bowerrc文件,並添加一些自定義設置:例如,在這裡,我們告訴Bower在子文件夾javascript / components中安裝軟件包,並使用名為'bower.json'來存儲其數據。

{
  "directory" : "javascript/components",
  "json" : "bower.json"
}

The bower.json file is the same thing as the package.json file for npm packages in Node.js, except it’s for assets.

Let’s start by adding to your project something popular: jQuery.

You can install it by typing

bower install --save jquery

And by referencing the newly installed package in your HTML code:

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

The –save option tells bower to add the entry to the bower.json file, so it will be easy to recreate the same packages structure later, just like with NPM in Node.js.

Once this package is installed, it’s super easy to jump to a newer jQuery release:

bower update jquery

The bower project maintains a list of popular packages on their servers so you can install them easily. Here you can find a list of them, ordered by popularity.

Of course there are thousands of projects not included, and you can install every git-powered software by using the git:// protocol, like:

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

or just any path

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

Bower is smart enough to install a specific tag or commit of a package you’re interested in, if you need a previous version for compatibility or you don’t need to upgrade to a newer package:

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

Uninstalling a packages is simple as well:

bower uninstall jquery

I really like using Bower especially when it comes to upgrade dependencies from time to time, instead of wandering across multiple Github projects (when we’re lucky enough to have a Github page), a simple bower update will take care of everything, except making sure everything still works on your project. That’s our job :-)


More devtools tutorials: