前端js依赖管理（bower）

最新推荐文章于 2024-03-29 21:16:26 发布

nights07

最新推荐文章于 2024-03-29 21:16:26 发布

阅读量973

点赞数

分类专栏： JS 文章标签： JS bower

本文链接：https://blog.csdn.net/nights07/article/details/103611341

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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:\> bowerhelp
 
Usage:
 
    bower <command> [<args>] [<options>]
Commands:
 
    cache                  Managebowercache
    help                    DisplayhelpinformationaboutBower
    home                    Opens a package homepageintoyourfavoritebrowser
    info                    Infoof a particularpackage
    init                    Interactivelycreate a bower.jsonfile
    install                Install a package locally
    link                    Symlink a package folder
    list                    Listlocalpackages - and possibleupdates
    login                  AuthenticatewithGitHuband storecredentials
    lookup                  Lookup a package URLbyname
    prune                  Removeslocalextraneouspackages
    register                Register a package
    search                  Searchfor a package byname
    update                  Update a localpackage
    uninstall              Remove a localpackage
    unregister              Remove a package fromtheregistry
    version                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.git
    bootstrap-bo https://github.com/brentoneill/bootstrap.git
    x-bootstrap https://github.com/x-element/x-bootstrap.git
    bootstrap-2 https://github.com/twbs/bootstrap.git
    bootstrap-box https://github.com/jesus-chacon/bootstrap-flexbox.git
    bootstrap-gap https://github.com/evangraaff/bootstrap-gap.git
    boost-bootstrap https://github.com/cristiangrojas/boost-bootstrap.git
    ab-bootstrap https://github.com/allblue-pl/bower_ab-bootstrap.git
    mk-bootstrap https://github.com/geometrybase/mk-bootstrap.git
    hg-bootstrap https://github.com/HackerGaucho/hg-bootstrap.git
    bootstrap.ui https://github.com/visionappscz/bootstrap-ui.git
    cd-bootstrap https://github.com/jairorudas/cd-bootstrap.git
    dd-bootstrap https://github.com/DeloitteDigitalUK/DDBootstrap.git
    bootstrap-pi https://github.com/guilhermegeek/bootstrap-pi.git
    nr-bootstrap https://github.com/artbelov/nr-bootstrap.git
    qk-bootstrap https://github.com/fran150/qk-bootstrap.git
    bootstrap-cc https://github.com/chibicode/bootstrap-cc.git
    bootstrap-ie https://github.com/ddouble/bsie.git
    bootstrap-ui https://github.com/angular-ui/bootstrap.git
    ui.bootstrap https://github.com/angular-ui/bootstrap.git
    ng-bootstrap https://github.com/ifgroup/ng-bootstrap.git
    ui-bootstrap https://github.com/angular-ui/bootstrap.git
    bem-bootstrap https://github.com/matmuchrapna/bem-bootstrap.git
    bootstrap-tl https://github.com/tomatolabs/bootstrap.git
    bootstrap-dv https://github.com/JKAussieSkater/Bootstrap-DV.git
    bootstrapp https://github.com/xmert/shiny-octo-parakeet.git
    bootstrap4 https://github.com/twbs/bootstrap.git
    xui-bootstrap https://github.com/spxis/xui-bootstrap.git
    ng2-bootstrap https://github.com/valor-software/ng2-bootstrap.git
    bootstrap.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 如果线上已有重名，则提交失败

nights07

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端js依赖管理（bower）

Bower 是 twitter 推出的一款包管理工具，基于nodejs的模块化思想，把功能分散到各个模块中，让模块和模块之间存在联系，通过 Bower 来管理模块间的这种联系。“包”是指一系列有意义的资源的集合，在bower这里，更多体现在json文件，它是这些资源的配置文件，一个完整的包都应该有一个bower.json文件。 “管理”包含获取，下载，安装，更新，查找,注册等等一系列对资源的...
复制链接

扫一扫