zoukankan      html  css  js  c++  java
  • 包管理器Bower

    今天自己用Angular写东西的时候,下载了Angular-seed项目,发现需要用到bower,之前也使用过,没有仔细了解,今天趁机了解到一些。

    bower的官网地址: http://bower.io/

    Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。它擅长前端的包管理,通过其API展示了包依赖模型。使得项目不存在系统级的依赖,不同的应用程序间也不会共享依赖,整个依赖树是扁平的。

    为什么使用Bower?摘自segmentfault

    1. 节省时间。为什么要学习Bower的第一个原因,就是它会为你节省寻找客户端的依赖关系的时间。每次我需要安装jQuery的时候,我都需要去jQuery网站下载包或使用CDN版本。但是有了Bower,你只需要输入一个命令,jquery就会安装在本地计算机上,你不需要去记版本号之类的东西,你也可以通过Bower的info命令去查看任意库的信息。

    2. 脱机工作。Bower会在用户主目录下创建一个.bower的文件夹,这个文件夹会下载所有的资源、并安装一个软件包使它们可以离线使用。如果你熟悉Java,Bower即是一个类似于现在流行的Maven构建系统的.m2仓库。每次你下载任何资源库都将被安装在两个文件夹中 —— 一个在的应用程序文件夹,另一个在用户主目录下的.bower文件夹。因此,下一次你需要这个仓库时,就会用那个用户主目录下.bower中的版本。

    3. 可以很容易地展现客户端的依赖关系。你可以创建一个名为bower.json的文件,在这个文件里你可以指定所有客户端的依赖关系,任何时候你需要弄清楚你正在使用哪些库,你可以参考这个文件。

    4. 让升级变得简单。假设某个库的新版本发布了一个重要的安全修补程序,为了安装新版本,你只需要运行一个命令,bower会自动更新所有有关新版本的依赖关系。

    Bower依赖于NodeJS和npm。可以使用npm全局安装Bower,-g 操作表示全局。

    npm install -g bower

    需要注意的是,Bower的运行,依赖于版本控制工具git,从github拉取以来信息。

    下面的命令可以更新或卸载Bower。

    npm update -g bower
    npm uninstall -global bower

    开始使用Bower

    安装完bower之后就可以使用所有的bower命令了。可以键入help 命令来查看bower可以完成那些操作,如下:

    bower help

    用法:

    bower <command> [<args>] [<options>]

    命令Commands:

        cache-clean       清除Bower的缓存,或清除指定包的缓存
        completion        Bower的Tab键自动完成
        help              显示Bower命令的辅助信息
        info              指定包的版本信息和描述
        init              交互式的创建bower.json文件
        install           安装一个本地的包
        link              包目录的符号连接
        list, ls          列出所有已安装的包
        lookup            根据包名查询包的URL
        register          注册一个包
        search            根据包名搜索一个包
        uninstall         删除一个包
        update            更新一个包

    选项:
        --no-color 关闭彩色输出(适合Bower的所有命令)

    还可以使用命令'bower help <command>'来查看Bower指定命令的详细信息。

    包的安装

     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

    Bower会使用库的名字,去在线索引中搜索该库的网址。某些情况下,如果一个库很新(或者你不想使用默认网址),可能需要我们手动指定该库的网址。

    bower install git://github.com/documentcloud/backbone.git
    bower install http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js
    bower install ./some/path/relative/to/this/directory/backbone.js

    上面的命令说明,指定的网址可以是github地址、http网址、本地文件。

    默认情况下,会安装该库的最新版本,但是也可以手动指定版本号。

    bower install jquery-ui#1.10.1

    上面的命令指定安装jquery-ui的1.10.1版。

    如果某个库依赖另一个库,安装时默认将所依赖的库一起安装。比如,jquery-ui依赖jquery,安装时会连jquery一起安装。

    安装后的库默认存放在项目的bower_components子目录,如果要指定其他位置,可在.bowerrc文件的directory属性设置。

    包的使用

    现在就可以在应用程序中使用jQuery包了,在jQuery里创建一个简单的html5文件:

    <!doctype html>
    <html>
    <head>
        <title>Learning Bower</title>
    </head>
    <body>
    
    <button>Animate Me!!</button>
    <div style="background:red;height:100px;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>

    正如你所看到的,你刚刚引用jquery.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'
    }

    包的卸载

    卸载包可以使用uninstall 命令:

    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'
    }

    包的卸载

    卸载包可以使用uninstall 命令:

    bower uninstall jquery

    配置文件.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 init 命令来创建bower.json文件:

    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

     可以查看该文件:

    {
      "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,我们可以用下面的命令安装twitter 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.json文件以后,就可以用bower install命令,一下子安装所有库。

    bower install

    根据bower.json文件,还可以向Bower的在线索引提交你的库。

    bower register <my-package-name> <git-endpoint>
    // 比如
    bower register jquery git://github.com/jquery/jquery

    注意,如果你的库与现有的库重名,就会提交失败,如果你的package-name是驼峰的,也会注册失败。

    注册bower库的例子,我注册了一个命名color的库,使用如下命令:

    bower register color-namer https://github.com/CraryPrimitiveMan/ColorNamer

    显示信息如下:

    bower convert       Converted https://github.com/CraryPrimitiveMan/ColorNamer to git://github.com/CraryPrimitiveMan/ColorNamer.git
    bower resolve       git://github.com/CraryPrimitiveMan/ColorNamer.git#*
    bower download      https://github.com/CraryPrimitiveMan/ColorNamer/archive/0.0.1.tar.gz
    bower progress      color-namer#* received 0.1MB
    bower progress      color-namer#* received 0.1MB
    bower progress      color-namer#* received 0.1MB
    bower progress      color-namer#* received 0.2MB
    bower progress      color-namer#* received 0.2MB
    bower progress      color-namer#* received 0.2MB
    bower progress      color-namer#* received 0.2MB
    bower progress      color-namer#* received 0.3MB
    bower extract       color-namer#* archive.tar.gz
    bower resolved      git://github.com/CraryPrimitiveMan/ColorNamer.git#0.0.1
    ? Registering a package will make it installable via the registry (https://bower? Registering a package will make it installable via the registry (https://bower.herokuapp.com), continue?: Yes
    bower register      git://github.com/CraryPrimitiveMan/ColorNamer.git
    
    Package color-namer registered successfully!
    All valid semver tags on git://github.com/CraryPrimitiveMan/ColorNamer.git will be available as versions.
    To publish a new version, just release a valid semver tag.
    
    Run bower info color-namer to list the available versions.

    可以用如下命令查看注册的bower库的信息

    bower info color-namer
    bower info color-namer#0.0.1

    这就是今天的学习,希望能让你对bower有个足够的了解,最好可以自己尝试一下。

    大部分内容摘自SegmentFault阮一峰博客

  • 相关阅读:
    Js事件触发列表与解说(转)
    HTTP 头部解释,HTTP 头部详细分析,最全HTTP头部信息
    【转】php 数组 编码转换
    Cookie 的规范介绍
    PHP底层的运行机制与原理
    PHP为什么会被认为是草根语言?
    asp.net中读取带有加号(+)的Cookie,会自动把加号替换为空格
    git克隆某个分支到本地指定的目录中
    yq(json,yaml)格式转换工具安装和使用
    k8s中configmap的作用及使用方式
  • 原文地址:https://www.cnblogs.com/CraryPrimitiveMan/p/3695518.html
Copyright © 2011-2022 走看看