Edited at

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

More than 5 years have passed since last update.

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.jsonmainで指定することになってるんですが、指定してない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でライブラリを公開するより

メリットが大きいと思います。