Bower の 基本的な使い方 および よく使うコマンド についてまとめてみました。 初心者向け Bower 入門 といったところでしょうか。
目次
概要
Bower を 利用した Webフロントエンド開発 を 行う場合、大まかには以下のような流れで始めていきます。 以下の流れを読むことでざっくり Bower を利用する イメージ は出来るかと思います。
-
ワークディレクトリ の 作成
以下のサンプルコマンドでは "sample" という名前の ワークディレクトリを作成し、そのフォルダへ移動しています。 以下の例ではすべてコマンドで実行していますが、エクスプローラーでフォルダを作成して該当フォルダへ移動しても良いです。
123>
cd
/d
"D:\workspace"
>
mkdir
sample
>
cd
sample
-
初期化(bower.json の 作成)
ウィザードに従って質問に答えていくことで bower.json を作成します。 ここで作成する bower.json は、この後 パッケージ を インストール した際 に パッケージ情報 を書き込む先になります。 ウィザードで質問される詳しい内容は以下の "bower.json 初期化時の質問 を参照ください。
1> bower init
-
パッケージのインストール
ここではサンプルとして jQuery の 1.x をインストールしてみます。 パッケージインストールは
bower install <パッケージ名>#<バージョン>
で指定できます。--save
のオプションを指定することで bower.json にインストールしたパッケージ情報を保存できます。1> bower install jquery#1 --save
-
パッケージの利用
ワークディレクトリ "sample" の直下に "index.html" を作成する場合、以下のサンプルコードのような実装を行うとインストールしたパッケージが利用できます。 単純に
scriptタグ
で JavaScript を呼び出すだけです。/sample/index.html
1234567891011<!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 に記載されているパッケージを集めてきます。
1> bower install
-
"jquery" パッケージ を インストール する
パッケージ名を指定すると該当のパッケージで最新のバージョンをインストールします。
1> bower install jquery
-
"jquery" で 指定バージョン の パッケージ を インストール する
特定のバージョンをインストールしたい場合は
#
に続けて バージョン番号 を記載します。1> bower install jquery#1
-
パッケージ公開されていない GitHub 上の パッケージ を インストール する
Bower に公開されていないパッケージでも GitHub のプロジェクト名を指定することでインストールが可能です。
1> bower install garafu/jquery.depend
-
GitHub 上の パッケージ を バージョン 指定して インストール する
GitHub の プロジェクト名 に続いて バージョン指定することができます。
1> bower install garafu/jquery.depend#1.1.0
パッケージ の 削除
-
インストール した パッケージ を 削除する
bower uninstall <パッケージ名>
でアンインストールできます。 インストールとアンインストールを連続で行うとなぜかうまく動作しません。 いったんコマンドプロンプトを閉じて再度アンインストールを実行するとうまくいくことが多いです。1> bower uninstall jquery
パッケージ の 更新
-
指定したパッケージを最新バージョンにアップデートする
単純に
update
コマンド で 最新版があればアップデートを行います。 ただし、最初にインストールした際に指定したバージョン条件に依存するため、パッチバージョンまで指定していた場合はアップデートされません。 ちなみに インストール時に指定したバージョン条件は 該当パッケージ配下にある bower.json の_target
の値を確認するとわかります。 (逆に言えばこの値を変更すればバージョン条件を変更できます。)1> bower update jquery
利用可能な パッケージ の 検索
-
パッケージ を 検索する
search
コマンドで登録されているパッケージに対してパッケージ名の部分一致検索を行って結果を一覧表示できます。1> bower search jquery
インストール済み パッケージ の 一覧表示
-
インストール済みパッケージ一覧を表示する
list
コマンド でインストール済みパッケージの一覧を確認できます。 同時に最新バージョンがでていないかの確認が行われるため、最新版がでているかどうかも確認できます。1> bower list
bower.json 利用
初期化(bower.json の作成)
-
bower.json を初期化します。
init
コマンド を利用してウィザードに従って bower.json を初期化します。 ウィザードで問われる細かな質問は以下の "bower.json 初期化時の質問" をご参照ください。1> bower init
bower.json へ パッケージ の 追加
-
bower.json へ インストール した パッケージ の 依存関係情報 を 保存する
パッケージインストール時に
--save
オプションを利用することで bower.json へ保存できます。 開発時でしか利用しないパッケージであれば--save-dev
オプション を利用します。1> bower install jquery --save
1> bower install jquery --save-dev
bower.json から パッケージ の 削除
-
bower.json から インストール した パッケージ の 依存関係情報 を 削除する
パッケージアンインストール時に
--save
オプションを利用することで bower.json へ反映できます。 開発時でしか利用しないパッケージであれば インストール時 と同様に--save-dev
オプションで反映できます。1> bower uninstall jquery --save
1> 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 の フォロー」 お願いします!!