Bower の 基本的な使い方 および よく使うコマンド についてまとめてみました。 初心者向け Bower 入門 といったところでしょうか。
目次
概要
Bower を 利用した Webフロントエンド開発 を 行う場合、大まかには以下のような流れで始めていきます。 以下の流れを読むことでざっくり Bower を利用する イメージ は出来るかと思います。
-
ワークディレクトリ の 作成
以下のサンプルコマンドでは "sample" という名前の ワークディレクトリを作成し、そのフォルダへ移動しています。 以下の例ではすべてコマンドで実行していますが、エクスプローラーでフォルダを作成して該当フォルダへ移動しても良いです。
> cd /d "D:\workspace" > mkdir sample > cd sample
-
初期化（bower.json の 作成）
ウィザードに従って質問に答えていくことで bower.json を作成します。 ここで作成する bower.json は、この後 パッケージ を インストール した際 に パッケージ情報 を書き込む先になります。 ウィザードで質問される詳しい内容は以下の "bower.json 初期化時の質問 を参照ください。
> bower init
-
パッケージのインストール
ここではサンプルとして jQuery の 1.x をインストールしてみます。 パッケージインストールは
bower install <パッケージ名>#<バージョン>で指定できます。--saveのオプションを指定することで bower.json にインストールしたパッケージ情報を保存できます。> bower install jquery#1 --save
-
パッケージの利用
ワークディレクトリ "sample" の直下に "index.html" を作成する場合、以下のサンプルコードのような実装を行うとインストールしたパッケージが利用できます。 単純に
scriptタグで JavaScript を呼び出すだけです。/sample/index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>sample html title</title> <script src="./bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script> </head> <body> sample html body </body> </html>
以上で一通りの利用はできるかと思います。 細かなコマンドの使い方はこの後に記載していきます。
package 操作
以下ではパッケージ操作に関するコマンドの利用方法を少し詳しく見ていきます。
パッケージ の 追加
-
bower.json に従ってパッケージをインストールする
引数に何も指定しない場合、ワークディレクトリに存在する bower.json に記載されているパッケージを集めてきます。
> bower install
-
"jquery" パッケージ を インストール する
パッケージ名を指定すると該当のパッケージで最新のバージョンをインストールします。
> bower install jquery
-
"jquery" で 指定バージョン の パッケージ を インストール する
特定のバージョンをインストールしたい場合は
#に続けて バージョン番号 を記載します。> bower install jquery#1
-
パッケージ公開されていない GitHub 上の パッケージ を インストール する
Bower に公開されていないパッケージでも GitHub のプロジェクト名を指定することでインストールが可能です。
> bower install garafu/jquery.depend
-
GitHub 上の パッケージ を バージョン 指定して インストール する
GitHub の プロジェクト名 に続いて バージョン指定することができます。
> bower install garafu/jquery.depend#1.1.0
パッケージ の 削除
-
インストール した パッケージ を 削除する
bower uninstall <パッケージ名>でアンインストールできます。 インストールとアンインストールを連続で行うとなぜかうまく動作しません。 いったんコマンドプロンプトを閉じて再度アンインストールを実行するとうまくいくことが多いです。> bower uninstall jquery
パッケージ の 更新
-
指定したパッケージを最新バージョンにアップデートする
単純に
updateコマンド で 最新版があればアップデートを行います。 ただし、最初にインストールした際に指定したバージョン条件に依存するため、パッチバージョンまで指定していた場合はアップデートされません。 ちなみに インストール時に指定したバージョン条件は 該当パッケージ配下にある bower.json の_targetの値を確認するとわかります。 （逆に言えばこの値を変更すればバージョン条件を変更できます。）> bower update jquery
利用可能な パッケージ の 検索
-
パッケージ を 検索する
searchコマンドで登録されているパッケージに対してパッケージ名の部分一致検索を行って結果を一覧表示できます。> bower search jquery
インストール済み パッケージ の 一覧表示
-
インストール済みパッケージ一覧を表示する
listコマンド でインストール済みパッケージの一覧を確認できます。 同時に最新バージョンがでていないかの確認が行われるため、最新版がでているかどうかも確認できます。> bower list
bower.json 利用
初期化（bower.json の作成）
-
bower.json を初期化します。
initコマンド を利用してウィザードに従って bower.json を初期化します。 ウィザードで問われる細かな質問は以下の "bower.json 初期化時の質問" をご参照ください。> bower init
bower.json へ パッケージ の 追加
-
bower.json へ インストール した パッケージ の 依存関係情報 を 保存する
パッケージインストール時に
--saveオプションを利用することで bower.json へ保存できます。 開発時でしか利用しないパッケージであれば--save-devオプション を利用します。> bower install jquery --save
> bower install jquery --save-dev
bower.json から パッケージ の 削除
-
bower.json から インストール した パッケージ の 依存関係情報 を 削除する
パッケージアンインストール時に
--saveオプションを利用することで bower.json へ反映できます。 開発時でしか利用しないパッケージであれば インストール時 と同様に--save-devオプションで反映できます。> bower uninstall jquery --save
> bower uninstall jquery --save-dev
おまけ
bower.json 初期化時の質問
bower.json の 初期化時 (init コマンド実行時) にウィザードで質問される内容について以下にまとめます。
何も指定しない時のデフォルト値は () 内の値または () 内 で 大文字 になっている値です。
| 質問 | 概要 |
|---|---|
| ? name (<ディレクトリ名>) |
必須 レジストリに登録する際のパッケージ名を指定します。 |
| ? description |
推奨 最大140文字までの文字列。 ユーザーがパッケージを特定できるような簡易な説明を記載します。 パッケージがどのようにできているかではなく、どんなことができるかを記載します。 |
| ? main file |
推奨 パッケージのエントリーポイントファイルを指定します。 bower.json では 複数指定できるようですが、ウィザードからは複数指定できないようです。 |
| ? keywords |
推奨 パッケージを検索しやすくするためのキーワードを指定します。 カンマ区切りで複数指定できます。 |
| ? authors |
パッケージ作成にかかわる製作者を指定します。 カンマ区切りで複数指定できます。
|
| ? license (MIT) |
推奨 パッケージ利用する際のライセンスを特定できる名前 または URL、パス を指定します。 |
| ? homepage |
作成するパッケージに関する詳細を記載したホームページのURLを指定します。 特に指定がなければ GitHub プロジェクト に フォールバック します。 |
| ? set currently installed components as dependencies? (Y/n) |
既に配置済みのパッケージを dependencies に追加するかどうか 新規作成であればそもそも追加しているパッケージなどないので Y でも N でも変わりません。 既存の JavaScript プロジェクトに対して bower.json を作成する場合、Y にすると良いと思います。 |
| ? add commonly ignored files to ignore list? (Y/n) |
一般的に無視するファイルを ignore リスト に追加するかどうか Y 一択で。 |
| ? would you like to mark this package as private which prevents it from being accidentally published to the registry? (y/N) |
このパッケージを間違って一般公開してしまわないようプライベートとして設定するかどうか 作成するパッケージの事情にあわせて 公開/非公開 を設定してください。 |
| ? Looks good? (Y/n) |
これまでに答えてきた内容をもとに bower.json のサンプルができているので、問題なければ Y を選択します。 |
参考記事
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！