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

bowerでjsのライブラリを管理する

javascriptのライブラリもgemとかcocoapodみたいに管理できないかなーとググってみたら良さそうなのがあったので使ってみました。

Twitter社製のbowerです。
http://bower.io/

install

npmでインストールするので、npmが入っていない人はNodeJSからインストールしてください。

$ npm install -g bower

使い方

コマンドからパッケージを指定してインストール

jqueryをインストール。

$ bower install jquery

versionも指定できます。

$ bower install jquery#1.8.3

インストール可能なパッケージを探す

$ bower search jquery

こんな感じでずらずらと出てきます。

Search results:

    jquery git://github.com/components/jquery.git
    jquery-ui git://github.com/components/jqueryui
    jquery.cookie git://github.com/carhartl/jquery-cookie.git
    jquery-placeholder git://github.com/mathiasbynens/jquery-placeholder.git

jsonファイルを作成してインストールする

gemで言うGemfile、cocoapodで言うPodfileの様な形式で、bowerもパッケージを管理できます。

bower.jsonを作成して

{
    "name": "sample",
    "version": "0.0.0",
    "dependencies": {
        "jquery": "~2.0.0",
        "jquery-ui": "latest"
    }
}

jsonを作成したディレクトリでinstallを実行します。

$ bower install

bower.jsonの作成はbower initの実行で作成することも可能です。(入力項目がちょっと多くてめんどくさい)

installディレクトリについて

bowerは何も設定をしなければ、installを実行したディレクトリの直下にbower_componentsというディレクトリを作成し、ライブラリをダウンロードします。

なので、読み込む際はこんな感じで読み込んでおけば、Versionを変えたい時とかも、bowerを実行するだけで切り替えが可能です。

<script src="/bower_components/jquery/jquery.min.js"></script>

installディレクトリを変更したい

bowerからinstallされるディレクトリをbower_components以外の場所に変更することもできます。

同じディレクトリに、.bowerrcファイルを作成します。

{
    "directory": "js/libs"
}

これで、bower installでダウンロードされるライブラリはjs/libs以下になります。

最後に

普通、こういうパッケージ管理ツールでインストールしたライブラリはignoreの対象にしてコミットしませんが、bowerはただダウンロードしてきてるだけなので、コミットしちゃっていいんじゃないかなーと個人的には思います。

普通に便利でした。