Bower入門(基礎編)

Bower入門

これから Bower について書いてきます。Bowerの使い方から実際に使う上で考慮することまで含めて書きます。
長くなりそうなので単に使うだけの基礎編とモジュールを作る上で気をつけることをまとめた応用編に分けて書きます。

Bower とは

Twitter社が作ったフロントエンド用のパッケージマネージャです。 Java で言う MavenRuby で言う gem、 Perl で言う cpan のようなものです。
Node.jsには npm と呼ばれるパッケージマネージャがありますが、それに強く影響を受けています。

パッケージマネージャを利用することでライブラリを自分で管理する必要がなくなり、管理するファイルの数を減らすことができます。
また、パッケージマネージャを利用することでライブラリのバージョン管理をしやすくなります。

さらに自分のライブラリを Bower components と呼ばれるリポジトリに登録することで 公開することが可能です。

ただし、後で細かく説明しますが、 Bower はあくまでパッケージマネージャであって取得したライブラリを使いやすく加工したり、取得したライブラリから javascript だけうまくフィルタして配置変換をしたり、といった機能はありません。

大体使い方知ってるよ、という方は最後の"覚えてほしいこと"の部分だけでも読んでいただくといいかもしれません。

Bower インストール方法

Node.jsを入れて、 npm を取得する必要があります。
Node.jsを入れるにはいくつか方法があるんですが、インストーラから入れるか Homebrewから入れると良いかと思います。

$ brew install node.js
$ node -v


もしも Homebrew が入っていなかったり、Node.jsのバージョン管理を簡易に行いたい場合は nodebrew がオススメです。

$ curl -L git.io/nodebrew | perl - setup
$ export PATH=$HOME/.nodebrew/current/bin:$PATH >> .bashrc (or .zshrc)
$ source ~/.bashrc (or .zshrc)
$ nodebrew install v0.10
$ nodebrew use v0.10
$ node -v

node.jsが入ったら npm を使ってbowerをインストールします。

$ npm install bower -g

bowerを試しに動かしてみましょう。

$ bower -v

バージョン番号が返ってくればbowerのインストール成功です。

bower init

Bowerの初期化をします。

$ mkdir bower_test && cd bower_test
$ bower init

いくつか質問されるので、以下のように答えましょう。

name: [bower_test] My application // 自分のライブラリの名前
version: [0.0.0] 0.0.1 // 自分のライブラリのバージョン番号
main file: [] index.js // 自分のライブラリのエンドポイント
add commonly ignored files to ignore list? (y/n): [y] y // 公開時に不要と思われるファイルを不要リストに追加するかどうか

すると、bower.jsonが作成されます。
このbower.jsonは依存関係及び自分のライブラリの情報を記述するためのファイルです。この bower.json に記載されている定義を利用して bower はライブラリの管理を行います。中身を確認すると、上述した設定が記載されているのがわかると思います。

■bower.jsonの内容:

{
  "name": "My Application",
  "version": "0.0.1",
  "main": "index.js",
  "ignore": [
    "**/.*",
    "node_modules",
    "components"
  ]
}

応用編で詳しく説明しますが、ライブラリを公開するわけではなく、単純にbowerで自分のプロジェクトのライブラリを管理するだけであれば main と ignoreの記述は不要です。

ただし、 bower にライブラリを公開するのであればmain と ignoreの記述は重要です。応用編で詳しく説明します。

覚えてほしいこと
  • bower init で初期化する
  • bower.jsonが作成される
  • bower.jsonにはライブラリの名前、依存関係が記述される重要なファイル

bower install

Bower でライブラリをインストールするのに使います。

試しに jQuery を入れてみましょう。

$ bower install jquery

これを実行すると、 bower.json の存在する場所と同じ所に components フォルダが作成され、そこに最新のjQueryが配置されます。

├── bower.json
├── components
│   └── jquery
│       ├── README.md
│       ├── bower.json
│       ├── component.json
│       ├── composer.json
│       ├── jquery-migrate.js
│       ├── jquery-migrate.min.js
│       ├── jquery.js
│       ├── jquery.min.js
│       └── package.json

jqueryにも色々バージョンがあります、バージョンを指定する場合は、以下のように記述しましょう。

$ bower install jquery#1.9.1

バージョン番号は全て指定する必要はありません。メジャーバージョンだけ指定すれば、そのバージョンの最新を入れてくれます。

$ bower install jquery#1

Bower Componentsに登録されていない場合でも直接URLを指定すれば取得出来ます。

$ bower install http://code.jquery.com/jquery-1.10.1.js
bower install --save/--save-dev

ただし、これだとライブラリは入りますが、bower.jsonには依存関係が記述されません。記述するには --save オプションを使いましょう。

$ bower install jquery --save


すると、下記のように bower.json に依存関係が追加されます。

{
  "name": "My Application",
  "version": "0.0.1",
  "main": "index.js",
  "ignore": [
    "**/.*",
    "node_modules",
    "components"
  ],
  "dependencies": {
    "jquery": "~2.0.1"
  }
}

bower.json内に dependencies が記述されていれば、今後は指定しなくとも以下のコマンドだけでライブラリがインストールされます。

$ bower install

便利!!

もしも test 目的などで開発中にしか使わないモジュールの場合は --save-dev オプションを使いましょう。

