bower解決js的依賴管理 包含git的內容

時間  2019-11-19
標籤 bower 解決 依賴 管理 包含 git 內容 欄目 JavaScript 简体版
原文   原文鏈接


bower

前言
一個新的web項目開始，咱們老是很天然地去下載須要用到的js類庫文件，好比jQuery，去官網下載名爲jquery-1.10.2.min.js文 件，放到咱們的項目裏。當項目又須要bootstrap的時候，咱們會重複剛纔的工做，去bootstrap官網下載對應的類庫。若是bootstrap 所依賴的jQuery並非1.10.2，而是2.0.3時，咱們會再從新下載一個對應版本的jQuery替換原來的。javascript

包管理是個複雜的問題，咱們要知道誰依賴誰，還要明確哪一個版本依賴哪一個版本。這些對於開發人員來講，負擔太重了。bower做爲一個js依賴管理的工具，提供一種理想包管理方式，藉助了npm的一些思想，爲咱們提供一個舒服的開發環境。html

你要還不動起手來試試bower，那你必定不會知道，前端開發是件多麼享受的事。前端

目錄java

  1. bower介紹node

  2. bower安裝jquery

  3. bower命令git

  4. bower使用github

  5. 用bower提交本身類庫web

1. bower介紹

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

包管理工具通常有如下的功能：

  • 註冊機制：每一個包須要肯定一個惟一的 ID 使得搜索和下載的時候可以正確匹配，因此包管理工具須要維護註冊信息，能夠依賴其餘平臺。

  • 文件存儲：肯定文件存放的位置，下載的時候能夠找到，固然這個地址在網絡上是可訪問的。

  • 上傳下載：這是工具的主要功能，能提升包使用的便利性。好比想用 jquery 只須要 install 一下就能夠了，不用處處找下載。上傳並非必備的，根據文件存儲的位置而定，但須要有必定的機制保障。

  • 依賴分析：這也是包管理工具主要解決的問題之一，既然包之間是有聯繫的，那麼下載的時候就須要處理他們之間的依賴。下載一個包的時候也須要下載依賴的包。

功能介紹，摘自文章：http://chuo.me/2013/02/twitter-bower.html

2. bower安裝

bower插件是經過npm, Node.js包管理器安裝和管理的.

個人系統環境

  • win7 64bit

  • Nodejs:v0.10.5

  • Npm:1.2.19

~ D:\workspace\javascript>node -v
v0.10.5

~ D:\workspace\javascript>npm -v
1.2.19

在系統中，咱們已經安裝好了Nodejs和npm。win7安裝nodejs請參考文章：Nodejs開發框架Express3.0開發手記–從零開始

安裝bower
全局安裝bower

~ D:\workspace\javascript>npm install bower -g

新建一個express3的項目nodejs-bower

~ D:\workspace\javascript>express -e nodejs-bower
~ D:\workspace\javascript>cd nodejs-bower && npm install

3. bower命令

bower安裝後，咱們就能夠用bower這個命令了。

~ D:\workspace\javascript\nodejs-bower>bower
Usage:
    bower

Commands，列出了bower支持的各類命令。

  • cache:bower緩存管理

  • help:顯示Bower命令的幫助信息

  • home:經過瀏覽器打開一個包的github發佈頁

  • info:查看包的信息

  • init:建立bower.json文件

  • install:安裝包到項目

  • link:在本地bower庫創建一個項目連接

  • list:列出項目已安裝的包

  • lookup:根據包名查詢包的URL

  • prune:刪除項目無關的包

  • register:註冊一個包

  • search:搜索包

  • update:更新項目的包

  • uninstall:刪除項目的包

4. bower使用

1). 安裝jQuery到項目nodejs-bower

~ D:\workspace\javascript\nodejs-bower>bower install jquery
bower jquery#*              not-cached git://github.com/components/jquery.git#*
bower jquery#*                 resolve git://github.com/components/jquery.git#*
bower jquery#*                download https://github.com/components/jquery/archive/2.0.3.tar.gz
bower jquery#*                 extract archive.tar.gz
bower jquery#*                resolved git://github.com/components/jquery.git#2.0.3
bower jquery#~2.0.3            install jquery#2.0.3

jquery#2.0.3 bower_components\jquery

經過執行命令，咱們能夠看到jQuery的最新版本被下載，並安裝到項目的bower_components\jquery目錄

查看bower_components/jquery目錄，發現了3個文件。

~ D:\workspace\javascript\nodejs-bower>ls bower_components/jquery -a
.  ..  .bower.json  component.json  jquery.js

一樣地，咱們的項目還須要d3的類庫

