使用Bower進行前端依賴管理

時間  2019-11-17
標籤 使用 bower 進行 前端 依賴 管理 欄目 設計模式 简体版
原文   原文鏈接

什麼是Bower？

前端開發圈愈來愈熱鬧，第三方js庫層出不窮，版本更迭突飛猛進；且許多庫又對其餘庫有着依賴關係。而咱們的頁面須要的庫也愈來愈多樣化。以往須要引入第三方庫，須要搜索尋找所需庫的特定版本下載，還須要搜索尋找下載特定版本的依賴庫，十分麻煩；庫的更新也是件十分繁瑣的事情。是否有一個工具：搜索、自動安裝/卸載、檢查更新、確保依賴關係……css

Bower 是 twitter 推出的一款包管理工具，基於nodejs的模塊化思想，把功能分散到各個模塊中，讓模塊和模塊之間存在聯繫，經過 Bower 來管理模塊間的這種聯繫。html

  • 「包」是指一系列有意義的資源的集合，在bower這裏，更多體如今json文件，它是這些資源的配置文件，一個完整的包都應該有一個bower.json文件。
  • 「管理」包含獲取，下載，安裝，更新，查找,註冊等等一系列對資源的操做。

npm是專門管理node模塊的管理工具，而bower是node的模塊，由於bower是依賴node，npm和git。正如前面所言，npm是擅長的是管理node模塊，而bower管理的範圍更大，涉及html,css,js和圖片等媒體資源。或許，這也是人們喜歡在服務器端使用npm,而在客戶端使用bower。前端

Bower 的基礎功能有哪些？node

  • 註冊模塊：每一個包須要肯定一個惟一的 ID 使得搜索和下載的時候可以正確匹配
  • 文件存儲：把文件存儲在一個有效的網絡地址上,使用的時候能夠直接下載到
  • 上傳下載：你能夠把你的包註冊後上傳存儲，使用的時候可使用一條命令直接下載到當前項目
  • 依賴分析：它幫咱們解決了包與包直接的依賴關係，當咱們下載一個包A的時候,因爲它依賴包B,因此bower會自動幫咱們下載好包B

爲何要使用Bower?

  • 節省時間。爲何要學習Bower的第一個緣由，就是它會爲你節省尋找客戶端的依賴關係的時間。每次我須要安裝jQuery的時候，我都須要去jQuery網站下載包或使用CDN版本。可是有了Bower，你只須要輸入一個命令，jquery就會安裝在本地計算機上，你不須要去記版本號之類的東西，你也能夠經過Bower的info命令去查看任意庫的信息。
  • 脫機工做。Bower會在用戶主目錄下建立一個.bower的文件夾，這個文件夾會下載全部的資源、並安裝一個軟件包使它們能夠離線使用。若是你熟悉Java，Bower便是一個相似於如今流行的Maven構建系統的.m2倉庫。每次你下載任何資源庫都將被安裝在兩個文件夾中 —— 一個在的應用程序文件夾，另外一個在用戶主目錄下的.bower文件夾。所以，下一次你須要這個倉庫時，就會用那個用戶主目錄下.bower中的版本。
  • 能夠很容易地展示客戶端的依賴關係。你能夠建立一個名爲json的文件，在這個文件裏你能夠指定全部客戶端的依賴關係，任什麼時候候你須要弄清楚你正在使用哪些庫，你能夠參考這個文件。
  • 讓升級變得簡單。假設某個庫的新版本發佈了一個重要的安全修補程序，爲了安裝新版本，你只須要運行一個命令，bower會自動更新全部有關新版本的依賴關係。

如何安裝Bower?

Bower依賴於Node.js，Git（資源主要經過git進行下載），所以你須要提早安裝好，才能正常安裝bower。 Bower能夠經過NPM進行安裝：jquery

一旦你已經安裝了上面所說的全部必要文件，鍵入如下命令安裝Bower：git

$ npminstall -g bower

 

這行命令是Bower的全局安裝，-g 操做表示全局。es6

