[譯] 第一天：Bower - 管理你的客戶端依賴關係

時間  2019-11-21
標籤 第一天 bower 管理 客戶端 依賴 關係 欄目 設計模式 简体版
原文   原文鏈接

前言

      我很興奮的宣佈，我已經開始個人我的挑戰，一個月內天天學習一項新技術而且用blog記錄。我也會嘗試作一些小錄製。天天用工做以外，我將花幾個小時學習新技術，花一個小時記錄我所學。此次挑戰的目的是熟悉圈裏的新技術。我主要關注在JavaScript和相關技術上，可是也包括Java等其餘技術。有些技術我可能會花幾天，不過每次會挑新的主題。無論意義何在，我都會用OpenShift來展現它怎樣實現的。我但願這既有趣又是好的學習體驗，祝福我吧！javascript

第一章，我決定學習Bower.css

什麼是Bower?

        Bower 是一個對客戶端技術的包管理工具。能夠用於搜索，安裝，卸載Web包，如JavaScript,HTML,CSS.它是一個很靈活的工具，爲開發者提供了不少選擇。還有一些工具是基於Bower建立的如YeoMan,Grunt.這些將在後面幾章討論。html

爲何關注Bower？ 

1。節約時間：

    首先我選擇學習Bower的緣由是它會在我試圖搜索客戶端依賴關係時節約時間。每次當我要用jQuery時，我必須去jQuery網站要麼下載安裝包要麼使用CDN加載。可是若是用Bower，你能夠只用運行command就能夠在你本地安裝jQuery了。你也沒必要記住版本號。你可使用Bower command查找任何幫助信息。java

2。脫機工做：

   Bower在你本地主目錄建立了一個 .bower的文件夾，當你安裝一個包時，它會把全部配置文件都下載到文件夾裏，這樣你能夠脫機使用。若是你對Java熟悉，Bower就像Maven的*.m2*倉庫。每次你下載倉庫的時候它都會在兩個文件夾下安裝Libraay, 一個在你的程序文件夾，一個在主目錄的.bower下，這樣，下次你須要用到倉庫的時候它就直接從.bower下提取。node

3。便捷表示包依賴：

你能夠爲你的包依賴建立一個bower.json的文件，任什麼時候候你想知道你所用的libraries時均可以經過這個找到。jquery

4。更新方便：

假設一個library發佈了重要的安全更新，爲了安裝這個更新，你只須要運行command和bower就能夠了。git

前提準備

在裝bower前你須要先安裝：github

1. Node：

   下載最新的node.js http://nodejs.org/npm

2. NPM:

   NPM是Nodejs的包管理器。和Nodejs安裝時綁定。就是說要是你安裝了Node你就會有NPM.json

3. Git:

   你須要安裝Git,由於有些須要從Git獲取代碼包。因此，裝吧。

安裝Bower

準備工做作好後你就能夠安裝Bower了，安裝命令以下：

$ npm install -g bower

以上方式是全局安裝，-g表示全局。

開始使用Bower

當你裝完Bower，就可使用command了。看看bower能作些什麼，運行help command，顯示以下：

$ bower help
Usage:
 
    bower <command> [<args>] [<options>]
 
Commands:
 
    cache                   Manage bower cache
    help                    Display help information about Bower
    home                    Opens a package homepage into your favorite browser
    info                    Info of a particular package
    init                    Interactively create a bower.json file
    install                 Install a package locally
    link                    Symlink a package folder
    list                    List local packages
    lookup                  Look up a package URL by name
    prune                   Removes local extraneous packages
    register                Register a package
    search                  Search for a package by name
    update                  Update a local package
    uninstall               Remove a local package
 
Options:
 
    -f, --force             Makes various commands more forceful
    -j, --json              Output consumable JSON
    -l, --log-level         What level of logs to report
    -o, --offline           Do not hit the network
    -q, --quiet             Only output important information
    -s, --silent            Do not output anything, besides errors
    -V, --verbose           Makes output more verbose
    --allow-root            Allows running commands as root

安裝包

     Bower是一個包管理工具，當咱們想在程序中用新包的時候能夠用它來安裝。例如，咱們來看看bower是怎樣安裝JQuery的吧。在你的機器上新建一個文件夾，運行以下：

$ bower install jquery

    運行完你會有一個bower_components的文件夾，內容包括以下：

$ tree bower_components/
bower_components/
└── jquery
    ├── README.md
    ├── bower.json
    ├── component.json
    ├── composer.json
    ├── jquery-migrate.js
    ├── jquery-migrate.min.js
    ├── jquery.js
    ├── jquery.min.js
    ├── jquery.min.map
    └── package.json
 

