Erik's Blog

Bower 使用指南

(更新于 )Build Tool#Bower

Bower 是由 Twitter 创建的一个前端包管理工具，帮助管理前端依赖，通过跟踪组成 Web 站点的框架、库和公共部分等，为前端包管理问题提供了一个优雅的、灵活的解决方案。

安装 Bower

安装 Bower 前需要安装 Node.js 和 Git 。

# install bower
npm i -g bower

通过 bower -v 验证 bower 是否安装成功。

配置文件

bower 有两种配置文件

.bowerrc

.bowerrc 是一个 JSON 格式的配置文件。所有 bower 配置项的优先级如下：

  • 通过 --config 指定的命令行参数
  • 环境变量
  • 当前工作目录的 .bowerrc 文件
  • 所有上级目录的 .bowerrc 文件
  • 用户目录 (~) 下的 .bowerrc
  • 根目录 (/) 下的 .bowerrc

.bowerrc 的配置项可以在 Bower configuration 找到，格式如下：

{
  "cwd": "~/.my-project",
  "directory": "bower_components",
  "registry": "https://bower.herokuapp.com",
  "shorthand-resolver": "git://github.com//.git",
  "proxy": "http://proxy.local",
  "https-proxy": "https://proxy.local",
  "ca": "/var/certificate.pem",
  "color": true,
  "timeout": 60000,
  "save": true,
  "save-exact": true,
  "strict-ssl": true,
  "storage": {
    "packages" : "~/.bower/packages",
    "registry" : "~/.bower/registry",
    "links" : "~/.bower/links"
  },
  "interactive": true,
  "resolvers": [
    "mercurial-bower-resolver"
  ],
  "shallowCloneHosts": [
    "myGitHost.example.com"
  ],
  "scripts": {
    "preinstall": "",
    "postinstall": "",
    "preuninstall": ""
  },
  "ignoredDependencies": [
    "jquery"
  ]
}

如何生成：bower init －> 配置bower.json的items

bower.json

bower.json 文件用来保存项目的依赖项。和 nodejs 的 package.json 文件、Ruby 的 gemfile 文件相似，包能被定义到 bower.json 文件中。

可以通过 bower init 命令创建一个 bower.json 文件。

使用 bower install 读取 bower.json 文件，下载公共库和组件

bower.json 文件各选项定义如下：

  • name(必填)：包的名称
  • version:语义性的版本号
  • main（字符串或者数组）:包的主要Git端点
  • ignore(数组)：在生产环境中，安装你的包时，Bower会忽略指定的路径
  • dependencies(hash结构) ：依赖的包，可以指定版本号
  • devDependencies ：开发时的依赖包
  • private ：true,保存包私有的，不会注册到git
{
  "name": "my-project",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<name>": "<version>",
    "<name>": "<folder>",
    "<name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

搜索包

你可以在 这里 搜索已注册的包，或者使用命令行工具：

bower search <package>

安装包

使用 bower install <package> 安装包，默认安装到 bower_components/ 文件夹中。

使用 bower install <package> --save 安装包时，会将包增加到你的项目的的 bower.json 文件中的 dependencies 配置项里。

# install package and add it to bower.json dependencies
bower install <package> --save

使用 bower install <package> --save-dev 将增加包到你的项目的 bower.json 文件中的 devDependencies 配置项中。

# install package and add it to bower.json devDependencies
bower install <package> --save-dev

bower 支持多种组件安装方式，可以是 bower.json 文件中的包、已注册的包、GitHub 短写、完整的 git 地址或一个 URL。

# installs the project dependencies listed in bower.json
bower install

# registered package
bower install jquery

# GitHub shorthand
bower install desandro/masonry

# Git endpoint
bower install git://github.com/user/package.git

# URL
bower install http://example.com/script.js

卸载包

可以从你的 bower_components 文件中卸载一个本地包。

bower uninstall <name> [<name> ..] [<options>]

uninstall 选项

  • -S,–save : 从项目的 bower.json 文件中移除卸载的包的依赖（更新dependencies）
  • -D,–save-dev : 从项目的 bower.json 文件中移除卸载的包的依赖（更新devDependencies）