$ bower –version //檢查版本確認是否安裝好
$ npmupdate -g bower //更新Bower版本
$ npmuninstall --global bower 卸載Bower

 

如何使用Bower?

安裝完bower以後就可使用全部的bower命令了。能夠鍵入help 命令來查看bower能夠完成那些操做，以下：github

PS D:\> bowerhelp
 
Usage:
 
    bower <command> [<args>] [<options>]
Commands:
 
    cache                  Managebowercache
    help                    DisplayhelpinformationaboutBower
    home                    Opens a package homepageintoyourfavoritebrowser
    info                    Infoof a particularpackage
    init                    Interactivelycreate a bower.jsonfile
    install                Install a package locally
    link                    Symlink a package folder
    list                    Listlocalpackages - and possibleupdates
    login                  AuthenticatewithGitHuband storecredentials
    lookup                  Lookup a package URLbyname
    prune                  Removeslocalextraneouspackages
    register                Register a package
    search                  Searchfor a package byname
    update                  Update a localpackage
    uninstall              Remove a localpackage
    unregister              Remove a package fromtheregistry
    version                Bump a package version
Options:
 
    -f, --force            Makesvariouscommandsmoreforceful
    -j, --json              OutputconsumableJSON
    -l, --loglevel          Whatleveloflogsto report
    -o, --offline          Do not hitthenetwork
    -q, --quiet            Onlyoutputimportantinformation
    -s, --silent            Do not outputanything, besideserrors
    -V, --verbose          Makesoutputmoreverbose
    --allow-root            Allowsrunningcommandsas root
    -v, --version          OutputBowerversion
    --no-color              Disablecolors
See 'bower help <command>' for moreinformationon a specificcommand.

 

上面help 信息列出 bower 提供的命令：web

  • cache:bower緩存管理
  • help:顯示Bower命令的幫助信息
  • home:經過瀏覽器打開一個包的github發佈頁
  • info:查看包的信息
  • init:建立json文件
  • install:安裝包到項目
  • link:在本地bower庫創建一個項目連接
  • list:列出項目已安裝的包
  • lookup:根據包名查詢包的URL
  • prune:刪除項目無關的包
  • register:註冊一個包
  • search:搜索包
  • update:更新項目的包
  • uninstall:刪除項目的包

包的安裝

Bower是一個軟件包管理器，舉例來看一下來如何使用Bower安裝JQuery，首先使用命令行將找到包存放的本地目錄，而後執行：ajax

bowerinstalljquery

安裝後的庫默認存放在項目的 bower_components 子目錄，若是要指定其餘位置，可在 .bowerrc 文件的 directory 屬性設置。

Bower使用包的名字去在線索引中搜索該包的網址 — bower.com。某些狀況下，若是一個庫很新（或者你不想使用默認網址），可能須要咱們手動指定該庫的網址。指定的網址能夠是 github 地址、http 網址、本地文件。

bowerinstallgit://github.com/documentcloud/backbone.git
bowerinstallhttp://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js
bowerinstall ./some/path/relative/to/this/directory/backbone.js

 

默認狀況下，會安裝該庫的最新版本，可是也能夠手動指定版本號。

bowerinstalljquery-ui#1.10.1

 

若是某個庫依賴另外一個庫，安裝時默認將所依賴的庫一塊兒安裝。Bower會根據該庫的 bower.json 文件下的 dependencies 配置自動給你安裝指定依賴庫的指定版本。好比，jquery-ui依賴jquery，安裝時會連jquery一塊兒安裝。

包的搜索

假如你想在你的應用程序中使用twitter的bootstrap框架，但你不肯定包的名字，這時你可使用search 命令：

PS D:\> bowersearchbootstrap
Searchresults:
 
    bootstrapgit://github.com/twbs/bootstrap.git
    angular-bootstrapgit://github.com/angular-ui/bootstrap-bower.git
    bootstrap-sass-officialgit://github.com/twbs/bootstrap-sass.git
    sass-bootstrapgit://github.com/jlong/sass-bootstrap.git
    bootstrap-datepickergit://github.com/eternicode/bootstrap-datepicker.git
    bootstrap-selectgit://github.com/silviomoreto/bootstrap-select.git
    angular-ui-bootstrap-bowergit://github.com/angular-ui/bootstrap-bower
    angular-ui-bootstrapgit://github.com/angular-ui/bootstrap.git
    bootstrap-daterangepickergit://github.com/dangrossman/bootstrap-daterangepicker.git
    bootstrap-timepickergit://github.com/jdewit/bootstrap-timepicker
    bootstrap-switch git://github.com/nostalgiaz/bootstrap-switch.git
    bootstrap-cssgit://github.com/jozefizso/bower-bootstrap-css.git
    select2-bootstrap-cssgit://github.com/t0m/select2-bootstrap-css.git
    eonasdan-bootstrap-datetimepickergit://github.com/Eonasdan/bootstrap-datetimepicker.git
    seiyria-bootstrap-slidergit://github.com/seiyria/bootstrap-slider.git
    angular-bootstrap-colorpickergit://github.com/buberdds/angular-bootstrap-colorpicker.git
    bootstrap-multiselectgit://github.com/davidstutz/bootstrap-multiselect.git
    bootstrap.cssgit://github.com/bowerjs/bootstrap.git
    bootstrap-datetimepickergit://github.com/tarruda/bootstrap-datetimepicker.git
    angular-bootstrap-datetimepickergit://github.com/dalelotts/angular-bootstrap-datetimepicker
    bootstrap-modalgit://github.com/jschr/bootstrap-modal.git
    bootstrap-tourgit://github.com/sorich87/bootstrap-tour.git
    bootstrap-tagsinputgit://github.com/TimSchlechter/bootstrap-tagsinput.git
    bootstrap-additionsgit://github.com/mgcrea/bootstrap-additions.git
    bootstrap-file-inputgit://github.com/grevory/bootstrap-file-input.git
    angular-bootstrap-switch git://github.com/frapontillo/angular-bootstrap-switch.git
    bootstrap-socialgit://github.com/lipis/bootstrap-social.git
    twbs-bootstrap-sassgit://github.com/twbs/bootstrap-sass
    ember-addons.bs_for_embergit://github.com/ember-addons/bootstrap-for-ember.git
    jasny-bootstrapgit://github.com/jasny/bootstrap.git

 

查看包的信息

若是你想看到關於特定的包的信息，可使用info 命令來查看該包的全部信息：

PS D:\> bowerinfobootstrap
bowerbootstrap#*           not-cached git://github.com/twbs/bootstrap.git#*
bowerbootstrap#*              resolve git://github.com/twbs/bootstrap.git#*
bowerbootstrap#*             download https://github.com/twbs/bootstrap/archive/v3.3.6.tar.gz
bowerbootstrap#*             progress received 0.9MB of 3.8MB downloaded, 24%
bowerbootstrap#*             progress received 1.0MB of 3.8MB downloaded, 27%
bowerbootstrap#*             progress received 1.1MB of 3.8MB downloaded, 30%
bowerbootstrap#*             progress received 1.3MB of 3.8MB downloaded, 34%
bowerbootstrap#*             progress received 1.4MB of 3.8MB downloaded, 37%
bowerbootstrap#*             progress received 1.6MB of 3.8MB downloaded, 41%
bowerbootstrap#*             progress received 1.7MB of 3.8MB downloaded, 46%
bowerbootstrap#*             progress received 1.9MB of 3.8MB downloaded, 50%
bowerbootstrap#*             progress received 2.1MB of 3.8MB downloaded, 55%
bowerbootstrap#*             progress received 2.3MB of 3.8MB downloaded, 59%
bowerbootstrap#*             progress received 2.4MB of 3.8MB downloaded, 64%
bowerbootstrap#*             progress received 2.6MB of 3.8MB downloaded, 69%
bowerbootstrap#*             progress received 2.8MB of 3.8MB downloaded, 74%
bowerbootstrap#*             progress received 3.0MB of 3.8MB downloaded, 79%
bowerbootstrap#*             progress received 3.2MB of 3.8MB downloaded, 85%
bowerbootstrap#*             progress received 3.4MB of 3.8MB downloaded, 88%
bowerbootstrap#*             progress received 3.5MB of 3.8MB downloaded, 92%
bowerbootstrap#*             progress received 3.7MB of 3.8MB downloaded, 96%
bowerbootstrap#*              extract archive.tar.gz
bowerbootstrap#*             resolved git://github.com/twbs/bootstrap.git#3.3.6
 