1 directory, 10 files

使用包

    如今咱們能夠在程序中使用Jquery了，試着用它新建一個HTML5文件。

<!doctype html>
<html>
<head>
    <title>Learning Bower</title>
</head>
<body>
 
<button>Animate Me!!</button>
<div style="background:red;height:100px;width:100px;position:absolute;">
</div>
 
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript">
 
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({left:'250px'});
        });
    });
</script>
</body>
</html>

   從這你能夠看出，你只須要引用jqery.min.js的地址就能夠了.

列出全部包

   你能夠用list查看你安裝了的全部包：

$ bower list
bower check-new     Checking for new versions of the project dependencies..
blog /Users/shekhargulati/day1/blog
└── jquery#2.0.3 extraneous

搜索包

   假設你想在你的程序中使用Twitter Bootstrap可是你又不肯定包的名字，爲了找到這個名字你能夠用search：

$ bower search bootstrap
Search results:
 
    bootstrap git://github.com/twbs/bootstrap.git
    angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git

    sass-bootstrap git://github.com/jlong/sass-twitter-bootstrap.git

包信息

  若是你想知道一個特定的包的信息，能夠用info獲得：

$ bower info bootstrap
bower bootstrap#*           not-cached git://github.com/twbs/bootstrap.git#*
bower bootstrap#*              resolve git://github.com/twbs/bootstrap.git#*
bower bootstrap#*             download https://github.com/twbs/bootstrap/archive/v3.0.0.tar.gz
bower bootstrap#*              extract archive.tar.gz
bower bootstrap#*             resolved git://github.com/twbs/bootstrap.git#3.0.0
 
{
  name: 'bootstrap',
  version: '3.0.0',
  main: [
    './dist/js/bootstrap.js',
    './dist/css/bootstrap.css'
  ],
  ignore: [
    '**/.*'
  ],
  dependencies: {
    jquery: '>= 1.9.0'
  },
  homepage: 'https://github.com/twbs/bootstrap'
}
 
Available versions:
  - 3.0.0
  - 3.0.0-rc1
  - 3.0.0-rc.2
  - 2.3.2
 .....

   若是隻想要其中一個包的信息，能夠像以下使用info：

$ bower info bootstrap#3.0.0
bower bootstrap#3.0.0           cached git://github.com/twbs/bootstrap.git#3.0.0
bower bootstrap#3.0.0         validate 3.0.0 against git://github.com/twbs/bootstrap.git#3.0.0
 
{
  name: 'bootstrap',
  version: '3.0.0',
  main: [
    './dist/js/bootstrap.js',
    './dist/css/bootstrap.css'
  ],
  ignore: [
    '**/.*'
  ],
  dependencies: {
    jquery: '>= 1.9.0'
  },
  homepage: 'https://github.com/twbs/bootstrap'

}

卸載包

   咱們能夠用bower.json來更簡單的安裝包。你能夠在程序根目錄下新建一個bower.json的文件夾再指定它的依賴關係。用 init 建立以下：

$ bower init
[?] name: blog
[?] version: 0.0.1
[?] description:
[?] main file:
[?] keywords:
[?] authors: Shekhar Gulati <shekhargulati84@gmail.com>
[?] license: MIT
[?] homepage:
[?] 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: 'blog',
  version: '0.0.1',
  authors: [
    'Shekhar Gulati <shekhargulati84@gmail.com>'
  ],
  license: 'MIT',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ],
  dependencies: {
    jquery: '~2.0.3'
  }
}
 
[?] Looks good? Yes

     能夠查看bower.json文件

{
  "name": "blog",
  "version": "0.0.1",
  "authors": [
    "Shekhar Gulati <shekhargulati84@gmail.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.0.3"
  }
}

   你會注意到它是加在jQuery依賴關係中。

 

   如今假設咱們也想用twitter bootstrap. 咱們能夠安裝bootstrap 更新bower.json, 使用以下：

$ bower install bootstrap --save

  它會安裝最新的bootstrap,也會更新bower.json:

{
  "name": "blog",
  "version": "0.0.1",
  "authors": [
    "Shekhar Gulati <shekhargulati84@gmail.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.0.3",
    "bootstrap": "~3.0.0"
  }
}

 

   這就是第一天的！但願能讓你對bower有足夠的瞭解，能夠本身試試！

 

原文：https://www.openshift.com/blogs/day-1-bower-manage-your-client-side-dependencies

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