Bower的入門


      接觸Bower一年多了,今天對於它的有一些疑問,並且寫此博文記錄之。

      首先把Bower的官網附上: https://bower.io/

    (一)什么是Bower

       Bower:就是一個前端包管理工具。能夠幫我們管理Web站點上的各種框架,類庫等等。主要作用有如下:能夠幫助我們跟蹤前端包,並且保證他們是最新(或者是你指定的特定版本),Bower能夠管理前端里面的HTML,CSS,JS,甚至還可以是圖片。Bower還有一個最大的好處,它對我們前端進行了優化。如果多個包依賴於一個包,例如jQuery,那么Bower將只下載jQuery一次,這樣就稱為扁平依賴,它有助於減少頁面加載。

     ( 二) 安裝Bower

        Bower需要node,npm,git環境。如何在windows安裝node(npm繼承在node里面)和git。直接去對應的官網下載,然后配置相應的環境變量。

        通過NPM的方式安裝:npm install bower -g

    (三) 常用的Bower命令

     3.1 bower init

      這會在你的對應路徑下面產生一個bower.json的文件,這個文件里面存放項目所需包的相關使用,可以用來作為項目重復安裝使用,向Bower.com提交你的庫的時候,該網站會列入在線索引(意思就是別人可以bower install你的庫了)。

      dependencies 記錄生產環境依賴的庫,devDependencies記錄開發環境所依賴的庫。

     3.2 bower install

      

           從例子來看吧,

           bower install jQuery 

           不過一般不建議類似於上面這樣使用。一般來說bower install jQuery --save-dev ,這個操作可以往bower.json里面寫入對應的模塊,它可以實現不同之間的重復安裝。其他項目成員,拿到項目之后,只需要bower install 就好了。bower install是可以直接從bower.json里面讀出來的,其他項目成員就不需要寫bower install jQuery了。

           命令格式里面的<endpoint> 可以有多種形式 :

         1.bower install 包,2.bower install 包#版本,3.bower intall name=包#版本。

          <package>是一個包URL,物理位置或注冊表名稱
          <version>是一個有效的范圍,提交,分支等。
          <name>是它應該在本地的名稱。

          常用的bower install 格式

          bower install jQuery#1.2

          bower install github網址

          bower 默認情況都會去bower.com上面找最新的包,除非指定版本號。記住一下,剛剛開始說的,它是扁平化安裝的。

         3.3 bower cache 

          緩存是前端比較頭疼的東西。Bower cache清理緩存的方法,bower cache clean。列出緩存列表bower cache list

          bower cache clean和上面的bower install類似,都是可以指定名稱來bower cache clean.

        3.4 bower update和bower unstall 

         都是和bower install類似。

        3.5其他bower命令

         bower into,bower help,其實很多命令都有的,它也有,都是類似的。

     (四) 如何注冊自己包到bower上面呢

         就是很多公司都有自己一套前端庫,如何把他們放到Bower上面呢

         先去github上面建立一個庫(項目)(公有,私有都行)或者其他,只要能讓bower.com能訪問到地址應該都可以。

         比如我建立了一個叫做angualr-demo的庫,然后加入bower init來管理這個庫。

          之后用bower register  git上面的url

         

        這樣就完成了在bower.com上面的注冊了,之后我們就可以bower install ngDemo下來看看了。

     (五)可以把所有操作都做成一個Gulp或Grunt命令

var bower = require('bower');

bower.commands
.install(['jquery'], { save: true }, { /* custom config */ })
.on('end', function (installed) {
    console.log(installed);
});

bower.commands
.search('jquery', {})
.on('end', function (results) {
    console.log(results);
});

     (六)npm和Bower比較

         現在npm最常用於Node.Js模塊,Npm是嵌套依賴樹的關系,你應該知道刪除npm模塊,你不用rimraf node_modules模塊,都不行,嵌套依賴就是,你依賴我,我依賴它,再依賴它。NPM嵌套依賴用在服務器上十分好,不用關心版本沖突問題等等。  Bower是專門為前端創建的,它對於依賴的管理是屬於扁平化的。

          現在一般項目里面,既有Bower和Node,因為前端還需要一些Gulp,Webpack這樣的構建工具。我認為Bower和Node.js是可以共存的。

          


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM