viewpoint

Bowerはパッケージ管理マネージャです。jQueryやらなんやらを簡単に管理することができます。 ずっと存在を知ってはいたけど、全然使っていなかったので今更ながら触ってみます。

インストール

インストールは、Node.jsのnpmで行います。

$ npm install -g bower

// バージョン確認
$ bower -v

バージョンが確認できたらインストールはOK。

使い方

まずは、初期化です。

// sample用ディレクトリ作成
$ mkdir bower-test

// ディレクトリ移動
$ cd bower-test

// bower 初期化
$ bower init

初期が終わると、bower.jsonというファイルが作成されます。このファイルは必要なライブラリーと依存関係を管理するファイルです。

bower.json

{
  "name": "sample",
  "version": "0.0.0",
  "authors": [
    "mb_kondou <kondou@maboroshi.biz>"
  ],
  "description": "sample",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components"
  ]
}

初期化がおわったので、試しにjQueryをインストールしてみます。

$ bower i jquery

「i」はinstallの略です。

ディレクトリの中を見てみると、bower_components/jqueryというディレクトリが作成され、distフォルダ内に最新のjQueryがインストールされています。 srcディレクトリも作成されてて余計なファイルがたくさんあるけど、これ除外できないのかなー。

バージョン指定

バージョンを指定する場合は以下のようにします。

$ bower i jquery#1.9.1

先ほどのディレクトリ構造が書き換わって、bower_components/jquery内にv1.9.1のjQueryがインストールされます。

パッケージjsonに保存

インストールする際に--save-devを付けると、bower.jsonにライブラリー名とバージョン情報が保存されます。

$ bower i jquery --save-dev

// 略
$ bower i jquery --D

これでbower.jsonにライブラリの情報が追記され、次回からbower iをすると、記述されているライブラリーをインストールできる。

bower.json

{
  "name": "sample",
  "version": "0.0.0",
  "authors": [
    "mb_kondou <kondou@maboroshi.biz>"
  ],
  "description": "sample",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components"
  ],
  "devDependencies": {
    "jquery": "~2.1.3"
  }
}

bowerrc

bowerrcはbowerの設定ファイルです。.bowerrcという名前で保存し、中にjson形式で設定を記述します。

.bowerrc

{
  "directory": "app/components/",
  "analytics": false,
  "timeout": 120000,
  "registry": {
    "search": [
      "https://bower.herokuapp.com"
    ]
  }
}

directoryでライブラリーを配置するディレクトリを選択できます。 他の設定については、公式サイトを参照。

bowerコマンド

インストール

$ bower install [package_name]
$ bower i [package_name]

// bowerに未登録のパッケージ
$ bower install http://ライブラリのURL

// dependencies(本番)に追加
$ bower install [package_name] --save

// devDependencies(開発時)に追加
$ bower install [package_name] --save-dev
$ bower install [package_name] -D

アンインストール

$ bower uninstall [package_name]

// dependencies(本番)から削除
$ bower uninstall [package_name] --save

// devDependencies(開発時)から削除
$ bower uninstall [package_name] --save-dev
$ bower uninstall [package_name] --D

アップデート

// まとめて
$ bower update

// 特定パッケージを上書き
$ bower [package_name] install

その他

// bower全パッケージを表示
$ bower search

// 特的キーワードのパッケージを表示
$ bower search [key]

// インストールしたパッケージを表示
$ bower list

// bowerのアップデート
$ npm update -g bower