読者です 読者をやめる 読者になる 読者になる

Bowerをさわってみた

TwitterがJavaScript framework "Flight"を公開していて、ちょっと触ってみようかなと思ってみてみたら、Installにはbowerを使うことをおすすめしますよ的なことが書いてあった。
bowerってなんだべと思ったら、こちらはTwitterが昨年公開していたHTML、CSS、JSのパッケージマネージャだった。

ということで、Flightの前にBowerを試してみることに。

まずは、bowerをnpmを使ってインストール。

~/% npm install bower -g
....
bower@0.7.0 /usr/local/share/npm/lib/node_modules/bower
├── stable@0.1.3
├── archy@0.0.2
├── colors@0.6.0-1
├── tmp@0.0.16
├── async@0.1.22
├── mkdirp@0.3.4
├── semver@1.1.2
├── request@2.11.4
├── hogan.js@2.0.0
├── lodash@0.9.2
├── nopt@2.0.0 (abbrev@1.0.4)
├── rimraf@2.0.3 (graceful-fs@1.1.14)
├── fstream@0.1.21 (inherits@1.0.0, graceful-fs@1.1.14)
├── tar@0.1.14 (inherits@1.0.0, block-stream@0.0.6)
├── vows@0.6.4 (eyes@0.1.8, diff@1.0.4)
├── rc@0.0.7 (config-chain@1.1.4, optimist@0.3.5)
├── glob@3.1.17 (inherits@1.0.0, graceful-fs@1.1.14, minimatch@0.2.9)
├── read-package-json@0.1.12 (graceful-fs@1.1.14, lru-cache@2.0.4, slide@1.1.3, npmlog@0.0.2)
└── unzip@0.0.4 (pullstream@0.0.4, binary@0.3.0)

続いて、nodeのexpressでサンプル用のアプリケーションを作成。

~/samples/node/% pwd
/Users/chris/samples/node
~/samples/node/% express bower-sample

   create : bower-sample
   create : bower-sample/package.json
   create : bower-sample/app.js
   create : bower-sample/public
   create : bower-sample/public/javascripts
   create : bower-sample/routes
   create : bower-sample/routes/index.js
   create : bower-sample/routes/user.js
   create : bower-sample/public/images
   create : bower-sample/views
   create : bower-sample/views/layout.jade
   create : bower-sample/views/index.jade
   create : bower-sample/public/stylesheets
   create : bower-sample/public/stylesheets/style.css

   install dependencies:
     $ cd bower-sample && npm install

   run the app:
     $ node app

依存モジュールをインストール。

~/samples/node/bower-sample/% npm install
....
npm http 304 https://registry.npmjs.org/formidable/1.0.11
jade@0.28.1 node_modules/jade
├── commander@0.6.1
├── mkdirp@0.3.4
└── coffee-script@1.4.0

express@3.0.6 node_modules/express
├── methods@0.0.1
├── fresh@0.1.0
├── range-parser@0.0.4
├── cookie-signature@0.0.1
├── buffer-crc32@0.1.1
├── cookie@0.0.5
├── commander@0.6.1
├── debug@0.7.0
├── mkdirp@0.3.3
├── send@0.1.0 (mime@1.2.6)
└── connect@2.7.2 (pause@0.0.1, bytes@0.1.0, formidable@1.0.11, qs@0.5.1)

これで、以下のコマンドで起動する状態に。

~/samples/node/bower-sample/% node app   
Express server listening on port 3000

ようやくここから本題。
まずはjqueryをインストール。

~/samples/node/bower-sample/% bower install jquery
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.9.0
bower copying /Users/chris/.bower/cache/jquery/cf68c4c4e7507c8d20fee7b5f26709d9
bower installing jquery#1.9.0

最新版の1.9.0が、components/jquery/ フォルダ以下に入りました。
バージョンを指定するときは、#に続けてバージョンを入れます。

~/samples/node/bower-sample/% bower install jquery#1.8.1
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.8.1
bower copying /Users/chris/.bower/cache/jquery/cf68c4c4e7507c8d20fee7b5f26709d9
bower installing jquery#1.8.1

これでさっきの1.9.0を上書きする形で1.8.1が入りました。
もう一度最新版に戻してみます。

~/samples/node/bower-sample/% bower install jquery

今インストールされているモジュールの確認は bower list で。

~/samples/node/bower-sample/% bower list
bower discover Please wait while newer package versions are being discovered
/Users/chris/samples/node/bower-sample
└── jquery#1.9.0

続いて bootstrapをインストールしてみます。

~/samples/node/bower-sample/% bower install bootstrap 
bower cloning git://github.com/twitter/bootstrap.git
bower caching git://github.com/twitter/bootstrap.git
bower fetching bootstrap
bower checking out bootstrap#v2.2.2
bower copying /Users/chris/.bower/cache/bootstrap/c1ee45ee19795a66de4a0c45758fe0b1
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.8.3
bower copying /Users/chris/.bower/cache/jquery/cf68c4c4e7507c8d20fee7b5f26709d9
bower installing jquery#1.8.3
bower installing bootstrap#2.2.2

