bowerでつまづいた事のメモなど

先日のudrkで知った、ライブラリパッケージマネージャであるbowerが気になるとかいていたら、

muddydixonさんが最新版で記事かいてくれた(http://muddydixon.hatenablog.com/entry/2013/04/28/030402)ので、試した。

bowerの0.9.2がでたから最新の情報とかをまとめました http://t.co/AJlUx1BHSp @uzulla
— Muddy Dixon (@muddydixon) 2013年4月27日

大変有り難うございました。

まあ、大きな障害はありませんでしたが、CGIおじさんにはわりと意味がわからない所いくつかあったので追記しておきます。

初心者お役立ち情報(nodeを入れる所)

重要なこととして、最新版の0.11.2では手元ではbowerうごきませんでした。

とりあえずnvmで入れます(nodeenvってまだないんですかね？)

git clone git://github.com/creationix/nvm.git ~/nvm
. ~/nvm/nvm.sh
nvm install 0.10.5
nvm alias default 0.10.5

でnodeとnpmが入ります(楽になったな！！！)

. ~/nvm/nvm.sh
については.bash_profileとかに追記しておきましょう。

bowerインストール自体は、前述の記事を読みましょう。
まあ、npm install -g bower で入ります。

突然のエラー

私、jquery.BlockUIをつかうんですけど、なにげなくいれてみたらいきなり良い感じのエラーです。

$ bower install jquery.blockUI
bower cloning git://github.com/malsup/blockui#~2.55.0-2013.01.23
bower caching git://github.com/malsup/blockui#~2.55.0-2013.01.23
bower error status code of git: 128

There were errors, here's a summary of them:
- jquery.blockUI status code of git: 128
fatal: remote error: 
  malsup/blockui#~2.55.0-2013.01.23 is not a valid repository name
  Email support@github.com for help

いいですね、まさに第一歩で地雷を踏む感じ、ワクワクします。

repoの登録情報修正待ちでしょうかね、まあいいですよ、普通にgitURLを指定しました。

bower install git://github.com/malsup/blockui

bowerの使い方について

まあ、要はカレントディレクトリ(の、components)にザクザクはいるcpanm(gem)みたいな使い方ができるわけですが、普通に
$ bower install angular
こんな感じです。
ただ、carton(bundler)みたいに、そのディレクトリに設置されるので、ちょっと違うか。

cpanfileに相当するのはbower.jsonで、いきなりbower.json書いてもいいとおもうんですけど、多分ちょっと違うっぽくて

つどinstallするときに--saveオプションつけて
$ bower install --save angular
とかやると自動的にbower.jsonが作製されてアップデートされるっぽい。

普通に考えて、bower install繰り返して、最後にbower saveみたいなのがあるんじゃないのかとおもったけど、直近みつかりませんでした。
ここらはどういう風に回していくのが正しい流儀なのかちょっとわからない…。

bower.jsonについて

{
  "name": "sample",
  "version": "0.0.0",
  "dependencies": {
    "jquery": "~2.0.0",
    "jquery.blockUI": ”0”
  }
}

こんな風に書きます、これはまあそこらにある情報ですね。
バージョン指定しない(最新版)のは0かなーっておもってるんだけど、現在はバージョン指定部分はstrじゃないとダメっぽい(0だとおかしい)。

ただ、上のbower.jsonは、前述しましたけど、実際にはblockUIがなんかダメで、

{
  "name": "sample",
  "version": "0.0.0",
  "dependencies": {
    "jquery": "~2.0.0",
    "jquery.blockUI": "git://github.com/malsup/blockui"
  }
}

こんな風にかかざるをえなかったことを改めてお伝えしておきます。
この時「jquery.blockUI」はディレクトリ名として利用されるだけで、変更可能な模様

好きなDirectoryにファイルをbowerするには

bower insatallってやると、そのディレクトリにあるbower.jsonを見て、そこにcomponentsってディレクトリを作って、その中にホイホイ入れてくれるみたいです。
ただ、これって
/path/to/htdocs/components
という構造にしたい時に、/path/to/htdocs/bower.jsはちょっと気持ちわるいですよね。
(勝手な想像ですが、先進的なオシャレユーザーの皆様にはこれで便利な構成なのかもですけど、私はオールドスクールなので)

bower.jsonの横に.bowercを作りましょう*1
.bowerrc、やってみるまではユーザーのホームディレクトリにおかないといけないのかなっておもってましたけど、そんなことはなかった。

まあ、要はこういうことです、/path/to/prj/.bowerrcに、

{
  "directory" : "htdocs/js/vendor"
}

としておけば、

/path/to/prj/.bowerrc
/path/to/prj/bower.json
/path/to/prj/htdocs/js/vendor/blockui
/path/to/prj/htdocs/js/vendor/jquery

こんな風な構造に出来ます。
(もちろんbower install は、/path/to/prj/ で実行します)

どうでもいいけど

  "dependencies": {
    "jquery": "~2.0.0",
    "blockui": "git://github.com/malsup/blockui", ←ここの最後のカンマでエラーになる
  }

このIE的挙動がイラッ♪とします。
なんかJSONのパーサーが違うんですかね(node初心者)

わりと(.bowerrcとか)設定ファイルの文法まちがってると、エラーなく死ぬ事も多いので、辛いですね

じゃあどうやって実際にDLしたファイルを使うのか

これはクーールなやり方は特になくて、普通にそのはいったファイルを

<script src="/bower_components/jquery/index.js"></script>

しましょうって書いてある、えっ、オシャレじゃないよ！っておもったけど、
まあ統一的なものがないし、どうしようもないのかな。
(オシャレなやり方あるならだれか教えて下さい…)

まとめ

とりあえずググって色々することなく、gitとかからも、DLがぱってできるだけでも便利ですね。
PHPerおじさんでも使う事ができそうです。

*1:bower.jsonに書きたい！という意味がよくわかりました

uzullaがブログ

uzullaがブログです。