~ D:\workspace\javascript\nodejs-bower>bower install d3
bower d3#*                  not-cached git://github.com/mbostock/d3.git#*
bower d3#*                     resolve git://github.com/mbostock/d3.git#*
bower d3#*                    download https://github.com/mbostock/d3/archive/v3.2.8.tar.gz
bower d3#*                     extract archive.tar.gz
bower d3#*                    resolved git://github.com/mbostock/d3.git#3.2.8
bower d3#~3.2.8                install d3#3.2.8

d3#3.2.8 bower_components\d3

很是方便，下載並安裝完成！

2). 查看項目中已導入的類庫

~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new     Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├── d3#3.2.8
└── jquery#2.0.3

3). 安裝bootstrap庫，並查看依賴狀況

~ D:\workspace\javascript\nodejs-bower>bower install bootstrap
bower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.0.0-rc1
bower bootstrap#*             validate 3.0.0-rc1 against git://github.com/twbs/bootstrap.git#*
bower jquery#>= 1.9.0           cached git://github.com/components/jquery.git#2.0.3
bower jquery#>= 1.9.0         validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0
bower bootstrap#~3.0.0-rc1     install bootstrap#3.0.0-rc1

bootstrap#3.0.0-rc1 bower_components\bootstrap
└── jquery#2.0.3

~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new     Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery#2.0.3
├── d3#3.2.8
└── jquery#2.0.3

咱們發現bootstrap，對jquery是有依賴的。

4). 刪除jQuery庫，破壞依賴關係

~ D:\workspace\javascript\nodejs-bower>bower uninstall jquery
bower conflict      bootstrap depends on jquery
Continue anyway? (y/n) y
bower uninstall     jquery

~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new     Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery missing
├── d3#3.2.8
└── jquery missing

5). 安裝低版本的jQuery，製造不版本兼容

~ D:\workspace\javascript\nodejs-bower>bower install jquery#1.7.2
bower jquery#~2.0.3             cached git://github.com/components/jquery.git#2.0.3
bower jquery#~2.0.3           validate 2.0.3 against git://github.com/components/jquery.git#~2.0.3
bower jquery#>= 1.9.0           cached git://github.com/components/jquery.git#2.0.3
bower jquery#>= 1.9.0         validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0
bower jquery#1.7.2              cached git://github.com/components/jquery.git#1.7.2
bower jquery#1.7.2            validate 1.7.2 against git://github.com/components/jquery.git#1.7.2

Unable to find a suitable version for jquery, please choose one:
    1) jquery#1.7.2 which resolved to 1.7.2
    2) jquery#~2.0.3 which resolved to 2.0.3 and has nodejs-bower as dependants
    3) jquery#>= 1.9.0 which resolved to 2.0.3 and has bootstrap#3.0.0-rc1 as dependants

Prefix the choice with ! to persist it to bower.json

Choice: 1
bower jquery#1.7.2             install jquery#1.7.2

jquery#1.7.2 bower_components\jquery

~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new     Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery#1.7.2 incompatible with >= 1.9.0 (2.0.3 available)
├── d3#3.2.8
└── jquery#1.7.2 incompatible with ~2.0.3 (2.0.3 available)

咱們能夠清楚的看到bower，很明確的告訴了咱們，jquery和bootstrap是不兼容的，強大之處你們應該有所體會。

6).升級jQuery，讓版本兼容

~ D:\workspace\javascript\nodejs-bower>bower update jquery
bower jquery#~2.0.3             cached git://github.com/components/jquery.git#2.0.3
bower jquery#~2.0.3           validate 2.0.3 against git://github.com/components/jquery.git#~2.0.3
bower jquery#>= 1.9.0           cached git://github.com/components/jquery.git#2.0.3
bower jquery#>= 1.9.0         validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0
bower jquery#~2.0.3            install jquery#2.0.3

jquery#2.0.3 bower_components\jquery

~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new     Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery#2.0.3
├── d3#3.2.8
└── jquery#2.0.3

多麼智能，一鍵搞定，這纔是高效的開發。

7). 查看本地bower已經緩存的類庫

~ D:\workspace\javascript\nodejs-bower>bower cache list
bootstrap=git://github.com/twbs/bootstrap.git#3.0.0-rc1
d3=git://github.com/mbostock/d3.git#3.2.8
jquery=git://github.com/components/jquery.git#1.7.2
jquery=git://github.com/components/jquery.git#2.0.3

8). 查看D3庫信息

~ D:\workspace\javascript\nodejs-bower>bower info d3
d3

  Versions:
    - 3.2.8
    - 3.2.7
    - 3.2.6
    - 3.2.5
    - 3.2.4
    - 3.2.3
    ...

9). 查看dojo庫的url

~ D:\workspace\javascript\nodejs-bower>bower lookup dojo
dojo git://github.com/dojo/dojo.git

