datchの日記

気がついたら社会人。気になる技術的なことについて少しずつ書いていけたらと思っております。

JavaScriptパッケージ管理ツール Bowerを触ってみた

部屋真っ暗にして眠る直前、明日は地元に帰って打ち合わせとか、アイディア出しどうしようかな~とか、自分も含めて事前課題TAみんな終わるかな~とか考えてたら、ふとブログの事が頭に過ぎり投稿し忘れたことに気づく。
事前に書いておいてよかった。
今回はフロントエンドパッケージ管理ツールのBowerについてです。

参考サイト



学習には下記のサイトを参考にした。
Bower入門(基礎編) - from scratch

Bowerとは?



CentOSではyumrpmphpではcomposerなどのような、Javascriptのパッケージ管理ツール
パッケージ(ライブラリやフレームワークなどの外部依存ファイル)はプロジェクト毎に利用するのが異なるため、その依存関係を記憶し、環境が変わった場合でも同様のパッケージ構成を再現出来るようになる。

導入



導入の導入

Bowerをインストールするためにnpmが必要だ。
そのため、 Node.js をインストールする。
公式サイトからインストーラを落として実行して指示通りにすればインストールが完了する。
MacならHomebrewを使うといいだろう。

$ node -v
v0.10.30
$ npm -v
1.4.21

上記のようなコマンドを叩いて文字が表示されれば Node.js & npm のインストールは正常に完了。

Bowerのインストール

次にnpmを使ってBowerをインストールする。
(パッケージ管理ツールでパッケージ管理ツールをインストールするというのも何か変な話だが、ブラウザでブラウザをダウンロードするしそんなものか)
以下のコマンドを叩き、バージョンが表示されれば成功。

$ npm install -g bower
$ bower --version
1.3.9

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がインストールされていることが分かります。
依存関係に記すことで、異なる環境でも同じパッケージの状態を構成出来るので非常に便利です。

Bowerを利用した感想



Bowerを使ってて思ったのが、何故npmがある現状でこのようなフロントエンドパッケージ管理ツールが出現したのかがいまいち分からない。
他にもRequire.js、Component.jsなどがあるようだが、どちらも設定ファイルやコマンドが違うだけで表面上では似通っている様に見える。
そのため、npmを使ってみて不満に思った部分があれば、これらのフロントエンドパッケージ管理ツールのどれかを選択するという流れの方が自然だと感じた。