孙宇的技术专栏 大数据/机器学习

bower

2017-04-10

阅读:


bower

Bower是Web开发中的一个前端文件包管理器。

类似于Node模块的npm包管理器,php的composer。Bower为Web组件提供了类似的功能。它使用的是 github 上面的资源。所以,bower 是依赖 git 命令的。

安装Bower

npm install bower -g

配置

bower 通过 bower.json 和 .bowerrc 来配置包。

.bowerrc

在项目根目录下,内容大致如下:

{
  "directory" : "components",
  "json"      : "bower.json",
  "endpoint"  : "https://Bower.herokuapp.com",
  "searchpath"  : "",
  "shorthand_resolver" : ""
}

其中的属性含义如下。

directory:存放库文件的子目录名。

json:描述各个库的json文件名。

endpoint:在线索引的网址,用来搜索各种库。

searchpath:一个数组,储存备选的在线索引网址。如果某个库在endpoint中找不到,则继续搜索该属性指定的网址,通常用于放置某些不公开的库。

shorthand_resolver:定义各个库名称简写形式。

bower.json

保存项目的库信息,供项目二次安装时使用(重复使用)。

使用 bower init 命令可以来创建bower.json文件,它会自动提示你输入一系列的内容,以生成最终的文件,包括项目名称、作者信息、项目描述信息、关键词、开源证书等等。

sunyu:test sunyu$ bower init
? name test
? description some test
? main file test.js
? keywords do it
? authors sunyu <sunvipyu@gmail.com>
? license MIT
? homepage https://github.com/easy-swoole/demo
? 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 accidentally published to the registry? Yes

{
  name: 'test',
  homepage: 'https://github.com/easy-swoole/demo',
  authors: [
    'sunyu <sunvipyu@gmail.com>'
  ],
  description: 'some test',
  main: 'test.js',
  keywords: [
    'do',
    'it'
  ],
  license: 'MIT',
  private: true,
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes

这时候创建出来的 bower.json 文件内容是:

{
  "name": "test",
  "homepage": "https://github.com/easy-swoole/demo",
  "authors": [
    "sunyu <sunvipyu@gmail.com>"
  ],
  "description": "some test",
  "main": "test.js",
  "keywords": [
    "do",
    "it"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

这里没有声明任何依赖包。我们可以追加声明:

bower install bootstrap --save

上面的 -save 就是把下载的包信息写入到配置文件的依赖项里,它会自动安装最新版本的bootstrap并更新bower.json文件:

{
  "name": "test",
  "homepage": "https://github.com/easy-swoole/demo",
  "authors": [
    "sunyu <sunvipyu@gmail.com>"
  ],
  "description": "some test",
  "main": "test.js",
  "keywords": [
    "do",
    "it"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "^4.0.0"
  }
}

这里有两个版本的依赖,一个是dependencies,另一个是devDependencies,分别代表生产环境和开发环境中的依赖包,它们可以分别通过下面两个指令自动添加:

bower install jquery --save         //添加到dependencies
bower install angular --save-dev        //添加到devDependencies

bower 默认情况都会去bower.com上面找最新的包,除非指定版本号。安装时,我们也可以指定对应的版本进行安装,如:

bower install jQuery#2.1
bower install github 网址

按照上面的做法,例如,我创建了一个前端开发的较为齐全的包,就可以挂在git或者bower的官网上了。

别人通过下载这个bower.json文件,在已经安装bower的前提下,直接运行bower install就可以使用这个前端开发包了。

将包发布到bower.com

你可以注册自己的包,这样其他人也可以使用了,这个操作只是在服务器上保存了一个映射,服务器本身不托管代码。

提交你的 bower 包给 bower.com:

bower register sunyu_test git://github.com/jquery/jquery

注意,如果你的库与现有的库重名,就会提交失败。

bower cache

缓存是前端比较头疼的东西。Bower cache可以清理缓存: bower cache clean

列出缓存列表: bower cache list

清理后,再安装时它就会从远程下载。

其它操作

bower update # 更新包
bower unstall # 卸载包

上一篇 Webpack

下一篇 gulp

评论

文章