yaakaito.org

半周遅れでBower使ってみる

Bower, JavaScript

こんにちは!うきょーです!curlしにいくのがだるいです。 そういやbowerってあったなと思ったので試してみたメモ。といってもまだ使ってみたレベルなので使い方くらいです。

bower をインストール

1
$ npm install -g bower

やりましたね!

どんな品揃えかみてみる

searchを引数なしでやると全部出てきます。

1
$ bower search

ドドドドドドドーーーー!!!ときて僕のScrollback Linesが足りなくなりました。行数でも数えてみます。

1
2
$ bower search | wc -l
1505

すごい!むかし30個くらいしかなかった気がする!!! jQuery PlugingとかBackboneの拡張とか、Angularの拡張はたくさんありました。(関係ないけどBackboke Pluginとか名前になってるか分からないのでこう書いてる)

で、大体有名どころとそのプラグインはあるし、npmも組み合わせればほとんど大丈夫だろなーという感じでした。

使ってみる

大体npmと似たような感じで使います。例えばjQueryほしいなーと思ったら、

1
$ bower install jquery

これで components というディレクトリが出来るので、ここにjQueryが入ってます。

1
2
3
4
5
6
7
8
9
10
$ tree
.
└── components
    └── jquery
        ├── component.json
        ├── composer.json
        ├── jquery-migrate.js
        ├── jquery-migrate.min.js
        ├── jquery.js
        └── jquery.min.js

npmでいうところのnode_modulesですね。あとはほしいものをどんどん突っ込んでいけば

1
2
3
4
5
6
7
8
$ bower install jasmine
$ bower install backbone
$ tree -L 2
.
└── components
    ├── backbone
    ├── jasmine
    └── jquery

という感じに揃っていきます。便利ですね。

component.json

npmで言うところのpackage.jsonですね。中身もほぼ一緒です。

1
2
3
4
5
6
7
8
{
  "name" : "thogehoge",
  "version" : "0.0.0",
  "dependencies" : {
    "backbone" : "~1.0.0",
    "jquery" : "~1.9.1",
  }
}

みたいに書いておいて、

1
$ bower install

すればdependenciesが全部componentsに入ります。

便利そうかどうか

まあ便利なんじゃないでしょうか、ロードするときにパスが長くなるのがちょっと面倒くらいですね。 この辺は多分git cloneしてきてるだけなので、元のリポジトリ依存っぽいような臭いがします。(たいして調べてないのでテキトーです。)

ただでさえ汚くなりがちなJavaScriptのリポジトリですが、componentsをgitignoreしておけばちょっとは綺麗になりそうですね。