Bowerまとめ(概要・導入・コマンド一覧)

  • 462
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

★★ bower list --paths でソースマッピングが確認できる。変更するにはどうすればいい?

本家サイト:Bower - A package manager for the web

BowerはJavaScript,CSS,HTMLなどを依存関係を含めて管理してくれる、フロントエンド用パッケージ管理ツール。Twitter製

各パッケージにある設定ファイル"bower.json"に依存パッケージが記述されており、インストール時に依存パッケージを含めて読み込む仕組み。プロジェクトディレクトリ内にbower.json があれば、そのプロジェクトはBower対応しているはず(Githubで今人気のライブラリを見てみると、ほぼ"bower.json"がある)。

環境構築時にプロジェクトに設定ファイル"bower.json"を置けば、それに記述されたパッケージ(依存パッケージ含む)を1コマンドで自動一括インストールすることもできる。

Yeoman(ひな形作成ツール)を構成するツールのひとつでもある。

この記事では、公開目的のBower対応パッケージを作って公開する方法には触れていない。
良さ気な記事 → bowerにパッケージを公開する方法

Bower自身のインストール

node.js, npm がインストール(インストール手順)されていることが前提。
コマンド操作するのでグローバルにインストール

インストール(グローバル)
npm install -g bower

使ってみる

"bower_test"ディレクトリが、プロジェクトのルートということで進める。
以下ターミナルでの操作。

初期化

bower_testディレクトリ にいる状態で初期化コマンド bower init

質問(詳細はこのページ下の「初期化時の質問」を参照)に答えていくことで、設定ファイル"bower.json"を自動作成してくれる。

パッケージをインストールしてみる

今回は、Modernizr,jQuery,normalize.cssをインストールしてみる

bower install modernizr jQuery normalize.css --save

結果

  • bower_test/bower_componentsディレクトリの中に各パッケージが依存パッケージも含めてインストールされた
  • --save オプションを付けているので、設定ファイル bower.json の dependencies(依存)に追記された

bower.json で、新プロジェクトに一括インストール

設定ファイル"bower.json"があれば、その記述にある全パッケージ(依存含む)をコマンドひとつで復元可能。
つまり、新プロジェクト開始時や配布時に超便利。

理解のためのサンプル操作

  1. 新しいプロジェクトのディレクトリ "bower_test2" を新規作成
  2. 上記「パッケージをインストールしてみる」の項で作った bower_test 内の bower.json を bower_test2 にコピー
  3. ターミナルで bower_test2 に移動し bower install
  4. bower.jsonに記述されたパッケージが依存パッケージも含めて一括インストールされた

コマンド

同じパッケージ(バージョン違いも)をインストールすると上書き(置き換え)になる

パッケージのインストール/アンインストール

bower install パッケージ名 最新バージョンをインストール
bower install パッケージ名#バージョン 特定バージョンのインストール
bower install http://code.jquery.com/jquery-1.10.1.js Bowerに未登録のパッケージ
bower install パッケージ名1 パッケージ名2 複数を同時にインストール
bower install パッケージ名 --save インストール & bower.jsonに依存関係(dependencies)を記述
bower install パッケージ名 --save-dev 開発中にしか使わないモジュールの場合はこれ

bower uninstall パッケージ名 アンインストール
bower uninstall パッケージ名 --save アンインストール & bower.jsonのリストから削除
bower uninstall パッケージ名 --save-dev 開発中にしか使わないモジュールの場合

パッケージのアップデート、指定バージョンに置き換え

bower update インストールされたパッケージをまとめてアップデート
bower install パッケージ名#バージョン 特定バージョンを新たにインストールで上書き
bower install 名前=パッケージ名#バージョン 名前を付けて特定バージョンを新たにインストール

bower.json を参照し、一括インストール

bower install bower.jsonに記述したパッケージ(依存パッケージも再帰的に含む)をインストール
bower install --production 開発用(--save-dev オプションを付けたの)を除いてインストール

その他

bower search Bower登録された全パッケージ一覧を表示
bower search [検索キーワード] キーワードでパッケージ検索
bower list インストールされたパッケージの一覧を表示。新バージョン出てたらそれも表示
npm update -g bower bower自身のアップデート(新Ver出てたら、上の bower list で促される)
bower info パッケージ名 バージョンや情報を確認
bower -v Bower自身のバージョン確認

関連ツール

  • gulp-bower-files bower.jsonに記述のmainだけ抜き出すことができる(mainのオーバーライドも可)。gulpやgruntなどの自動化ツールで活用できる
  • CodeKit Bowerもサポート。GUIで操作

インストール先ディレクトリの変更(必要なら)

.bowerrc(不可視ファイル、無ければ新規作成)に以下を記述
{"directory": "インストール先ディレクトリのパス"} 例:public/bower_components

初期化時の質問

矢印はテスト用入れた答え。適宜変更すること

[?] May bower anonymously report usage statistics to improve the tool over time? (Y/n)
意訳)Bower改善のため、匿名でユーザーの使用統計を繰り返し取得しますけどいいですか?→ Y(初回のみ聞かれる)

[?] name: (bower_test) プロジェクト名 → Test Project
[?] version: バージョン → 0.0.1
[?] description: 説明 → このプロジェクトの説明
[?] main file: メインファイル → index.html

[?] what types of modules does this package expose? (Press <space> to select)
❯⬡ amd
 ⬡ es6
 ⬡ globals
 ⬡ node
 ⬡ yui

このパッケージは、どんなモジュールにさらされますか? → チェック付けずEnter
(AMDはJSのコードをモジュールとして定義し非同期ないし遅延ロードするための仕組み、ES6はECMAScript6、globalsはわからん、yuiはYahoo!のUIライブラリ)

[?] keywords: キーワード → キーワード1,キーワード2
[?] authors: (ユーザー名 <Eメール>) 著作者 → そのままEnter
[?] license: (MIT) ライセンス → そのままEnter
[?] homepage: 解説ページ? → http://解説ページURL

[?] set currently installed components as dependencies? (Y/n) 

現状インストールされているコンポーネントの依存ファイルもセットしますか? → Y

[?] add commonly ignored files to ignore list? (Y/n) 通常無視するファイルを無視リストに追加しますか? → Y

[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? (y/N)

このパッケージを誤ってレジストリに発行されるのを妨げるプライベートとしてマークしますか? → Y

設定コードが表示され、
[?] Looks good? (Y/n) これでええの? → Y

Yesで、bower_testディレクトリに "bower.json" が作成される。

参考記事