JavaScript (HTML5): Bower 導入

Bower とは

Bower とは JavaScript のライブラリパッケージ管理ツールで、実態は自動 git clone ツールです。

Bower のインストール

ターミナルでインストールします。

$ [sudo] npm install -g bower

プロジェクトの作成

プロジェクトを作成したいディレクトリでコマンドをうちます

$ bower init

下記情報の入力を求められます。一つ一つ聞いてくるので、そのままエンターキーを押していけば空文字、あるいは色付きの文字が入力されます。

[?] name: 
[?] version: 0.0.0
[?] description: 
[?] main file: 
[?] keywords: 
[?] authors: 
[?] license: MIT
[?] homepage: 
[?] set currently installed components as dependencies? 
[?] add commonly ignored files to ignore list? 
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? YesN) 

bower.json が生成されます。
name だけ hello world としました。

{                                                                           
  "name": "hello world",
  "version": "0.0.0",
  "authors": [
    "Nobuhiro Takahashi <************>"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

ライブラリのインストール

例えば jquery を入れる場合は

$ bower install jquery --save

bower_components ディレクトリにコンポーネントとしてインストールされます。
bower.json に jquery が追加されます。

.
├── bower.json
└── bower_components
    └── jquery
        ├── README.md
        ├── bower.json
        ├── component.json
        ├── composer.json
        ├── jquery-migrate.js
        ├── jquery-migrate.min.js
        ├── jquery.js
        ├── jquery.min.js
        ├── jquery.min.map
        └── package.json
{                                                                           
  "name": "hello world",
  "version": "0.0.0",
  "authors": [
    "Nobuhiro Takahashi <************>"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
     "jquery": "~2.0.3"
  }
}

bower.json でライブラリをインストール

プロジェクトごとにライブラリを入れ直す、セットアップしなおすには、上記手順を毎回踏まなければいけません。
しかし今回作成したようなインストールすべきライブラリがまとめられた bower.json が事前に用意されている場合、より簡単にインストールできます。

dependencies または devDependencies が書かれた bower.json がある状態で

$ bower install

とすると、必要なライブラリを取得してきて、bower_components ディレクトリを作成してくれます。