{
  name: 'bootstrap',
  description: 'The most popular front-end framework for developing responsive, mobile first projects on the web.',
  keywords: [
    'css',
    'js',
    'less',
    'mobile-first',
    'responsive',
    'front-end',
    'framework',
    'web'
  ],
  homepage: 'http://getbootstrap.com',
  license: 'MIT',
  moduleType: 'globals',
  main: [
    'less/bootstrap.less',
    'dist/js/bootstrap.js'
  ],
  ignore: [
    '/.*',
    '_config.yml',
    'CNAME',
    'composer.json',
    'CONTRIBUTING.md',
    'docs',
    'js/tests',
    'test-infra'
  ],
  dependencies: {
    jquery: '1.9.1 - 2'
  },
  version: '3.3.6'
}
 
Availableversions:
  - 3.3.6
  - 3.3.5
  - 3.3.4
  - 3.3.2
  - 3.3.1
  - 3.3.0
  - 3.2.0
  - 3.1.1
  - 3.1.0
  - 3.0.3
  - 3.0.2
  - 3.0.1
  - 3.0.0
  - 2.3.2
  - 2.3.1
  - 2.3.0
  - 2.2.2
  - 2.2.1
  - 2.2.0
  - 2.1.1
  - 2.1.0
  - 2.0.4
  - 2.0.3
  - 2.0.2
  - 2.0.1
  - 2.0.0
  - 1.4.0
  - 1.3.0
  - 1.2.0
  - 1.1.1
  - 1.1.0
  - 1.0.0
 
Show 4 additionalprereleaseswith ‘bowerinfobootstrap --verbose’
Youcanrequestinfofor a specificversionwith 'bower info bootstrap#<version>'

 

查看指定版本包的信息：

PS D:\> bowerinfobootstrap#3.3.6
bowerbootstrap#3.3.6           cached git://github.com/twbs/bootstrap.git#3.3.6
bowerbootstrap#3.3.6         validate 3.3.6 against git://github.com/twbs/bootstrap.git#3.3.6
 
{
  name: 'bootstrap',
  description: 'The most popular front-end framework for developing responsive, mobile first projects on the web.',
  keywords: [
    'css',
    'js',
    'less',
    'mobile-first',
    'responsive',
    'front-end',
    'framework',
    'web'
  ],
  homepage: 'http://getbootstrap.com',
  license: 'MIT',
  moduleType: 'globals',
  main: [
    'less/bootstrap.less',
    'dist/js/bootstrap.js'
  ],
  ignore: [
    '/.*',
    '_config.yml',
    'CNAME',
    'composer.json',
    'CONTRIBUTING.md',
    'docs',
    'js/tests',
    'test-infra'
  ],
  dependencies: {
    jquery: '1.9.1 - 2'
  },
  version: '3.3.6'
}
已安裝包列表

PS D:\> bowerlist
bowercheck-new    Checkingfor new versionsoftheprojectdependencies...
root D:\
└── jquery#2.2.0 extraneous (latest is 3.0.0-beta1)

 

其餘經常使用指令

  • 包的升級 bower update jquery
  • 包的卸載 bower uninstall jquery  （注意：默認狀況下會連所依賴的庫一塊兒卸載。好比，jquery-ui 依賴 jquery，卸載時會連 jquery 一塊兒卸載，除非還有別的庫依賴 jquery。）
  • 安裝失敗清除緩存 bower cache clean

Bower的配置文件.bowerrc

項目根目錄下（也能夠放在用戶的主目錄下，這樣就不用每次都配置）的 .bowerrc 文件是 Bower 的配置文件，它大概像下面這樣。

