Bowerでフロントエンド向けライブラリ管理する

/

Bower

BowerはTwitter社が開発したフロントエンド開発向けのパッケージマネージャーです。
Bowerを使うとjQueryなどライブラリを簡単にインストール&管理する事が出来ます。

bower.io

名前の由来

公式サイトによればBowerという名前の由来は bowerbird = ニワシドリ から取られています。Bowerbirdは繁殖期になると樹の枝や葉をを使ってBower(あずまや)を作るという特徴があるようなので、パッケージをまとめるというイメージからつけられたようです。

Bowerのインストール

Bowerはnpmを利用してインストールします。
Node.jsの導入とnを使っての最新版へのアップデート/Koltatt

$ npm install -g bower

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

#パッケージのインストール
$ bower install [package]
#バージョンを指定してインストール
$ bower install jquery#3.1.0
# Gitのリポジトリや
$ bower install git://github.com/user/package.git
# URLも利用出来る
$ bower install http://example.com/script.js

パッケージを探す

パッケージはコマンドから検索出来るほかにBowerのサイトから探す事も出来ます。

$ bower seach jquery

パッケージのインストール先

Bowerによってインストールしたパッケージはデフォルトではbower_components/に置かれます。

<!-- bower.componentsと同じディレクトリに置かれたhtmlからパッケージを読み込む -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>

Bowerの管理

bower.json

Bowerはbower.jsonというファイルでパッケージとそのバージョンをまとめて管理することが出来ます。

# bower.jsonの初期化
# 初期化時に対話形式でプロジェクトの名前などを指定する
$ bower init

#install --saveオプションでbower.jsonに依存関係が書き込まれる
$ bower install jquery --save
{
  "name": "bower",
  "authors": [
    "[authors name] <mail@example.com>"
  ],
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests",
    "lib"
  ],
  "dependencies": {
    "jquery": "^3.1.0"
  }
}

bower.jsonではパッケージのバージョン表記の前に ^ を表記すればマイナーバージョンアップに、 ~ を表記すればパッチのアップデートにそれぞれ対応してくれます。

bower.jsonについて詳しくは以下のページを参照出来ます。
bower.jsonの詳しい解説 bower/Github

Bowerの設定

Bowerの設定を変更したい場合には.bowerrcファイルを編集します。

例えばデフォルトのインストール先のbower_componentsは名前が少しあからさまなので名前を変更したい時は、以下のように設定した.bowerrcを作成しパッケージををインストールします。

 {
   ‘directory’: ‘lib’
  } 

するとパッケージのインストール先がlib/変更されるで自分の好きな名前のディレクトリからパッケージを読み込む事が出来るようになります

<script src="lib/jquery/dist/jquery.min.js"></script>

あとがき

Bowerの機能はnpmやgulpなどと一部かぶる部分もありますがコンテンツが直接読み込むライブラリなどの管理をするならシンプルで扱いやすいです。gulpなどと違ってスクリプト書く必要も無いですし、プログラムに不慣れな人でも普段定番のライブラリをいくつか使っているならBowerを使うとプロジェクトの管理が楽になると思います。