Bower 是 twitter 推出的一款包管理工具，基于nodejs的模块化思想，把功能分散到各个模块中，让模块和模块之间存在联系，通过 Bower 来管理模块间的这种联系。

“包”是指一系列有意义的资源的集合，在bower这里，更多体现在json文件，它是这些资源的配置文件，一个完整的包都应该有一个bower.json文件。
“管理”包含获取，下载，安装，更新，查找,注册等等一系列对资源的操作。

npm是专门管理node模块的管理工具，而bower是node的模块，因为bower是依赖node，npm和git。正如前面所言，npm是擅长的是管理node模块，而bower管理的范围更大，涉及html,css,js和图片等媒体资源。或许，这也是人们喜欢在服务器端使用npm,而在客户端使用bower。

关于Bower 的原理就不细说，官网（https://bower.io/）上一大堆

安装

在node.js安装后在命令行下执行

npm install -g bower

执行完毕后验证安装

bower -version

升级版本

npm update -g bower

卸载

npm uninstall --global bower

使用

查看帮助

bower help

显示帮助内容说明

PS D:\> bowerhelpUsage:bower <command> [<args>] [<options>]
Commands:cache                  Managebowercachehelp                    DisplayhelpinformationaboutBowerhome                    Opens a package homepageintoyourfavoritebrowserinfo                    Infoof a particularpackageinit                    Interactivelycreate a bower.jsonfileinstall                Install a package locallylink                    Symlink a package folderlist                    Listlocalpackages - and possibleupdateslogin                  AuthenticatewithGitHuband storecredentialslookup                  Lookup a package URLbynameprune                  Removeslocalextraneouspackagesregister                Register a packagesearch                  Searchfor a package bynameupdate                  Update a localpackageuninstall              Remove a localpackageunregister              Remove a package fromtheregistryversion                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 提供的命令：

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

下面说说几个常用的命令

bower install 安装依赖包

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

.bowerrc 文件格式示例

{"directory": "public/assets/libs","ignoredDependencies": ["es6-promise","file-saver","html2canvas","jspdf","jspdf-autotable"]
}

Bower使用包的名字去在线索引中搜索该包的网址 — bower.com。某些情况下，如果一个库很新（或者你不想使用默认网址），可能需要我们手动指定该库的网址。指定的网址可以是 github 地址、http 网址、本地文件。

bower install git://github.com/xxxxxx.git  // git地址
bower install http://xxxxxx.com/xxxx-min.js  // http地址
bower install ./a/b/xxxx.js   // 本地地址

比如常见的jquery安装

bower install jquery

该命令默认在bower.com搜索安装最新版本的jquery, 也可以指定版本安卓

bower install jquery#1.10.1

如果某个库依赖另一个库，安装时默认将所依赖的库一起安装。Bower会根据该库的 bower.json 文件下的 dependencies 配置自动给你安装指定依赖库的指定版本。比如，jquery-ui依赖jquery，安装时会连jquery一起安装。

bower search 包搜索

如果你要引入莫个依赖，但不知道完整的名字，可以进行搜索

