由上篇《 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
最基本方法：
<script src="bower_components/jquery/dist/jquery.min.js"></script>
你除了可以手动将包引入，还可以利用 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 <my-package-name> <git-endpoint>
# 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 <package>
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 <name> [<name> ...]
$ bower cache clean <name>#<version> [<name>#<version> ..]
2. list - 本地包管理
$ bower list [<options>]
可用于查看本地包列表与可升级包情况
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 [<options>]
$ bower install <endpoint> [<endpoint> ..] [<options>]
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 <name> [<name> ..] [<options>]
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 <name> [<name> ..] [<options>]
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 <package> --offline
假如这个包在之前安装过，可以离线运用
8. info - 包版本等信息
$ bower info <package>
$ bower info <package> [<property>]
$ bower info <package>#<version> [<property>]
假设运行：
$ 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#<version>'
好啦，基本上 Bower 的用法就是这样了
下篇我们来学习《 Node.js 自动化工具 - Gulp 》
该篇收录于文集：Node教程
网友评论