由上篇《 Node.js 自动化工具 - YEOMAN 》接着开始研究另一个新的工具 Bower 。

我们在拥有脚手架之后，还需要什么来构建我们的项目呢？当然是需要一堆的框架，插件来帮助自己快速搭建，毕竟站在巨人的肩膀上才能看得更远！当这样的一堆东西引入到我们的项目中，带来工作的便利同时也带来一堆管理问题：版本、依赖、引入混乱、命名空间污染 ...

我们急需一个能够管理这些包的工具，Bower 就这样诞生了。打开它的官网 Bower 可以看到这样的一句话

bower-logo.png

A package manager for the web
一个应用于前端的包管理器

Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.
Bower能对前端框架，前端库，资源和 common代码进行管理

从上面的描述我们可以了解到 Bower 的具体功能，但开始学习前我被官网这样的一句话吓到：

...psst ! While Bower is maintained, we recommend yarn and webpack for new front-end projects !

不是吧，我都还没学你，你就推荐我用别的工具了？

webpack 前面介绍过一点，以后会具体讲解，yarn 大家可能不太清楚，它是由 Facebook 推出一款欲代替 npm 的工具，用过 npm 都知道，虽然它很好用但是

每次下载一个包都还对应下载一堆文件下来，输出非常冗余
安装的时候无法保证速度/一致性
安全问题，因为 npm 安装时允许运行代码
间歇性抽风 ╮(︶﹏︶")╭

这是由于它自身的底层设计思想决定的，不然我们直接用 npm 管理包就好啦，干嘛要用 Bower 。不仅是因为 Bower 更加简洁，更是因为 Bower 只是为前端服务的管理工具，比起 npm 的包罗万象，它专业对口呀！（Bower 是由 Twitter 的两个工程师研发的）

想了解更多的对比的可以看看张大侠这篇文章《我们为什么要从NPM切换到Yarn 》

当然除了我们前端，其他领域也是需要解决 npm 所带来的问题的嘛～
在硅谷 Fackbook 总部那间敞亮的办公室里，扎克伯格用着 npm 管理他的新项目，用着用着实在难以忍受，怒吼一声你们给我开发个新的管理工具出来！员工们心想 “ 不是吧，又要加班，不行，拉上别人一起死 ” 于是跟老板提出我们自己搞不定啊，不如叫上 Google, Exponent 和 Tilde 他们一起搞吧，于是硅谷又开始了一轮灯火通明的夜晚（以上纯属瞎掰）

当然来除了 Yarn ，npm 自己也开发 npm3 来解决这些问题，这两个我以后再研究。

罗哩叭嗦一通后，虽然不知道这个 Bower 维护要到什么时候（这句话挂在上面很久了，也传闻它将停止维护，不晓得是不是 Twitter 不景气都没精力维护 Bower 了），但是还是可以用的呀，所以我们正式开始学习吧~

安装 Bower

Bower是依赖于 node，npm 和 git；在安装前确保三个依赖，以保证安装过程不会出错。
在命令行中输入以下代码：

$ npm install -g bower

输入以下代码验证是否安装成功：

$ bower -v

当你看到输出版本号的时候表明安装成功了。

Install packages

类似于 node 建立的 package.json ，Bower 也是存在一个 bower.json 来管理你所需的包信息；
运行一下命令新建 bower.json 文件：

$ bower init

对的，他又出现一堆问题选择，跟 yoman 类似，这里我挑几点说明一下：

set currently installed components as dependencies?
是否将当前项目的已经存在的组件写入 bower.json 作为依赖性？

add commonly ignored files to ignore list?
是否添加一些一般都会忽略的包在你的忽略列表中？
would you like to mark this package as private which prevents it from being accidentally published to the registry?
您是否希望将这个包标记为私有，以防止它意外地发布到注册表中? （防止意外发布到 bower 的库中）
license
具体查看我这篇《七种开源许可证》

// 最终我们会得到的json文件
{
  "name": "Bower",
  "authors": [
    "Max.Law"
  ],
  "description": "demo",
  "main": "",
  "keywords": [
    "bower"
  ],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

详细的 bower.json 可以查看官方说明

现在我们以 jquery 为例，运行代码：

$ bower install jquery --save-dev

后加上 --save-dev 表明在 bower.json 中写入依赖

"devDependencies": {
    "jquery": "^3.2.1"
  }

成功后，我们就可以看到新增了一个文件夹 bower_components 在里面就能找到你想要的 jquery 啦！

当然除了 GitHub 短语，还可以用 Git 节点，URL 来实现包下载：

Search packages

你可以在 Bower Search 上搜索在 Bower 注册的插件。

Use packages

最基本方法：

你除了可以手动将包引入，还可以利用 Grunt, RequireJS, Yeoman, and lots of other tools 等实现自己引入，这个我在后面的 Gulp 篇中讲解这其中的一种方法。

好了，这就是最基本的 Bower 应用了，下面我们继续扩展一下。

注册自己的包

需满足一下条件：

To register a new package:

The package name must adhere to the bower.json spec.
There must be a valid bower.json in the project’s root directory.
Your package should use semver Git tags. The v prefix is allowed.
Your package must be publically available at a Git endpoint (e.g., GitHub). Remember to push your Git tags!
For private packages (e.g. GitHub Enterprise), please consider running a private Bower registry.

运行一下命令就能够在 Bower 上注册提供给别人下载啦！

$ bower register  
# for example
$ bower register example git://github.com/user/example.git

注销同样简单，先确保你是该包的GitHub拥有者，并输入一下命令：

bower login
# enter username and password
? Username:
? Password:
# unregister packages after successful login
bower unregister

API

筛选一些有用的API出来：

1. cache - 缓存处理

列出缓存过的包信息列表，会得到全部的包名 + 地址

$ bower cache list
输出 ==>
jquery=https://github.com/jquery/jquery-dist.git#3.2.1

也可以单独查询：

$ bower cache list jquery 
or
$ bower cache list [jquery,vue,...]

缓存处理

$ bower cache clean
$ bower cache clean  [ ...]
$ bower cache clean # [# ..]

2. list - 本地包管理

$ bower list []

可用于查看本地包列表与可升级包情况

list options
-p, --paths: Generates a simple JSON source mapping
-r, --relative: Make paths relative to the directory config property, which defaults to bower_components

3. install - 包安装

$ bower install []
$ bower install  [ ..] []

install options:
-F, --force-latest: Force latest version on conflict
-p, --production: Do not install project devDependencies
-S, --save: Save installed packages into the project’s bower.json dependencies
-D, --save-dev: Save installed packages into the project’s bower.json devDependencies
-E, --save-exact: Configure installed packages with an exact version rather than semver

4. login - 登录GitHub

$ bower login [-t, --token]

后面参数的意思是通过现有的GitHub认证令牌，而不是提示用户名和密码

5. update- 更新包

$ bower update [ ..] []

update options:
--F, --force-latest: Force latest version on conflict
-p, --production: Do not install project devDependencies
-S, --save: Update dependencies in bower.json
-D, --save-dev: Update devDependencies in bower.json

6. uninstall - 删除包

$ bower uninstall [ ..] []

uninstall options
-S, --save: Remove uninstalled packages from the project’s bower.json dependencies
-D, --save-dev: Remove uninstalled packages from the project’s bower.json devDependencies

7. Using local cache - 使用本地包

$ bower install --offline

假如这个包在之前安装过，可以离线运用

8. info - 包版本等信息

$ bower info 
$ bower info  []
$ bower info # []

假设运行：

$ bower info jquery

bower jquery#*        cached https://github.com/jquery/jquery-dist.git#3.2.1
bower jquery#*        validate 3.2.1 against https://github.com/jquery/jquery-dist.git#*

{
  name: 'jquery',
  main: 'dist/jquery.js',
  license: 'MIT',
  ignore: [
    'package.json'
  ],
  keywords: [
    'jquery',
    'javascript',
    'browser',
    'library'
  ],
  homepage: 'https://github.com/jquery/jquery-dist',
  version: '3.2.1'
}

Available versions:
  - 3.2.1
  - 3.2.0
  - 3.1.1
  - 3.1.0
  - 3.0.0
  - 2.2.4
  - 2.2.3
  - 2.2.2
  - 2.2.1
  - 2.2.0
  - 2.1.4
  - 2.1.3
  - 2.1.2
  - 2.1.1
  - 2.1.0
  - 2.0.3
  - 2.0.2
  - 2.0.1
  - 2.0.0
  - 1.12.4
  - 1.12.3
  - 1.12.2
  - 1.12.1
  - 1.12.0
  - 1.11.3
  - 1.11.2
  - 1.11.1
  - 1.11.0
  - 1.10.2
  - 1.10.1
  - 1.10.0
  - 1.9.1
  - 1.9.0
  - 1.8.3
  - 1.8.2
  - 1.8.1
  - 1.8.0
  - 1.7.2
  - 1.7.1
  - 1.7.0
  - 1.6.4
  - 1.6.3
  - 1.6.2
  - 1.6.1
  - 1.6.0
  - 1.5.2
  - 1.5.1
  - 1.5.0
  - 1.4.4
  - 1.4.3
  - 1.4.2
  - 1.4.1
  - 1.4.0
  - 1.3.2
  - 1.3.1
  - 1.3.0
  - 1.2.6
  - 1.2.5
  - 1.2.4
  - 1.2.3
  - 1.2.2
  - 1.2.1
  - 1.1.4
  - 1.1.3
  - 1.1.2
  - 1.1.1
  - 1.0.4
  - 1.0.3
  - 1.0.2
  - 1.0.1

Show 22 additional prereleases with ‘bower info jquery --verbose’
You can request info for a specific version with 'bower info jquery#'

好啦，基本上 Bower 的用法就是这样了
下篇我们来学习《 Node.js 自动化工具 - Gulp 》

该篇收录于文集：Node教程

Node.js 自动化工具 - Bower

安装 Bower

Install packages

Search packages

Use packages

注册自己的包

API

你可能感兴趣的:(Node.js 自动化工具 - Bower)