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

bowerのはなしです。前書いた記事はこちら。

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

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

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

公式を訳そう

それでだいたい説明おわりそう。
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にも似てますが、

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

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

作ってみよう

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

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

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

githubに上げる

% 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を叩いて生成されたものを、ちょこっといじっただけです。

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を叩いてみましょう!

% 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で指定しましょう。

% 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

 うまくいった。けっこうすぐ終わる。
では確認してみよう。

% 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でライブラリを公開するより
メリットが大きいと思います。