jQueryやBootstrapなど、JavascriptやCSSのフレームワークやライブラリを使わないプロジェクトはめっきり減り、組み込むものは増えるばかりです。
そこで少し前からWebのクライアントサイドで使うJavascriptやCSSのパッケージ管理ツールをみかけるようになりましたが、今回twitterから公開されているBOWERというパッケージ管理ツールを使ってみました。
nodeはインストール済みとして、パッケージを利用する立場で話をすすめます。
まずはnpmを使ってインストール。
|
1 |
$ npm install -g bower |
プロジェクトのルートに.bowerrcというファイルを作ってダウンロードしたファイルを置く場所などを指定します。今回はパッケージをインストールするディレクトリとパッケージの依存関係を指定するJSONファイルの指定のみ。
|
1 2 3 4 |
{ "directory": "public/components", "json": "bower.json" } |
bower.jsonにはインストールするパッケージを列挙します。バージョンの指定して特定のバージョンをインストールすることもできます。また、batmanのようにまだbowerのリポジトリにないものは直接在処を指定します。
|
1 2 3 4 5 6 7 8 9 10 |
{ "dependencies": { "jquery": null, "jquery-ui": null, "bootstrap": null, "html5shiv": null, "underscore": "1.4.4", "batman": "https://github.com/Shopify/batman.git" } } |
あとはプロジェクトのディレクトリの配下で以下のコマンドを実行すれば指定したディレクトリ（ここではpublic/components）にパッケージごとにディレクトリが作られてインストールされます。
|
1 |
$ bower install |
インストールされたパッケージの確認。
|
1 2 3 4 5 6 7 8 9 10 11 |
$ bower list bower discover Please wait while newer package versions are being discovered $ ├── batman#0.14.1 ├─┬ bootstrap#2.3.1 │ └── jquery#1.8.3 (1.9.1 now available) ├── html5shiv#3.6.2 ├── jquery#1.8.3 (1.9.1 now available) ├─┬ jquery-ui#1.10.2 │ └── jquery#1.8.3 (1.9.1 now available) └── underscore#1.4.4 |
“jQueryに新しい1.9.1というバージョンがあるよ”と教えてくれているので、試しにjQueryを1.9.1のバージョンを指定してupdateしてみます。
するとbootstrapはjQueryの1.8.xが必要ですという警告が表示されます。
(注)このときjQuery1.9.1はインストールされるようです。
|
1 2 3 4 5 6 7 8 9 |
$ bower update : Please note that requires jquery ~1.9.1 jquery-ui requires jquery >= 1.8 bootstrap requires jquery ~1.8.0 Resolved to jquery v1.9.1, which matches the requirement defined in the project's bower.json. Conflicts may occur. |
(おまけ1)
以下のように.zshrcにコードを追加すればbowerコマンドで補完が効きます。
|
1 2 |
$ bower completion >> ~/.zshrc $ source ~/.zshrc |
(おまけ2)
bootstrapは、私が試した範囲ではjQuery1.9.xでも問題ありませんでしたが、公式には未対応のようです。
