更新日: 2015年1月28日
jQuery & JavaScript

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

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

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

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

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

Bower のインストール

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


$ brew install node.js

$ brew install node.js

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


$ npm install bower -g
/usr/local/bin/bower -> /usr/local/lib/node_modules/bower/bin/bower
...

$ npm install bower -g

/usr/local/bin/bower -> /usr/local/lib/node_modules/bower/bin/bower

...

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

バージョン確認。


$ node -v
v0.10.28
$ npm -v
2.4.1
$ bower -v
1.3.12

$ node -v

v0.10.28

$ npm -v

2.4.1

$ bower -v

1.3.12

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

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


$ mkdir test
$ cd test
$ bower init
[?] May bower anonymously report usage statistics to improve the tool over time? No
[?] name: first_app
[?] version: 0.0.1
[?] description: first app
[?] main file: first_app.js

$ mkdir test

$ cd test

$ bower init

[?] May bower anonymously report usage statistics to improve the tool over time? No

[?] name: first_app

[?] version: 0.0.1

[?] description: first app

[?] main file: first_app.js

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


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

[?] what types of modules does this package expose? (Press <space> to select)

❯⬡ amd

⬡ es6

⬡ globals

⬡ node

⬡ yui

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

続いて author や license 設定など。


[?] keywords: first, app
[?] authors: (Takafumi Yamano <*****@example.com>)
[?] license: MIT
[?] homepage:
[?] set currently installed components as dependencies?: Yes
[?] add commonly ignored files to ignore list?: Yes
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry?: Yes

[?] keywords: first, app

[?] authors: (Takafumi Yamano <*****@example.com>)

[?] license: MIT

[?] homepage:

[?] set currently installed components as dependencies?: Yes

[?] add commonly ignored files to ignore list?: Yes

[?] would you like to mark this package as private which prevents it from being accidentally published to the registry?: Yes

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


{
  name: 'first_app',
  version: '0.0.1',
  authors: [
    'Takafumi Yamano <*****@example.com>'
  ],
  description: 'first app',
  main: 'first_app.js',
  keywords: [
    'first',
    'app'
  ],
  license: 'MIT',
  private: true,
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

[?] Looks good?: Yes

{

name: 'first_app',

version: '0.0.1',

authors: [

'Takafumi Yamano <*****@example.com>'

description: 'first app',

main: 'first_app.js',

keywords: [

'first',

'app'

license: 'MIT',

private: true,

ignore: [

'**/.*',

'node_modules',

'bower_components',

'test',

'tests'

]

}

[?] Looks good?: Yes

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


$ ls
bower.json

$ ls

bower.json

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

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


$ bower install jquery
$ tree -L 4
.
├── bower.json
└── bower_components
    └── jquery
        ├── MIT-LICENSE.txt
        ├── bower.json
        ├── dist
        │   ├── jquery.js
        │   ├── jquery.min.js
        │   └── jquery.min.map
        └── src
            ├── ajax
            ├── ajax.js
            ...

$ bower install jquery

$ tree -L 4

├── bower.json

└── bower_components

└── jquery

├── MIT-LICENSE.txt

├── bower.json

├── dist

│ ├── jquery.js

│ ├── jquery.min.js

│ └── jquery.min.map

└── src

├── ajax

├── ajax.js

...

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

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


$ bower install jquery#1.11.2

$ bower install jquery#1.11.2

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


$ bower install jquery --save
$ bower install underscore --save

$ bower install jquery --save

$ bower install underscore --save

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

bower.json

  "dependencies": {
    "jquery": "~2.1.3",
    "underscore": "~1.7.0"
  }

"dependencies": {

"jquery": "~2.1.3",

"underscore": "~1.7.0"

}

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


$ bower install qunit --save-dev

$ bower install qunit --save-dev

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

bower.json

  "devDependencies": {
    "qunit": "~1.*.*"
  }

"devDependencies": {

"qunit": "~1.*.*"

}

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


$ bower install --production

$ bower install --production

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

その他 bower のコマンド

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


$ bower list

$ bower list

ライブラリをサーチ。


$ bower search jquery

$ bower search jquery

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


$ bower info jquery

$ bower info jquery

ライブラリを（jquery）をアンインストール。


$ bower uninstall jquery

$ bower uninstall jquery

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

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

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

オライリーのJavaScritp本（通称サイ本）は、昔かなり読み込みました。

JavaScript 第6版

jQuery レッスンブック jQuery2.X/1.X対応

>> 次の記事 : CoffeeScript入門、クラス継承とメソッドのオーバーライド

<< 前の記事 : Underscore.jsでメソッドチェインの書き方

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

Bower のインストール

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

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

その他 bower のコマンド

Leave Your Message! コメントをキャンセル