Bower とは？
Bower
twitter社が作ったフロントエンド用のパッケージ管理ツールで、jquery/angularjs/reactなどのJSライブラリやbootstrapなどのCSSライブラリの管理を行えます。
インストール
bower のインストールは、npm から行えます。
$ sudo npm -g install bower
/usr/local/bin/bower -> /usr/local/lib/node_modules/bower/bin/bower
/usr/local/lib
└── bower@1.7.9
$ bower -v
1.7.9
$
bower help
bower はサブコマンドで様々な操作を行うことができます。
bower helpでサブコマンド一覧を表示できます。
$ bower help
Usage:
bower <command> [<args>] [<options>]
Commands:
cache Manage bower cache
help Display help information about Bower
home Opens a package homepage into your favorite browser
info Info of a particular package
init Interactively create a bower.json file
install Install a package locally
link Symlink a package folder
list List local packages - and possible updates
login Authenticate with GitHub and store credentials
lookup Look up a package URL by name
prune Removes local extraneous packages
register Register a package
search Search for a package by name
update Update a local package
uninstall Remove a local package
unregister Remove a package from the registry
version Bump a package version
Options:
-f, --force Makes various commands more forceful
-j, --json Output consumable JSON
-l, --loglevel What level of logs to report
-o, --offline Do not hit the network
-q, --quiet Only output important information
-s, --silent Do not output anything, besides errors
-V, --verbose Makes output more verbose
--allow-root Allows running commands as root
-v, --version Output Bower version
--no-color Disable colors
See 'bower help <command>' for more information on a specific command.
bower help サブコマンド でサブコマンドのヘルプが見れます。
$ bower help init
Usage:
bower init [<options>]
Options:
-h, --help Show this help message
Additionally all global options listed in 'bower help' are available
Description:
Creates a bower.json file based on answers to questions.
bower init
アプリケーションで使うライブラリや依存関係を記述した bower.json を作成します。
bower init するといくつか質問されるので、答えていくと bower.json が作られます。
| 質問 | デフォルト | 説明 |
|---|---|---|
| name | ディレクトリ名 | ライブラリの名前 |
| description | ライブラリの説明 | |
| main file | ライブラリのエンドポイント | |
| keywords | ||
| authors | ユーザー名 | 作成者 |
| license | MIT | ライセンス |
| homepage | ホームページ | |
| 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? | No |
$ mkdir bower
$ cd bower/
$
$ bower init
? name bower
? description
? main file
? keywords
? authors ymaru
? license MIT
? homepage
? set currently installed components as dependencies? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No
cidentally published to the registry? (y/N)
{
name: 'bower',
authors: [
'ymaru'
],
description: '',
main: '',
license: 'MIT',
homepage: '',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
]
}
? Looks good? Yes
$ ls
bower.json
bower install
ライブラリをインストールします。
$ $ bower install jquery --save
bower not-cached https://github.com/jquery/jquery-dist.git#*
bower resolve https://github.com/jquery/jquery-dist.git#*
bower checkout jquery#3.1.0
bower progress jquery#* Receiving objects: 19% (27/141)
bower progress jquery#* Receiving objects: 20% (29/141)
bower progress jquery#* Receiving objects: 21% (30/141)
bower progress jquery#* Receiving objects: 21% (31/141), 52.00 KiB | 22.00 KiB/s
bower progress jquery#* Receiving objects: 23% (33/141), 116.00 KiB | 35.00 KiB/s
bower progress jquery#* Receiving objects: 24% (34/141), 116.00 KiB | 35.00 KiB/s
bower progress jquery#* Receiving objects: 24% (35/141), 132.00 KiB | 33.00 KiB/s
bower progress jquery#* Receiving objects: 26% (37/141), 172.00 KiB | 37.00 KiB/s
bower progress jquery#* Receiving objects: 26% (37/141), 188.00 KiB | 35.00 KiB/s
bower progress jquery#* Receiving objects: 26% (37/141), 204.00 KiB | 30.00 KiB/s
bower progress jquery#* Receiving objects: 26% (37/141), 220.00 KiB | 26.00 KiB/s
bower progress jquery#* Receiving objects: 26% (37/141), 228.00 KiB | 17.00 KiB/s
bower progress jquery#* Receiving objects: 27% (39/141), 236.00 KiB | 16.00 KiB/s
bower progress jquery#* Receiving objects: 27% (39/141), 260.00 KiB | 14.00 KiB/s
bower progress jquery#* Receiving objects: 31% (44/141), 268.00 KiB | 13.00 KiB/s
bower progress jquery#* Receiving objects: 45% (64/141), 284.00 KiB | 12.00 KiB/s
bower progress jquery#* Receiving objects: 63% (89/141), 316.00 KiB | 14.00 KiB/s
bower resolved https://github.com/jquery/jquery-dist.git#3.1.0
bower install jquery#3.1.0
jquery#3.1.0 bower_components/jquery
インストールしたライブラリは bower_components 配下に保存されます。
※パスは以下に記載している .bowerrc で変更できます。
$ find bower_components -type f
bower_components/jquery/.bower.json
bower_components/jquery/AUTHORS.txt
bower_components/jquery/bower.json
bower_components/jquery/dist/core.js
bower_components/jquery/dist/jquery.js
bower_components/jquery/dist/jquery.min.js
bower_components/jquery/dist/jquery.min.map
bower_components/jquery/dist/jquery.slim.js
bower_components/jquery/dist/jquery.slim.min.js
bower_components/jquery/dist/jquery.slim.min.map
bower_components/jquery/external/sizzle/dist/sizzle.js
bower_components/jquery/external/sizzle/dist/sizzle.min.js
bower_components/jquery/external/sizzle/dist/sizzle.min.map
bower_components/jquery/external/sizzle/LICENSE.txt
bower_components/jquery/LICENSE.txt
bower_components/jquery/README.md
… 略 …
$
--save を付けると bower.json に依存関係が記述されます。
別環境に依存関係のファイルをインストールする場合、bower.json があれば、
bower install するだけで依存関係のファイルをすべてインストールしてくれます。
$ cat bower.json
{
"name": "bower",
"authors": [
"ymaru"
],
"description": "",
"main": "",
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "^3.1.0"
}
}
bower install jquery だと、最新版がインストールされます。
bower install jquery#1 で、v1 系の最新版がインストールされます。
bower list
インストールしているライブラリの一覧を表示します。
$ bower list
bower check-new Checking for new versions of the project dependencies...
bower /Users/ymaru/bower
└── jquery#3.1.0
$
bower info
ライブラリのバージョンや情報を表示します。
$ bower info jquery
bower cached https://github.com/jquery/jquery-dist.git#3.1.0
bower validate 3.1.0 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.1.0'
}
Available versions:
- 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 uninstall
ライブラリをアンインストールします。
$ bower uninstall jquery --save
bower uninstall jquery
$
.bowerrc
bower.json と同じディレクトリに .bowerrc というファイルがあると bower の設定ができます。
proxyの設定や bower_componentsのパスなどを変更できます。
$cat .bowerrc
{
"cwd": "~/.my-project",
"directory": "bower_components",
"registry": "https://bower.herokuapp.com",
"shorthand-resolver": "git://github.com//.git",
"proxy": "http://proxy.local",
"https-proxy": "http://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"
]
}
$