bootstrapは jqueryに依存しているので、先ほどの1.9.0が1.8.3に上書きされてしまいました。

~/samples/node/bower-sample/% bower list              
bower discover Please wait while newer package versions are being discovered
/Users/chris/samples/node/bower-sample
├─┬ bootstrap#2.2.2
│ └── jquery#1.8.3 (1.9.0 now available)
└── jquery#1.8.3 (1.9.0 now available)

ふむ...。モジュールの検索は bower search で。
pjaxのモジュールを探してみます。

~/samples/node/bower-sample/% bower search pjax  
Search results:

  - jquery-pjax git://github.com/defunkt/jquery-pjax.git
  - pjax-standalone git://github.com/thybag/PJAX-Standalone.git

2つ見つかったので、jquery-pjaxをインストール。

~/samples/node/bower-sample/% bower install jquery-pjax
bower cloning git://github.com/defunkt/jquery-pjax.git
bower caching git://github.com/defunkt/jquery-pjax.git
bower fetching jquery-pjax
bower checking out jquery-pjax#v1.3.0
bower copying /Users/chris/.bower/cache/jquery-pjax/30c8c3467630c6d00edb98b86ff40bc7
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.9.0
bower copying /Users/chris/.bower/cache/jquery/cf68c4c4e7507c8d20fee7b5f26709d9
bower installing jquery#1.9.0
bower installing jquery-pjax#1.3.0

listコマンドで各モジュールのバージョンを確認すると1.9.0になってました。

~/samples/node/bower-sample/% bower list
bower discover Please wait while newer package versions are being discovered
/Users/chris/samples/node/bower-sample
├─┬ bootstrap#2.2.2
│ └── jquery#1.9.0
├── jquery#1.9.0
└─┬ jquery-pjax#1.3.0
  └── jquery#1.9.0

パッケージ用のファイルを作ってnodeのpackage.jsonみたいなことができるので、一度components以下を前削除して、アプリケーションルートに、component.jsonとして以下のファイルを作成。

{   
    "name": "bower-sample",
    "version": "1.0.0",
    "dependencies": {
        "jquery"      : "~1.8.3",
        "jquery-pjax" : "~1.3.0",
        "bootstrap"   : "~2.2.2"
    }
}

bower install コマンドで、component.jsonに書かれているモジュールをインストール。

~/samples/node/bower-sample/% bower install
bower cloning git://github.com/defunkt/jquery-pjax.git
bower cloning git://github.com/twitter/bootstrap.git
bower cached git://github.com/defunkt/jquery-pjax.git
bower fetching jquery-pjax
bower cached git://github.com/twitter/bootstrap.git
bower fetching bootstrap
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.8.3
bower copying /Users/chris/.bower/cache/jquery/cf68c4c4e7507c8d20fee7b5f26709d9
bower checking out jquery-pjax#v1.3.0
bower copying /Users/chris/.bower/cache/jquery-pjax/30c8c3467630c6d00edb98b86ff40bc7
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out bootstrap#v2.2.2
bower copying /Users/chris/.bower/cache/bootstrap/c1ee45ee19795a66de4a0c45758fe0b1
bower checking out jquery#1.9.0
bower copying /Users/chris/.bower/cache/jquery/cf68c4c4e7507c8d20fee7b5f26709d9
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.8.3
bower copying /Users/chris/.bower/cache/jquery/cf68c4c4e7507c8d20fee7b5f26709d9
bower installing bootstrap#2.2.2
bower installing jquery#1.8.3
bower installing jquery-pjax#1.3.0

ってことは、基本的にcomponentsディレクトってアプリケーションのリポジトリには入れない方がいいのか。

で、元々やりたかったFlightのインストールも bower install flightで。

~/samples/node/bower-sample/% bower install flight
bower cloning git://github.com/twitter/flight
bower caching git://github.com/twitter/flight
bower fetching flight
bower checking out flight#v1.0.0
bower copying /Users/chris/.bower/cache/flight/1b2c3dda40d383a9303d7aa8a3f51636
bower cloning git://github.com/kriskowal/es5-shim.git
bower caching git://github.com/kriskowal/es5-shim.git
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.8.3
bower copying /Users/chris/.bower/cache/jquery/cf68c4c4e7507c8d20fee7b5f26709d9
bower fetching es5-shim
bower checking out es5-shim#v2.0.5
bower copying /Users/chris/.bower/cache/es5-shim/a979ce4a53833f8034ece8837d071717
bower installing jquery#1.8.3
bower installing flight#1.0.0
bower installing es5-shim#2.0.5

flightについてはまた別途。

どうでもいいけど、bowerとbrewをタイポしまくって面倒だった。