{
  "directory" : "components",
  "json"      : "bower.json",
  "endpoint"  : "https://Bower.herokuapp.com",
  "searchpath"  : "",
  "shorthand_resolver" : ""
}

 

其中的屬性含義以下。

  • directory：存放庫文件的子目錄名。
  • json：描述各個庫的json文件名。
  • endpoint：在線索引的網址，用來搜索各類庫。
  • searchpath：一個數組，儲存備選的在線索引網址。若是某個庫在endpoint中找不到，則繼續搜索該屬性指定的網址，一般用於放置某些不公開的庫。
  • shorthand_resolver：定義各個庫名稱簡寫形式。

bower.json文件

bower.json文件的使用可讓包的安裝更容易，你能夠在應用程序的根目錄下建立一個名爲「bower.json」的文件，並定義它的依賴關係。bower.json的做用是：

  • 保存項目的庫信息，供項目二次安裝時使用（重複使用）
  • 向com 提交你的庫時，該網站會讀取 bower.json，列入在線索引。

其中dependencies 記錄着生產環境依賴的庫；devDependencies 記錄着開發時依賴的 node package。其版本規則見 npm 的version rules。

使用bower init 命令能夠來建立bower.json文件，它會自動提示你輸入一系列的內容，以生成最終的文件，包括項目名稱、做者信息、項目描述信息、關鍵詞、開源證書等等。

PS D:\> bowerinit
? namenewone
? description a new oneproject
? mainfilenewone.js
? whattypesofmodulesdoesthis package expose? es6
? keywordstest
? authorsbiaodianfu <biaodianfu#gmail.com>
? licenseMIT
? homepagehttp://www.biaodianfu.com
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No
 
 
 
{
  name: 'newone',
  authors: [
    'biaodianfu <biaodianfu#gmail.com>'
  ],
  description: 'a new one project',
  main: 'newone.js',
  moduleType: [
    'es6'
  ],
  keywords: [
    'test'
  ],
  license: 'MIT',
  homepage: 'http://www.biaodianfu.com',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ],
  dependencies: {
    jquery: '^2.2.0'
  }
}

 

注意看，它已經加入了jQuery依賴關係。如今假設也想用twitter bootstrap，咱們能夠用下面的命令安裝twitter bootstrap並更新bower.json文件：

$ bowerinstallbootstrap --save

 

-save 就是把下載的包信息寫入到配置文件的依賴項裏，它會自動安裝最新版本的bootstrap並更新bower.json文件：

{
  "name": "newone",
  "authors": [
    "biaodianfu <biaodianfu@gmail.com>"
  ],
  "description": "a new one project",
  "main": "newone.js",
  "moduleType": [
    "es6"
  ],
  "keywords": [
    "test"
  ],
  "license": "MIT",
  "homepage": "http://www.biaodianfu.com",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "^2.2.0",
    "bootstrap": "^3.3.6"
  }
}

 

須要注意的是，這裏有兩個版本的依賴，一個是dependencies，另外一個是devDependencies，分別表明生產環境和開發環境中的依賴包，它們能夠分別經過下面兩個指令自動添加：

bowerinstalljquery --save         //添加到dependencies
bowerinstallangular --save-dev        //添加到devDependencies

 

按照上面的作法，例如，我建立了一個前端開發的較爲齊全的包，就能夠掛在git或者bower的官網上了。而你要作的是，只把這個bower.jsonpush到線上便可。別人經過下載這個bower.json文件，在已經安裝bower的前提下，直接運行bower install就可使用這個前端開發包了。

將包發佈到bower.com

你能夠註冊本身的包，這樣其餘人也可使用了，這個操做只是在服務器上保存了一個映射，服務器自己不託管代碼。

提交你的 bower 包給 bower.com：

bowerregister <my-package-name> <git-endpoint>

 

實例：在 bower.com 登記jquery

bowerregisterjquerygit://github.com/jquery/jquery

 

注意，若是你的庫與現有的庫重名，就會提交失敗。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程