前提
| 要素 | バージョン |
|---|---|
| debian | 8.7 |
| node | 7.4.0 |
| npm | 4.1.2 |
| bower | 1.8.0 |
概要
Debianにnpmを用いてBowerをインストールし、Bowerを簡単に使ってみる
Bowerとは
Bower(バウアー)はフロントエンド開発の依存関係(JavaScript/CSS/HTMLなど)を管理してくれるフロントエンド用パッケージ管理システム。
PHPのComposer、RubyのGem、iOSのcocoaPodsなどの仲間だと思えば良い。
ライブラリなどのインストールをコマンドで行えるようになり、インストールした内容及びその依存関係が、bowser.jsonに書き込まれる。
同一のbowser.jsonさえあれば、他環境にライブラリをインストールする際にコマンド一発で解決する。
Bowerのインストール
npmを用いてインストールを行う。パッケージ管理システム(npm)でパッケージ管理システム(bower)をインストールするのがちょっと面白い。ここではver1.8.0がインストールされる。
$ sudo npm install bower -g /usr/local/bin/bower -> /usr/local/lib/node_modules/bower/bin/bower /usr/local/lib └── bower@1.8.0
bower.jsonの作成
初めにパッケージの依存関係などを記述するbower.jsonを作成する。といっても、JSONファイルを直接作成するのでなく、以下のコマンドを実行すると、対話式に入力を促されるのでそれに従っていけば自動的にbower.jsonが作成される
$ bower init
以下のように、名称、説明文、メインファイル(省略可)、キーワード(省略可)、作者、ライセンス、Webサイト(省略可)などを入力することで、bower.jsonが生成される。ここで入力される情報のうちのいくつかは、自分でbowerにライブラリを公開する場合に必要になるものなので、単に開発で試用するライブラリを管理するという場合は省略して良い。
$ bower init
? name qs-test
? description bower test directory
? main file
? keywords
? authors Sa2Knight <shingo.sasaki.0529@gmail.com>
? license MIT
? homepage
? set currently installed components as dependencies? No
? add commonly ignored files to ignore list? No
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No
{
name: 'qs-test',
authors: [
'Sa2Knight <shingo.sasaki.0529@gmail.com>'
],
description: 'bower test directory',
main: '',
license: 'MIT',
homepage: ''
}
? Looks good? Yes
Bowerを用いてjQueryUIパッケージをインストールする
Bowerを用いたパッケージのインストールは、下記のコマンドで行える。 –save を付与することで、インストール結果をbower.jsonに記録してくれるので実質必須。
$ bower install [パッケージ名] –save
jQueryUIのパッケージ名はjquery-uiなので、以下のように、jQueryUIをインストールする
$ bower install jquery-ui --save bower jquery-ui#* cached https://github.com/components/jqueryui.git#1.12.1 bower jquery-ui#* validate 1.12.1 against https://github.com/components/jqueryui.git#* bower jquery#>=1.6 cached https://github.com/jquery/jquery-dist.git#3.2.1 bower jquery#>=1.6 validate 3.2.1 against https://github.com/jquery/jquery-dist.git#>=1.6 bower jquery-ui#^1.12.1 install jquery-ui#1.12.1 bower jquery#>=1.6 install jquery#3.2.1
bower.jsonの内容を確認すると、jQueryUI1.12.1に依存している状態にあることが追記されている
$ cat bower.json
{
"name": "qs-test",
"authors": [
"Sa2Knight <shingo.sasaki.0529@gmail.com>"
],
"description": "bower test directory",
"main": "",
"license": "MIT",
"homepage": "",
"dependencies": {
"jquery-ui": "^1.12.1"
}
}
インストールされたパッケージは、bower_componentsディレクトリ以下に配置されるのだが、ここを見てみると、jQueryUIが依存しているjQuery本体もインストールされていることがわかる。
$ ls bower_components/ jquery jquery-ui
このように、Bowerでは、インストール対象のパッケージが依存している他のパッケージについても自動的にインストールしてくれる。(composerやnpm、gemなどに慣れている人にとっては当然だが)
所感
- npmの影響を大きく受けているらしく、全体的な仕様やコマンドの使い方がnpmに限りなく近い
- bowerでは、対象パッケージをgitからcloneしてくるだけなので、実際に必要なるファイルはその中の極一部である。それをどのように扱うかはまた別の手段を用いる必要があるようなので、即戦力という感じでは無さそうだ
- scriptタグでロードする時に依存関係に基づいた順番でロードしなきゃならないって問題は解決できてない
- と言うかJavaScriptの外部ライブラリってそんな依存管理が必要なほど沢山使うかな
- bowerの触りをやった程度なのでメリットがあまり掴めてない。詳しい方がいたらご教授願う。
- bowerのサブコマンドが大量にあるので、余裕があれば色々見てみたい