摘要:[JavaScript] Yeoman Angular-FullStack:Bower Introduction
Bower 是一個package manager的框架，主要是幫你把前端要用的一些lib透過統一管理的方式來讓專案本身的關注點更加分離，也透過統一處理的方式來讓你更加方便新增與移除一個套件。在現在前端開發越來越複雜跟多變的情況下，使用這類的套件是必要的，而他也是Yeoman與Grunt/Gulp強力推薦的盟友。
Co-work flow
在開始前我們先看一下Yeoman, Bower與Grunt 如何合作建立一個複雜的MEAN架構網站
-
Yeoman
負責建立專案與添加專案所需的程式，如AnuglarJS的Controller, Factory或Service都可以透過它來新增至目前專案，簡化繁雜的手動加入步驟。
-
Bower
複雜管理套件的安裝與相依性，透過它我們可以更加輕鬆且統一的管理所有引入的套件。
-
Grunt
幫我們執行所有可被自動化的流程,驗證,發布管理等。從最簡單的jshint語法驗證, javascript的最小化與合併,SCSS產生最後的CSS,到整合Karma做PhantomJS測試驗證,甚至你要發佈到雲端Heroku等都可以透過他幫你完成。
How to using Bower
在看過合作方式後我們就來實際上手看看怎麼透過Bower幫我們簡化繁雜的套件管理吧
環境安裝
如果你是使用Yeoman幫你建立的專案預設會有幫你加入Bower，如果你的專案不是Yoman建立的那就需要自己先把Bower設定好
$ npm install -g bower
安裝好後可以先來看看它有哪些指令可以幫助我們
$ bower
專案初始化
我們可以先透過下面的指令幫我們產生一份bower.json的檔案做套件管理的依據
$bower init
稍微注意一下這邊是只有加入到Bower做管理，如果要讓該套件可以透過Bower做添加專案的話還要去管理一份 bower.json的檔案，這邊會依照你專案有使用到套件添加進來
對於這份檔案細節的描述如下：
-
name (required):
The name of your package; please see Register section for how to name your package.
-
version:
A semantic version number (see semver).
- main string or array: The primary acting files necessary to use your package.
-
ignore array:
An array of paths not needed in production that you want Bower to ignore when installing your package.
-
keywords array of string:
(recommended) helps make your package easier to discover
-
dependencies hash:
Packages your package depends upon in production. Note that you can specify ranges of versions for your dependencies.
-
devDependencies hash:
Development dependencies.
-
private boolean:
Set to true if you want to keep the package private and do not want to register the package in the future.
另外有一個.bowerrc的檔案，這邊就是指定你的這些component(第三方package)到底是被放在哪一個資料夾內準備載入
新增/移除套件
你可以透過下面幾種方式將第三方的package加入Bower當中
-
registered package
$ bower install jquery -
GitHub shorthand
$ bower install desandro/masonry -
Git endpoint
$ bower install git://github.com/user/package.git -
URL
$ bower install http://example.com/script.js
如同剛剛所說，加入bower的套件如果要被指定專案使用要添加至bower.json裡面，此時你可以透過下面兩個指令幫你再添加專案的時候同時加入專案內(在專案foler的路徑下執行下面command)
$ bower install <package> --save
或是你只要加入測試環境那就可以用下面的指令
$ bower install <package> --save-dev
如果要移除的話就是
$ bower uninstall <package>
註冊/註銷套件
如果我們要註冊的是一個Bower上面找不到或自己寫的套件可以透過register這個指令幫我們註冊後加入管理
$ bower register <my-package-name> <git-endpoint>
直接的範例如下：
$ bower register example git://github.com/user/example.git
而如果要註銷的話現在比較麻煩要透過下面的指令(unregister還沒發佈...)
curl -X DELETE "https://bower.herokuapp.com/packages/<package>?access_token=<token>"
結語
下一次會跟大家分享一下Yeoman另外一個盟友 - Grunt，並實際帶大家走過一次完整的angular-fullstack開發流程，了解如何使用這三個工具幫你建立網站。
另外推薦一個不錯的JS架構整理的slide, 讓大家知道一下如果是fullstack developer你可能會需要用到與知道的東西。
