安裝網頁套件管理程式 Bower

URL Link //n.sfs.tw/10314

2016-11-28 10:41:02 By 張○○

Bower[1]是我這近才知道的東西，因為我要安裝jquery時，他提供了一個bower的安裝方式，疑？這是什麼。所以我心不甘情不願的試試了。

Bower的logo是一隻彩色鳥，但是為什麼叫bower?我查bower的字義是臥室、樹蔭、村舍、船首錨，好的，沒有鳥。原來這字來自 bowerbird，官網有提到，這是twitter在2012年的teamwork，主要整合js、css fw等物件

我真的太久沒學習新的東西了，這是2012年就釋出的東西，好的，悲嘆3秒就夠了，懶惰學習是天性啊。

OS

CentOS release 6.5 (Final)

一、前言

要安裝Bower首先要有 npm，所以我快樂的使用npm要安裝Bower時，發現
# npm install -g bower
-bash: npm：命令找不到

接下來我想說用yum來裝應該就可以，但是失敗：
 yum -y install npm
...
No package npm available.
Error: Nothing to do

正常情況下這步我就會放棄用最爛的方法解決：睡覺去，可是今天我沒有。

參考[3]的解法，只要用下面的指令就能安裝：
yum -y install npm --enablerepo=epel

Error getting repository data for epel, repository not found

我又得到一個no epel的錯誤

二、先加入epel的repos.

EPEL（Extra Packages for Enterprise Linux）主要目的是提供各種企業級的 Linux 一些額外的高品質套件[2]，依他的方法安裝：
# wget http://mirror01.idc.hinet.net/EPEL/6/i386/epel-release-6-8.noarch.rpm
# rpm -ivh epel-release-6-8.noarch.rpm

三、yum 安裝 npm

接下來就簡單了

# yum -y install npm --enablerepo=epel

四、用npm安裝Bower

# npm install -g bower

安裝完後，在/usr/bin/bower會有執行檔
# whereis bower
bower: /usr/bin/bower

五、用bower安裝jquery

用bower安裝jquery的好處就是，可以追踨版號和更新，詳細的使用可以參考[4][5]的說明，很詳細。

1. 建立bower設定檔 .bowerrc，假設javascript/jquery的套件都要裝在  js 這個目錄中

$ cd /path/to/web/js
$ touch .bowerrc
$ vi .bowerrc
{
    "directory" : "."
}

2. 安裝jquery

$ bower install jquery

bower cached        git://github.com/jquery/jquery.git#2.1.4
bower validate      2.1.4 against git://github.com/jquery/jquery.git#*
bower install       jquery#2.1.4

安裝完成後，就會在js的目錄下多出jqeury 目錄
├── js
│   └── jquery

六、bower 的操作筆記

1. 安裝
切到該目錄下
$ bower install package-name

安裝完會出現一個bower_components/ 的目錄，安裝後套件會放在裡面。

2. 使用root的權限安裝要加上 --allow-root 參數，否則會出現類似的錯誤：

bower ESUDO         Cannot be run with sudo

Additional error details:
Since bower is a user command, there is no need to execute it with superuser permissions.
If you're having permission errors when using bower without sudo, please spend a few minutes lear                   ning more about how your system should work and make any necessary repairs.

http://www.joyent.com/blog/installing-node-and-npm
https://gist.github.com/isaacs/579814

You can however run a command with sudo using --allow-root option

解決方法，加入-allow-root 參數，例：
#  bower  --allow-root install jquery

3. 要指定放置目錄，可以設定目錄路徑[5]：

使用者家目錄 $HOME/.bowerrc 為全域設定。
專案根目錄 project/.bowerrc 為該專案本身的設定。

每個一個目都可以放置一個.bowerrc，建議為每個一目錄建立一個獨立的bowerrc，優點是獨立管理，例如我的web/目錄長這樣：
.
├── js
│   ├── .bowerrc
│   └── jquery
└── third
    ├── .bowerrc
    ├── pure-min.css
    └── pure-release-0.6.0

4. 移除套件

  切到胲目錄下
  $ bower uninstall package-name

  或刪掉套件的那個目錄

5. 更新套件

  切到胲目錄下
  $ bower update package-name

  或更新全部
  $ bower update

6.查看已安裝套件

  $ bower list

7. 尋找套件

  $ bower search jquery

錯誤排除

npm ERR! Error: SSL Error: CERT_UNTRUSTED

SSL沒有設定信任的憑證位置。可用兩種方法解決，一是略過，二是設定[6]：

# npm config set strict-ssl false

或
# npm config set registry="http://registry.npmjs.org/"

結論

感覺bower還滿親善的，不會像composer一樣有點...巨大，用一用就會愛不釋手。

參考資料

[1] bower 官網 http://bower.io/
[2] EPEL http://blogger.gtwang.org/2013/10/redhat-linux-enable-epel-repo.html
[3] 大后端 http://www.dahouduan.com/2014/12/25/centos-yum-install-nodejs-npm/
[4] 小惡魔 Bower 管理網站套件的好工具
[5] EDEN TSAI Bower 前端套件管理工具
[6] http://stackoverflow.com/questions/21855035/ssl-error-cert-untrusted-while-using-npm-command