10). 用瀏覽器打開dojo的發佈主頁

~ D:\workspace\javascript\nodejs-bower>bower home dojo
bower dojo#*                not-cached git://github.com/dojo/dojo.git#*
bower dojo#*                   resolve git://github.com/dojo/dojo.git#*
bower dojo#*                  download https://github.com/dojo/dojo/archive/1.9.1.tar.gz
bower dojo#*                   extract archive.tar.gz
bower dojo#*                  resolved git://github.com/dojo/dojo.git#1.9.1

瀏覽器自動打開：https://github.com/dojo/dojo

11). 查詢包含dojo的類庫

~ D:\workspace\javascript\nodejs-bower>bower search dojo
Search results:

    dojo git://github.com/dojo/dojo.git
    dojox git://github.com/dojo/dojox.git
    dojo-util git://github.com/dojo/util.git
    dojo-bootstrap git://github.com/samvdb/Dojo-Bootstrap

真是方便實用的技術。

5. 用bower提交本身類庫

1). 生成bower.json配置文件

~ D:\workspace\javascript\nodejs-bower>bower init
bower existing      The existing bower.json file will be used and filled in
[?] name: nodejs-bower
[?] version: 0.0.0
[?] main file:
[?] set currently installed components as dependencies? No
[?] add commonly ignored files to ignore list? Yes

查看生成的文件bower.json

{
  "name": "nodejs-bower",
  "version": "0.0.0",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "d3": "git://github.com/mbostock/d3.git#~3.2.8",
    "jquery": "git://github.com/components/jquery.git#~2.0.3"
  }
}

2). 在github建立一個資源庫：nodejs-bower
3). 本地工程綁定github

~ D:\workspace\javascript\nodejs-bower>git init
Initialized empty Git repository in D:/workspace/javascript/nodejs-bower/.git/

~ D:\workspace\javascript\nodejs-bower>git add .
~ D:\workspace\javascript\nodejs-bower>git commit -m "first commit"
# On branch master
#
# Initial commit
#
# Untracked files:
#   (use "git add ..." to include in what will be committed)
#
#       app.js
#       bower.json
#       bower_components/
#       node_modules/
#       package.json
#       public/
#       routes/
#       views/
nothing added to commit but untracked files present (use "git add" to track)

~ D:\workspace\javascript\nodejs-bower>git remote add origin https://github.com/bsspirit/nodejs-bower

~ D:\workspace\javascript\nodejs-bower>git push -u origin master
Counting objects: 565, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (516/516), done.
Writing objects: 100% (565/565), 803.08 KiB, done.
Total 565 (delta 26), reused 0 (delta 0)
To https://github.com/bsspirit/nodejs-bower
 * [new branch]      master -> master
Branch master set up to track remote branch master from origin.

4). 註冊到bower官方類庫

~ D:\workspace\javascript\nodejs-bower>bower register nodejs-bower git@github.com:bsspirit/nodejs-bower.git
bower                          convert Converted git@github.com:bsspirit/nodejs-bower.git to git://github.com/bsspirit/n
odejs-bower.git
bower nodejs-bower#*           resolve git://github.com/bsspirit/nodejs-bower.git#*
bower nodejs-bower#*          checkout master
bower nodejs-bower#*          resolved git://github.com/bsspirit/nodejs-bower.git#af3ceaac07
Registering a package will make it visible and installable via the registry (https://bower.herokuapp.com), continue? (y/
n)                    y
bower nodejs-bower            register git://github.com/bsspirit/nodejs-bower.git

Package nodejs-bower registered successfully!
All valid semver tags on git://github.com/bsspirit/nodejs-bower.git will be available as versions.
To publish a new version, you just need release a valid semver tag.

Run bower info nodejs-bower to list the package versions.

5). 查詢咱們本身的包

D:\workspace\javascript\nodejs-bower>bower search nodejs-bower
Search results:

    nodejs-bower git://github.com/bsspirit/nodejs-bower.git

6). 安裝咱們本身的包

D:\workspace\javascript\nodejs-bower>bower install nodejs-bower
bower nodejs-bower#*            cached git://github.com/bsspirit/nodejs-bower.git#af3ceaac07
bower nodejs-bower#*          validate af3ceaac07 against git://github.com/bsspirit/nodejs-bower.git#*
bower nodejs-bower#*           install nodejs-bower#af3ceaac07

nodejs-bower#af3ceaac07 bower_components\nodejs-bower
├── d3#3.2.8
└── jquery#2.0.3

其實模塊化，版本依賴，開發類庫，發佈類庫，安裝類庫，都是一條命令！還能再簡單一點麼！快把項目模塊化，而後分享給你們吧！！將來是屬於開發者的。

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