Bower => 前端開發也有包管理器

摘要: 一直以來npm,pip等各類包管理器好像都和前端開發沒什麼太大關係,固然由於nodejs的緣由可能感受npm會親切一些,不過終歸不是針對客戶端的包管理工做,因此Bower的出現確實讓人眼前一亮.css

    最近看到一個專門針對前端的包管理工具Bower,它可用於搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源。實際上angularjs的種子項目就是用它的,看到了嗎,它是專門針對客戶端資源的,也就是說它管理的基本上都是前端工程師使用的東東.前端

    Bower是用於web前端開發的包管理器。對於前端包管理方面的問題,它提供了一套通用、客觀的解決方案。它經過一個API暴露包之間的依賴模型,這樣更利於使用更合適的構建工具。Bower沒有系統級的依賴,在不一樣app之間也不互相依賴,依賴樹是扁平的。node

    Bower運行在Git之上,它將全部包都視做一個黑盒子。任何類型的資源文件均可以打包爲一個模塊,而且可使用任何規範(例如:AMD、CommonJS等)。jquery

    介紹完了Bower說一下它能給咱們帶來什麼好處?nginx

    1. 節省時間。爲何要學習Bower的第一個緣由,就是它會爲你節省尋找客戶端的依賴關係的時間。每次我須要安裝jQuery的時候,我都須要去jQuery網站下載包或使用CDN版本。可是有了Bower,你只須要輸入一個命令,jquery就會安裝在本地計算機上,你不須要去記版本號之類的東西,你也能夠經過Bower的info命令去查看任意庫的信息。angularjs

    2. 脫機工做。Bower會在用戶主目錄下建立一個.bower的文件夾,這個文件夾會下載全部的資源、並安裝一個軟件包使它們能夠離線使用。若是你熟悉Java,Bower便是一個相似於如今流行的Maven構建系統的.m2倉庫。每次你下載任何資源庫都將被安裝在兩個文件夾中 —— 一個在的應用程序文件夾,另外一個在用戶主目錄下的.bower文件夾。所以,下一次你須要這個倉庫時,就會用那個用戶主目錄下.bower中的版本。web

    3. 能夠很容易地展示客戶端的依賴關係。你能夠建立一個名爲bower.json的文件,在這個文件裏你能夠指定全部客戶端的依賴關係,任什麼時候候你須要弄清楚你正在使用哪些庫,你能夠參考這個文件。sql

    4. 讓升級變得簡單。假設某個庫的新版本發佈了一個重要的安全修補程序,爲了安裝新版本,你只須要運行一個命令,bower會自動更新全部有關新版本的依賴關係。npm

    安裝Bowerjson

    Bower依賴Node 和 npm。經過npm 安裝到全局環境中:

    npm install -g bower

 

    使用

    安裝以後,能夠經過bower help命令能夠獲取更多幫助信息。瞭解了這些 信息就能夠開始了。

    安裝包以及其依賴的包

# Using the dependencies listed in the current directory's bower.json bower install # Using a local or remote package bower install <package> # Using a specific Git-tagged version from a remote package bower install <package>#<version>

 

     全部包都將默認安裝到components目錄中。 不建議直接修改此目錄中的內容。

    執行bower list命令能夠列出全部本地安裝的包。

    若是你不是在建立一個被其餘人使用的包(也就是說,你在構建本身的web應用), 那就應當將全部的已經安裝的包歸入源碼管理中。

   查找包

bower search [<name>]

 

   使用包

   作簡單的使用方式就是經過script 標籤直接引入已經安裝的包:

<script src="/bower_components/jquery/index.js"></script>

 

   對於更復雜的項目,你可能更但願合併全部腳本或者使用模塊加載器(module loader)。 Bower只是一個包管理器,不過你可使用不少其餘工具 -- 例如 Sprockets 和 RequireJS -- 這些都能幫你完成你所但願的工做。

    卸載包

bower uninstall <package-name>

 

    配置Bower.json

    首先,必須在項目的根目錄下建立一個JSON文件 -- 默認是bower.json,而後指定全部的依賴。這和 Node所使用的package.json文件或者Ruby中的Gemfile文件很相似,而且有助於鎖定項目的依賴關係。

    還能夠經過如下命令,進入交互式界面建立一個bower.json文件:

bower init

 

    文件定義了幾個參數:

name (required): The name of your package. version: A semantic version number (see semver). main [string|array]: The primary endpoints of your package. ignore [array]: An array of paths not needed in production that you want Bower to ignore when installing your package. dependencies [hash]: Packages your package depends upon in production. devDependencies [hash]: Development dependencies. {   "name": "my-project",   "version": "1.0.0",   "main": "path/to/main.css",   "ignore": [     ".jshintrc",     "**/*.txt"   ],   "dependencies": {     "<name>": "<version>",     "<name>": "<folder>",     "<name>": "<package>"   },   "devDependencies": {     "<test-framework-name>": "<version>"   } }

 

    更多內容能夠去看看官網http://bower.io/

相關文章
相關標籤/搜索