bower笔记

安装bower

npm install --save-dev bower

自定义bower下载的代码包的目录

  1. 创建文件.bowerrc
  2. 输入内容 - 所有包安装在此目录下
{
    "directory": "src/libraries"
}

bower初始化包信息

bower init

第三方包安装

命令行安装

  1. 安装已经注册的包
    参数--save 代表把包信息添加到依赖属性当中
    install package and add it to bower.json dependencies 
$ bower install <package> --save
  1. install package and add it to bower.json devDependencies 
$ bower install <package> --save-dev
  1. 安装未注册过的包 - 指定包路径 
bower install <package name> <host-url>
bower install <host-url>
  1. 在bower.json中添加包信息, 运行bower install
  "dependencies": {
    "jquery": "^3.2.1",
    "angular": "angularjs#^1.6.8",
    "d3": "git://github.com/mbostock/d3.git#~3.2.8",
  }

包的依赖关系

前提: 假设我们两个项目
platform： 管理我们常用的包和自己开发的包
ui: 前端产品，要使用platform中管理的包

platform bower.json

{
    "name": "ui-platform",
    "dependencies": {
        "jquery": "^3.2.1",
        "bootstrap": "^3.3.7",
        "lodash": "^4.17.4"
    }
}

ui bower.json

{
    "name": "ui-ui",
    "dependencies": {
        "ui-platform": "https://gitee.com/jjyyddss/ui-platform.git#",
        "angular": "angularjs#^1.6.8",
        "d3": "git://github.com/mbostock/d3.git#~3.2.8",
        "benchmark":"https://github.com/bestiejs/benchmark.js.git#^2.1.4"

    },
    "resolutions": { //如果包的版本有冲突，这是最终选择的版本
        "jquery": "^3.2.1",
        "bootstrap": "^3.3.6"
    }
}

说明

包的依赖有写法有三种 - 都是放在git下的，其它版本控制工具暂且不包括在内

  1. "jquery": "^3.2.1" 这种包已经在bower官网注册了， 包的名字和host-url 有map关系， 所以只要规定版本就行了
  2. "benchmark":"https://github.com/bestiejs/benchmark.js.git#^2.1.4"， 包名没有在官网注册. 即加了host url并且在后面加入了tag信息(版本信息)
  3. "ui-platform": "https://gitee.com/jjyyddss/ui-platform.git#" 只有host url, 没有版本信息，就安装最新的版本

包的基本操作命令

包的信息

bower info jquery

包的更新

bower update

包的查找

bower search bootstrap

包的卸载

bower uninstall jquery

包缓存清理

bower cache clean

包的注册

  1. bower register my-ui-platform https://gitee.com/jjyyddss/ui-platform.git
  2. 包名最好是bower.json 名字属性
  3. 包的源码在git上应该有版本tag
  4. 注册基本原理就是在官网将包名和源码的url做一个map关系
  5. 输入bower info <包名#版本号> 能列出当前版本bower.json信息
  6. 输入bower info <包名>能列出所有包的版本信息， 方便安装