E:\workspace>bower search bootstrap
Search results:bootstrap https://github.com/twbs/bootstrap.gitbootstrap-bo https://github.com/brentoneill/bootstrap.gitx-bootstrap https://github.com/x-element/x-bootstrap.gitbootstrap-2 https://github.com/twbs/bootstrap.gitbootstrap-box https://github.com/jesus-chacon/bootstrap-flexbox.gitbootstrap-gap https://github.com/evangraaff/bootstrap-gap.gitboost-bootstrap https://github.com/cristiangrojas/boost-bootstrap.gitab-bootstrap https://github.com/allblue-pl/bower_ab-bootstrap.gitmk-bootstrap https://github.com/geometrybase/mk-bootstrap.githg-bootstrap https://github.com/HackerGaucho/hg-bootstrap.gitbootstrap.ui https://github.com/visionappscz/bootstrap-ui.gitcd-bootstrap https://github.com/jairorudas/cd-bootstrap.gitdd-bootstrap https://github.com/DeloitteDigitalUK/DDBootstrap.gitbootstrap-pi https://github.com/guilhermegeek/bootstrap-pi.gitnr-bootstrap https://github.com/artbelov/nr-bootstrap.gitqk-bootstrap https://github.com/fran150/qk-bootstrap.gitbootstrap-cc https://github.com/chibicode/bootstrap-cc.gitbootstrap-ie https://github.com/ddouble/bsie.gitbootstrap-ui https://github.com/angular-ui/bootstrap.gitui.bootstrap https://github.com/angular-ui/bootstrap.gitng-bootstrap https://github.com/ifgroup/ng-bootstrap.gitui-bootstrap https://github.com/angular-ui/bootstrap.gitbem-bootstrap https://github.com/matmuchrapna/bem-bootstrap.gitbootstrap-tl https://github.com/tomatolabs/bootstrap.gitbootstrap-dv https://github.com/JKAussieSkater/Bootstrap-DV.gitbootstrapp https://github.com/xmert/shiny-octo-parakeet.gitbootstrap4 https://github.com/twbs/bootstrap.gitxui-bootstrap https://github.com/spxis/xui-bootstrap.gitng2-bootstrap https://github.com/valor-software/ng2-bootstrap.gitbootstrap.css https://github.com/bowerjs/bootstrap.git

bower info 查看包信息包大小


E:\workspace\idea\php\zfish-web>bower info bootstrap-table#1.15.5
bower cached        https://github.com/wenzhixin/bootstrap-table.git#1.15.5
bower validate      1.15.5 against https://github.com/wenzhixin/bootstrap-table.
git#1.15.5{name: 'bootstrap-table',homepage: 'https://github.com/wenzhixin/bootstrap-table',authors: ['zhixin <wenzhixin2010@gmail.com>'],description: 'An extended table to integration with some of the most widely us
ed CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Fou
ndation)',main: ['dist/bootstrap-table.min.js','dist/bootstrap-table.min.css'],keywords: ['bootstrap','table','pagination','checkbox','radio','datatables','css','css-framework','semantic','semantic-ui','bulma','material','material-design','materialize','foundation'],license: 'MIT',ignore: ['**/.*','node_modules','bower_components','site'],version: '1.15.5'
}

bower update更新

包更新到最新版本

bower update jquery

bower uninstall卸载

bower uninstall jquery

bower cache clean安装失败清除缓存

bower cache clean

bower init 创建bower.json


E:\workspace\idea\php>bower init
? name php
? description
? main file
? keywords
? authors luke.c <luke.c@mechanist.co>
? 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 ac
cidentally published to the registry? No{name: 'php',authors: ['luke.c <luke.c@mechanist.co>'],description: '',main: '',license: 'MIT',homepage: '',ignore: ['**/.*','node_modules','bower_components','test','tests']
}? Looks good? Yes

文件配置说明

.bowerrc

{"directory" : "components",  // 存放库文件的子目录名。（可不需要该属性，默认执行目录下）"json"      : "bower.json",    //描述各个库的json文件名。 （可不需要该属性，默认bower.json）"endpoint"  : "https://Bower.herokuapp.com", // 在线索引的网址，用来搜索各种库 （可不需要该属性, 默认：bower.com）"searchpath"  : "", // 一个数组，储存备选的在线索引网址。如果某个库在endpoint中找不到，则继续搜索该属性指定的网址，通常用于放置某些不公开的库。（可不需要该属性）"shorthand_resolver" : "" // 定义各个库名称简写形式。（可不需要该属性）"ignoredDependencies":["es6-promise","file-saver","html2canvas","jspdf","jspdf-autotable"]   // 跳出安装以上依赖，需自己手动一个个安装（用于处理一些兼容冲突）（可不需要该属性）
}

bower.json

bower.json文件的使用可以让包的安装更容易，你可以在应用程序的根目录下创建一个名为“bower.json”的文件，并定义它的依赖关系。bower.json的作用是：

保存项目的库信息，供项目二次安装时使用（重复使用）
向com 提交你的库时，该网站会读取 bower.json，列入在线索引。

