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をタイポしまくって面倒だった。
