Bowerの使い方、JavaScriptパッケージの管理〜基本操作

スポンサーリンク

昨日の JavaScript Lemmatizer リリースの際に、JavaScript ライブラリのパッケージ管理に Bower を使ってみました。とりあえず使うだけならとても簡単で、Ruby/Rails で Bundler での gem 管理等に慣れていれば、すぐわかると思います。

【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました
スポンサーリンク

Bower に関しては、とにかく以下の記事が分かりやすくて大変助かりました。ほんと感謝です。

Bower入門(基礎編) – from scratch
Bower入門(応用編) – from scratch

Bower のインストール

まず node.js を homebrew でインストール。

続いて npm で bower インストール。

-g オプションは、bower をグローバルにインストールするためのオプション。

バージョン確認。

Bower の設定情報をセットアップ

とりあえず初回ということで、test ディレクトリを作成して試してみました。bower init コマンドで、ディレクトリの bower 初期化。質問が続くので、1個ずつ答えていきます。

この辺りまでは問題ない感じですかね。アプリ名やバージョンとか、main file はとりあえず適当に。

what types of ~ の質問はチェックなしで Enter。

続いて author や license 設定など。

以上のように回答して、最後に設定内容の確認です。

以上で bower.json が生成され、確認した内容がそのまま bower.json の中身となります。

jQuery をインストールしてみる

試しに jQuery をインストール。名前だけ指定すると最新バージョンのパッケージをインストールします。パッケージは、bower_components ディレクトリにインストールされます。

bower_components/jquery/dist/jquery.min.js を script src=”” に設定してやるとインストールした jquery を読み込める。src での指定がちょっと面倒臭い気がしますけれど、Rails のマニフェストファイルのような仕組みはないっぽい。

バージョンを指定してインストールするには、次のようにする。

依存関係を bower.json に明記してインストールするには、–save オプションを使う。

以下のように dependencies が記録されます。

bower.json

テストフレームワークなどは開発環境だけ必要なので、–save-dev オプションを付ける。

すると以下のように devDependencies が記録される。

bower.json

本番環境でインストールを行う場合、–production オプションをつけると、この devDependencies に指定されたライブラリはインストールされません。

なるほど、dependencies や devDependencies の情報を元に環境ごとにインストール対象をコントロールして、ライブラリのインストールを行えるわけです。

その他 bower のコマンド

インストール済みのライブラリを確認。

ライブラリをサーチ。

ライブラリのバージョンなど情報を確認。

ライブラリを(jquery)をアンインストール。

–save, –save-dev オプションをつけて uninstall すると、bower.json の依存の記録も削除されます。

以上ですが、Bower はとてもシンプルで JavaScript のパッケージを楽に管理できますね。Rails 用の bower-rails という gem もあるそうなので、Rails ではそれを使ってみようと思います。

bower-rails
Railsで外部JavaScriptライブラリなどのAssetを管理するなら、bower-railsが便利 | mah365

スポンサーリンク
オライリーのJavaScritp本(通称サイ本)は、昔かなり読み込みました。
 
スポンサーリンク

Leave Your Message!