bower component、さくっと公開して広めよう


bowerのはなしです。前書いた記事は[こちら](http://qiita.com/fnobi/items/04a9ed5ff9efe220cb50)。

最近改めて読んでいたら、
bowerは **js以外のフロントのパーツも入れていい** ということに気づいて、
案外便利かもーと思っているところです。

(たとえば、```bower install bootstrap```には、bootstrapで使うcssもlessも全部入ってる)

そんなわけで、npmのpackageを作るみたいに、
bowerのcomponentを登録する方法まとめ。

## 公式を訳そう

それでだいたい説明おわりそう。
[http://bower.io/](http://bower.io/)より。

>Registering packages
>
>To register a new package:
>
> - There must be a valid manifest JSON in the current working directory.
> - Your package should use semver Git tags.
> - Your package must be available at a Git endpoint (e.g., GitHub); remember to push your Git tags!
>
>Then use the following command:
>
```bower register <my-package-name> <git-endpoint>```
>
>The Bower registry does not have authentication or user management at this point in time. It's on a first come, first served basis. Think of it like a URL shortener. Now anyone can run ```bower install <my-package-name>```, and get your library installed.
>
>There is no direct way to unregister a package yet. For now, you can request a package be unregistered.

つまり、bower componentを登録するには

- ```component.json```があるディレクトリで、```bower register <my-package-name> <git-endpoint>```を叩いてね。
- 公開されてるgit endpointを用意しておいてね。versionはtagで刻んでおいてね。

とのことです。結構簡単ですね。
(既にgithubに置いてたりしたら、component.json書いてversion切るだけ)

[jqueryのplugin registry](http://qiita.com/fnobi/items/346dd951438acff63fb2)にも似てますが、

- bowerはいまのところ、registryをwebで見るような仕組みもないので、github hookを仕掛ける必要がない。
- 中に入れるものはフロントのパーツならなんでもいいので、命名規則も少ない

という点で、こっちの方がさらにシンプルですね。
 
ただそのかわり、内部のディレクトリ構造がどうなってるか分らないのが、ちょっと不便。。
いちおう主要となるファイルは、```component.json```の```main```で指定することになってるんですが、指定してないcomponent多い。。。

## 作ってみよう

今回はたまたま、ちょっと前に作ったShakenBoxというjsのライブラリがあったので、
これをbowerに登録してみます。

なおbowerに上げるため、
js/lib に置いて使っていたjqueryは、bower componentのものを使うよう変更しました。
(まぁやらなくても上げられるはずですが)

```bash
% rm js/lib/jquery.js
% bower install --save jquery
% vi index.html #jquery読み込みのパスを components/jquery/jquery.js に
```

### githubに上げる

```bash
% ls
Gruntfile.js	components	index.html	node_modules	src
component.json	css		js		package.json

# ふつうにgit init 〜 最初のpush
% git init .
% git add .
% git commit
% git remote add origin git@github.com:nobii/ShakenBox.git
% git push origin master

# タグだけ切るのを忘れずに
% git tag 0.0.0
% git push origin --tags
```

### bowerにregister
component.jsonはこんなかんじ。
```bower init```を叩いて生成されたものを、ちょこっといじっただけです。

```json:component.json
{
  "name": "ShakenBox",
  "version": "0.0.0",
  "main": "js/ShakenBox.js",
  "ignore": [
    "node_modules",
    "components"
  ],
  "dependencies": {
    "jquery": "~2.0.3"
  }
}
```

今回は試しませんでしたが、
ここで指定したversionと、gitでtagとして使うversionは、
揃えないとだめだと思われます。(jquery pluginはそうでした)

では、いよいよ```bower register```を叩いてみましょう!

```bash
% bower register ShakenBox https://github.com/nobii/ShakenBox.git
Registering a package will make it visible and installable via the registry.
Proceed (y/n)? y
bower error Incorrect format
```

おこられるかもなーと思ったらやっぱりでした。
gitの場所は、git:// から始まるURLで指定しましょう。

```bash
% bower register ShakenBox git://github.com/nobii/ShakenBox.git
Registering a package will make it visible and installable via the registry.
Proceed (y/n)? y
registered ShakenBox to git://github.com/nobii/ShakenBox.git
```
 うまくいった。けっこうすぐ終わる。
では確認してみよう。

```bash
% cd another/directory

% bower install ShakenBox
bower cloning git://github.com/nobii/ShakenBox.git
bower caching git://github.com/nobii/ShakenBox.git
bower fetching ShakenBox
bower checking out ShakenBox#0.0.0
bower copying /Users/fujisawa-shin/.bower/cache/ShakenBox/6379d69828127eb30dd530e9443f6148
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#2.0.3
bower copying /Users/fujisawa-shin/.bower/cache/jquery/cf68c4c4e7507c8d20fee7b5f26709d9
bower installing ShakenBox#0.0.0
bower installing jquery#2.0.3

% ls components/
ShakenBox	jquery
% ls components/ShakenBox/
Gruntfile.js	css		js		src
component.json	index.html	package.json
```

ばっちりShakenBoxと、依存に入れてあったjqueryが、
componentsに格納された! かんたんやで。

### 気づいたこと

こうやって```bower install```したら、
jqueryは```components/ShakenBox/components/jquery```に入るかと思ってたんですが、
実際は```components/jquery```に置かれました。

すなわち、```すべての依存componentは並列に設置される```わけです。
これはhtmlからcomponentのjsなどにアクセスするパスを、シンプルにするためでしょう。

npmのinstallとは、このあたりが違うようです。
(nodeにはrequireとかindex.jsとかあるので、こういう配慮はいらない)

## bower componentをどんどんつくろう!

bowerは、前は「フロントのjs用のnpm」みたいに思ってたので、
それにしてはjsのパスが一定じゃなかったり、不便だなぁと思っていたのですが、
フロントで使うパーツは、なんでも置けるんですね。

サイトのある部分は、cssもjsも完全にbowerのcomponentに依存してる、とかもアリな訳です。

最近よくつかっている **ejsテンプレートのセットをbower化する** というのも面白いかもなぁ、と思っています。

また単純に、bowerにしておけば

- ```bower install xxx```だけで落としてこれる
- 依存管理もできる (してもらえる)

という点だけでも、ただgithubでライブラリを公開するより
メリットが大きいと思います。