JavaScriptパッケージ管理ツール Bowerを触ってみた
部屋真っ暗にして眠る直前、明日は地元に帰って打ち合わせとか、アイディア出しどうしようかな～とか、自分も含めて事前課題TAみんな終わるかな～とか考えてたら、ふとブログの事が頭に過ぎり投稿し忘れたことに気づく。
事前に書いておいてよかった。
今回はフロントエンドパッケージ管理ツールのBowerについてです。
Bowerとは？
CentOSではyumやrpm、phpではcomposerなどのような、Javascriptのパッケージ管理ツール。
パッケージ（ライブラリやフレームワークなどの外部依存ファイル）はプロジェクト毎に利用するのが異なるため、その依存関係を記憶し、環境が変わった場合でも同様のパッケージ構成を再現出来るようになる。
導入
Bowerチュートリアル
ひと通り触ってみたがBowerの使い方はnpmと大体似ている。
しかし、npmに精通していない自身の為に書き連ねていく。
パッケージの初期化
npmと同様に以下のコマンドを叩く。
$ bower init "npm init"と同じようにいくつか質問をされるが基本全て未入力のEnterで構わない
package.json と同じような bower.json というファイルが作成される。
以下が何も指定せずに作成したbower.json
{
"name": "bower_test",
"version": "0.0.0",
"authors": [
"user_name"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
特定のパッケージのインストール
こちらもnpmとコマンドは変わらない。
$ bower install <パッケージ名> EreateJSをインストール $ bower install EaselJS
初期化後の初めてのインストールでは node_module/ の代わりに bower_components/ が作成される。
bower.jsonに依存関係、bower_componentsにダウンロードしたパッケージのファイルが格納される。
依存関係の記述と依存パッケージのインストール
npmと同様にbowerでも依存関係を記述できる。
$ bower install --save <パッケージ名> 依存関係を記述 $ bower install --save-dev <パッケージ名> 開発環境のみでの依存関係を記述
試しにEaselJSを現在のプロジェクトを依存パッケージとして登録する。
尚、既にインストール済みの場合は依存関係だけが記述される。
$ bower install --save EaselJS $ bower install --save-dev EaselJS
するとbower.jsonに依存関係が追記されているのが分かる。
{
"name": "bower_test",
"version": "0.0.0",
"authors": [
"user_name"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"EaselJS": "*"
},
"devDependencies": {
"EaselJS": "*"
}
}試しにこのbower.jsonファイルを新規のフォルダに移動してインストールを行ってみましょう。
$ mkdir ../bower_new/ $ cd ../bower_new $ bower install ちなみに開発環境のインストールを除外したい場合は以下のようにします $ bower install --production
すると、パッケージ名を指定していないのにも関わらず以前のフォルダと同じようにEaselJSがインストールされていることが分かります。
依存関係に記すことで、異なる環境でも同じパッケージの状態を構成出来るので非常に便利です。
