bower使用小记

作者: 这个名字成么 | 来源:发表于2016-10-09 01:00 被阅读379次

    什么是bower

    Bower —— A package manager for the web
    bower是前端包管理工具。我个人认为就是管理前端所依赖的库的管理工具。当一个项目用到多种库时,管理会出现有些麻烦。

    包的概念

    当安装多个包时,会将这些资源的配置文件写在bower.json中。

    安装bower

    首先确定你的系统安装了nodejs.之后就可以用npm(n是专门管理node模块的管理工具,而bower是node的模块)包管理工具下载并

    //全局安装bower:
    npm install -g bower
    //全局安装Bower后,可以查看Bower的帮助信息,使用命令:
    bower help

    bower的使用

    注:bower下载安装依赖库实际上是使用git进行下载。对于linux系统,由于默认都有安装git,所以一般没问题。但是windows系统一般没有git。在windows系统下需要确定安装了git客户端,建议使用同捆的git bash命令行来执行bower install命令。或者把git目录加入windows的环境变量中,再在命令行中执行bower install命令。
    使用bower安装某个特定类库,例如jquery:

    bower install jquery

    执行完每一条命令后,bower都会自动下载对应库文件bower_commponts/目录

    bower install jquery-ui#1.10.1

    上面的命令指定安装jquery-ui的1.10.1版。
    如果某个库依赖另一个库,安装时默认将所依赖的库一起安装。比如,jquery-ui依赖jquery,安装时会连jquery一起安装。
    安装后的库默认存放在项目的bower_components子目录,如果要指定其他位置,可在.bowerrc文件的directory属性设置。
    { "directory" : "public/components"}

    bower install jquery --save

    然后bower就会从远程下载jquery最新版本到你的js/lib目录下其中--save参数是保存配置到你的bower.json.

    Bower 可使用如下几种方式下载文件
    #已经注册的包,使用简单即可

    bower install jquery

    #GitHub上的项目,使用名称即可
    

    bower install desandro/masonry

    #GitHub上的项目
    

    bower install git://github.com/......

    #直接通过URL下载
    

    bower install (网址)

    使用bower更新某个特定类库,例如jquery:

    bower update jquery

    删除包,例如jquery (如果包已经被依赖,则不能删除)

    bower uninstall jquery

    更多的命令请用help查看。

    bower help

    维护依赖

    使用

    bower install package --save

    能够将包安装到你的项目中,同时将依赖关系写入到bower.json
    的 dependencies数组。
    同理,使用

    bower install package --save-dev

    可以将包写入到 bower.json 的 devDependencies数组。

    bower初始化

    bower init

    会提示你输入一些基本信息,根据提示按回车或者空格即可,然后会生成一个bower.json文件,用来保存该项目的配置,如下:
    (未完成)
    bower.json 的规范中的选项,主要包括:
    name
    包名,必选。
    version
    有意义的版本号。
    main
    字符串或者数组,指定主要会用到包里面哪些文件。
    ignore
    数组,一系列文件名或者目录,告诉bower在安装包的时候忽略指定的内容。
    keywords
    字符串数组,推荐添加,主要是帮助用户能够搜索到你的包。
    dependencies
    哈希结构,依赖的包,可以指定版本号,版本号范围参考
    devDependencies
    哈希结构,生产环境下依赖的包,版本号范围参考
    private
    布尔值,设置为true代表你想保持私有,并且将来不会发布它。

    包的信息

    比如我们想要查找jquery都有哪些个版本,输入如下命令:

    bower info jquery

    会看到jquery的bower.json的信息,和可用的版本信息可以看到jquery最新的兼容版版本为1.11.3

    包的更新

    上面安装的是最新版的高版本jquery,假如想要兼容低版本浏览器的呢?已经查到兼容低版本浏览器的jquery版本为1.11.3,下面直接修改bower.json文件中的jquery版本号如下:

    "dependencies": { "jquery": "~1.11.3" }

    然后执行如下命令:

    bower update

    bower
    就会为你切换jquery的版本了

    包的查找

    还有一个很重要的功能,就是包的查找,比如我想要安bootstrap的某个插件,但是记不住名字了,就可以直接在命令行输入:

    bower search bootstrap

    bower就会列出包含字符串bootstrap的可用包了

    包的卸载

    卸载包可以使用uninstall 命令:

    bower uninstall jquery

    bower install bootstrap
    bower会自动从github上down最新的代码,而且,会自动将依赖包jquery也下载进来。

    指定版本:
    bower install jquery#1.7.2
    bower install bootstrap#3.3.5 --save

    多版本共存:
    同时安装一个package的不同版本(多版本共存), 比如安装jquery v1.7.0,并且安装v1.9.1以及最新版本的jquery(目前是2.1.1), 像下面这样安装完成后,你的bower_components目录下就会同时存在jquery-older目录(1.7.0), jquery-old目录(1.9.1), jquery目录(最新版)。
    安装jquery v1.7.0bower install jquery-older=juqery#1.7.0 [<options>]
    安装jquery v1.9.0bower install jquery-old=juqery#1.9.1 [<options>]
    安装最新版jquerybower install jquery [<options>]

    bower常用命令

    cache:bower缓存管理
    help:显示Bower命令的帮助信息
    home:通过浏览器打开一个包的github发布页
    info:查看包的信息
    init:创建bower.json文件
    install:安装包到项目
    link:在本地bower库建立一个项目链接
    list:列出项目已经安装的包
    lookup:根据包名查询包的URL
    prune:删除项目无关的包
    register:注册一个包
    search:搜索项目的包
    update:更新项目的包
    uninstall:删除项目的包

    参考[https://segmentfault.com/a/1190000000349555]

    相关文章

      网友评论

        本文标题:bower使用小记

        本文链接:https://www.haomeiwen.com/subject/cxrpyttx.html