其中dependencies 记录着生产环境依赖的库；devDependencies 记录着开发时依赖的 node package。其版本规则见 npm 的version rules。

使用bower init 命令可以来创建bower.json文件，它会自动提示你输入一系列的内容，以生成最终的文件，包括项目名称、作者信息、项目描述信息、关键词、开源证书等等。

{"name": "php","authors": ["xxx"],"description": "xxxx","main": "","license": "Apache2.0","homepage": "http://xxxx","private": true,"dependencies": {  // 生产环境中的依赖包"jquery": "^2.1.4","bootstrap": "^3.4.1","font-awesome": "^4.6.1","bootstrap-table": "fastadmin-bootstraptable#~1.11.3","jstree": "~3.3.2","moment": "^2.20.1","plupload": "~2.2.0","toastr": "~2.1.3","jcrop": "~2.0.4","eonasdan-bootstrap-datetimepicker": "~4.17.43","bootstrap-select": "~1.11.2","require-css": "~0.1.8","less": "~2.7.1","tableExport.jquery.plugin": "~1.10.3","jquery-slimscroll": "~1.3.8","jquery.cookie": "~1.4.1","Sortable": "~1.10.0","nice-validator": "~1.1.1","art-template": "^3.1.3","requirejs-plugins": "~1.0.3","bootstrap-daterangepicker": "~2.1.25","bootstrap-slider": "*"}, "devDependencies":[],    // 开发环境中的依赖包"ignore": [   // 排除"**/.*","node_modules","bower_components","test","tests"]
}

也可以使用命令行来为bower.json增加依赖（到bower.json对应目录下执行）

bower install jquery --save         //添加到dependencies
bower install angular --save-dev        //添加到devDependencies

发布到bower.com

可以注册自己的包，这样其他人也可以使用了，这个操作只是在服务器上保存了一个映射，服务器本身不托管代码

bower register <my-package-name> <git-endpoint>
// 示例 bower register jquery git://github.com/jquery/jquery 如果线上已有重名，则提交失败

前端js依赖管理（bower）相关推荐

90.bower解决js的依赖管理
转自:https://blog.csdn.net/u011537073/article/details/52951122 前言一个新的web项目开始,我们总是很自然地去下载需要用到的js类库文件,比 ...
bower解决js的依赖管理
为什么80%的码农都做不了架构师?>>> 1. bower介绍 Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模 ...
ASP.NET Core 静态文件及JS包管理器（npm, Bower）的使用
在 ASP.NET Core 中添加静态文件虽然ASP.NET主要大都做着后端的事情,但前端的一些静态文件也是很重要的.在ASP.NET Core中要启用静态文件,需要Microsoft.AspNe ...
前端工程化系列[01]-Bower包管理工具的使用
本文主要介绍前端开发中常用的包管理工具Bower,具体包括Bower的基本情况.安装.使用和常见命令等内容,最后还介绍了依赖树管理的常见方式以及Bower采用的策略并进行了比较. 1.1 关于Bowe ...
关于依赖管理的真相 — 前端包管理器探究
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群前言 npm是Node.JS的包管理工具,除此之外,社区有一些类似的包管理工具如yarn.p ...
前端包管理器的依赖管理原理
本文主要探究前端包管理器的依赖管理原理,希望对读者有所帮助. 前言 npm是Node.JS的包管理工具,除此之外,社区有一些类似的包管理工具如yarn.pnpm和cnpm,以及集团内部使用的tnpm. ...
90%的人都不知道的Node.js 依赖关系管理（上）
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 引言 Node.js中的一个重要概念是依赖关系管理.本文就将带大家了解依赖管理的各种模式以及Node.js如 ...
如何使用NPM来管理你的Node.js依赖
作者马士华发布于 2011年12月7日 | 4 讨论 npm 是 Node.js 的模块依赖管理工具.作为开发者使用的工具,主要解决开发 Node.js 时会遇到的问题.如同 RubyGems 对 ...
前端 js实现模糊搜索
前端 js实现模糊搜索 template <input type="text" v-model="keyWord" @input="fuzzyQ ...

前端js依赖管理（bower）

安装

使用