$ bower install mocha --save-dev

この場合も依存関係は記述されますが、 devDependencies と呼ばれるカテゴリに記述されます。

{
  "name": "My Application",
  "version": "0.0.1",
  "main": "index.js",
  "ignore": [
    "**/.*",
    "node_modules",
    "components"
  ],
  "dependencies": {
    "jquery": "~2.0.1"
  },
  "devDependencies": {
    "mocha": "~1.9.0"
  }
}

この devDependencies というカテゴリに記述されたライブラリは --production のオプションを指定するとインストールされません。

$ bower install --production

こうすることで本番環境では不要なライブラリを除外することができます。

bower install の ちょっとした裏技

bower install は bower i でも同じ事ができます。

$ bower i jquery // bower install jquery と同じ。

他にもショートカットコマンドがあります。

$ bower i jquery -S // bower install jquery --save と同じ。
$ bower i jquery -D // bower install jquery --save-dev と同じ。
$ bower i -P // bower install --production と同じ。
覚えてほしいこと
  • bower install <ライブラリ名> でライブラリを取得する。
  • bower install --save を使うと bower.json に依存関係を記述してくれる
  • bower.jsonに依存関係が記述されていれば bower install とタイプするだけで依存関係をインストールしてくれる。

bowerrc

bowerにはbowerrcと呼ばれる設定ファイルがあります。

bowerrcを利用することでデフォルトの配置先を変更することや検索の時の位置を変えることができます。
bower.jsonと同じ場所に .bowerrc という名前でファイルを作成し、下記のように記述します。

{
  "directory": "bower_components", // bower ライブラリの配置先。デフォルトはcomponents
  "json": "bower.json", // jsonファイルのパス
  "searchpath": [  // bowerライブラリを検索するときの検索パス、プライベートリポジトリを立てている場合に記述する
    "https://bower.herokuapp.com"
  ]
}
覚えてほしいこと
  • .bowerrc ファイルで bower の設定ができる
  • directory キーに設定するとbower ライブラリの配置先を変えられる。

bower search/lookup

ライブラリを検索するには bower search を使います。

$ bower search jquery

似たコマンドとして bower lookup というのがありますが、ライブラリ名の完全一致で検索します。

$ bower lookup jquery

どちらかというとlookupは名前解決に近いイメージで、searchはライブラリの検索に利用します。

bower list

自分がインストールしたライブラリを確認する時です。 bower ls でも同じ事になります。

$ bower list
$ bower ls

bower uninstall

アンインストールする時ですね。ほぼ説明不要かと。一応 --save, --save-dev でbower.jsonに書かれている依存も削除します。

$ bower uninstall jquery
$ bower uninstall jquery --save
$ bower uninstall jquery --save-dev

bower info

ライブラリのバージョンや情報を確認する時に使用します。

$ bower info jquery

jquery

  Versions:
    - 2.0.1
    - 2.0.0
    - 1.10.0
    - 1.9.1
    - 1.9.0
    - 1.8.3
    - 1.8.2
    - 1.8.1
    - 1.8.0
    - 1.7.2
    - 1.7.1
    - 1.7.0
    - 1.6.4
    - 1.6.3
    - 1.6.2
    - 1.6.1
    - 1.6.0
    - 1.5.2
    - 1.5.1
    - 1.5.0
    - 1.4.4
    - 1.4.3
    - 1.4.2
    - 1.4.1
    - 1.4.0
    - 1.3.2
    - 1.3.1
    - 1.3.0
    - 1.2.6
    - 1.2.3

あまり使わないけど覚えておくと良いコマンド

以下のコマンドはあまり使わないですが、覚えておくとふとした時に役に立つかも。

bower update

ライブラリをもう一度インストールするには bower update を使います。

$ bower update

なんかの拍子に失敗してインストールされた時とかに使えるかも。

bowerでインストールしたライブラリを使用する時

最初に述べましたが、Bower はあくまでパッケージマネージャで、指定されたライブラリを git clone して持ってくるだけです。

試しにいくつかライブラリを入れてみましょう。

$ bower i jquery
$ bower i impress.js


この時のフォルダ構造は以下のようになってます。

├── impress.js
│   ├── css
│   │   └── impress-demo.css
│   ├── index.html
│   └── js
│       └── impress.js
└── jquery
    ├── README.md
    ├── bower.json
    ├── component.json
    ├── composer.json
    ├── jquery-migrate.js
    ├── jquery-migrate.min.js
    ├── jquery.js
    ├── jquery.min.js
    └── package.json

見ての通り、目的のjsファイルを使おうとしても構造が違います。そのため、このままでは利用するためには

    <script src="/components/jquery/jquery.js" />
    <script src="/components/impress.js/js/impress.js" />

みたいにフォルダ構造を意識して設定しなければならず、若干面倒です。

よくGitHubGoogle Groupで議論になるのですが、この指定されたライブラリを取ってくるだけじゃなくてフォルダからjavascriptだけ取得したり、CSSだけ取得するようなレイアウトマネージャーとしての機能を提供して欲しいという話がbowerに出ます。

ただし、まだこれらの議論はまとまっておらず、今のところは別なツールで回避せざるをえないのが現状です。

この辺りの回避策は次のエントリである、Bower入門の応用編に書きます。

ひとまず基本的なインストールの仕方から使い方までまとめました。