Bower の 使い方

0 件のコメント

Bower の 基本的な使い方 および よく使うコマンド についてまとめてみました。 初心者向け Bower 入門 といったところでしょうか。

目次

概要

Bower を 利用した Webフロントエンド開発 を 行う場合、大まかには以下のような流れで始めていきます。 以下の流れを読むことでざっくり Bower を利用する イメージ は出来るかと思います。

  1. ワークディレクトリ の 作成

    以下のサンプルコマンドでは "sample" という名前の ワークディレクトリを作成し、そのフォルダへ移動しています。 以下の例ではすべてコマンドで実行していますが、エクスプローラーでフォルダを作成して該当フォルダへ移動しても良いです。

    1
    2
    3
    > cd /d "D:\workspace"
    > mkdir sample
    > cd sample
  2. 初期化(bower.json の 作成)

    ウィザードに従って質問に答えていくことで bower.json を作成します。 ここで作成する bower.json は、この後 パッケージ を インストール した際 に パッケージ情報 を書き込む先になります。 ウィザードで質問される詳しい内容は以下の "bower.json 初期化時の質問 を参照ください。

    1
    > bower init
  3. パッケージのインストール

    ここではサンプルとして jQuery の 1.x をインストールしてみます。 パッケージインストールは bower install <パッケージ名>#<バージョン> で指定できます。 --save のオプションを指定することで bower.json にインストールしたパッケージ情報を保存できます。

    1
    > bower install jquery#1 --save
  4. パッケージの利用

    ワークディレクトリ "sample" の直下に "index.html" を作成する場合、以下のサンプルコードのような実装を行うとインストールしたパッケージが利用できます。 単純に scriptタグ で JavaScript を呼び出すだけです。

    /sample/index.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>sample html title</title>
        <script src="./bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        sample html body
    </body>
    </html>

以上で一通りの利用はできるかと思います。 細かなコマンドの使い方はこの後に記載していきます。

package 操作

以下ではパッケージ操作に関するコマンドの利用方法を少し詳しく見ていきます。

パッケージ の 追加

  • bower.json に従ってパッケージをインストールする

    引数に何も指定しない場合、ワークディレクトリに存在する bower.json に記載されているパッケージを集めてきます。

    1
    > bower install
  • "jquery" パッケージ を インストール する

    パッケージ名を指定すると該当のパッケージで最新のバージョンをインストールします。

    1
    > bower install jquery
  • "jquery" で 指定バージョン の パッケージ を インストール する

    特定のバージョンをインストールしたい場合は # に続けて バージョン番号 を記載します。

    1
    > bower install jquery#1
  • パッケージ公開されていない GitHub 上の パッケージ を インストール する

    Bower に公開されていないパッケージでも GitHub のプロジェクト名を指定することでインストールが可能です。

    1
    > bower install garafu/jquery.depend
  • GitHub 上の パッケージ を バージョン 指定して インストール する

    GitHub の プロジェクト名 に続いて バージョン指定することができます。

    1
    > bower install garafu/jquery.depend#1.1.0

パッケージ の 削除

  • インストール した パッケージ を 削除する

    bower uninstall <パッケージ名> でアンインストールできます。 インストールとアンインストールを連続で行うとなぜかうまく動作しません。 いったんコマンドプロンプトを閉じて再度アンインストールを実行するとうまくいくことが多いです。

    1
    > bower uninstall jquery

パッケージ の 更新

  • 指定したパッケージを最新バージョンにアップデートする

    単純に update コマンド で 最新版があればアップデートを行います。 ただし、最初にインストールした際に指定したバージョン条件に依存するため、パッチバージョンまで指定していた場合はアップデートされません。 ちなみに インストール時に指定したバージョン条件は 該当パッケージ配下にある bower.json の _target の値を確認するとわかります。 (逆に言えばこの値を変更すればバージョン条件を変更できます。)

    1
    > bower update jquery

利用可能な パッケージ の 検索

  • パッケージ を 検索する

    searchコマンドで登録されているパッケージに対してパッケージ名の部分一致検索を行って結果を一覧表示できます。

    1
    > bower search jquery

インストール済み パッケージ の 一覧表示

  • インストール済みパッケージ一覧を表示する

    list コマンド でインストール済みパッケージの一覧を確認できます。 同時に最新バージョンがでていないかの確認が行われるため、最新版がでているかどうかも確認できます。

    1
    > bower list

bower.json 利用

初期化(bower.json の作成)

  • bower.json を初期化します。

    init コマンド を利用してウィザードに従って bower.json を初期化します。 ウィザードで問われる細かな質問は以下の "bower.json 初期化時の質問" をご参照ください。

    1
    > bower init

bower.json へ パッケージ の 追加

  • bower.json へ インストール した パッケージ の 依存関係情報 を 保存する

    パッケージインストール時に --save オプションを利用することで bower.json へ保存できます。 開発時でしか利用しないパッケージであれば --save-dev オプション を利用します。

    1
    > bower install jquery --save
    1
    > bower install jquery --save-dev

bower.json から パッケージ の 削除

  • bower.json から インストール した パッケージ の 依存関係情報 を 削除する

    パッケージアンインストール時に --save オプションを利用することで bower.json へ反映できます。 開発時でしか利用しないパッケージであれば インストール時 と同様に --save-dev オプションで反映できます。

    1
    > bower uninstall jquery --save
    1
    > bower uninstall jquery --save-dev

おまけ

bower.json 初期化時の質問

bower.json の 初期化時 (init コマンド実行時) にウィザードで質問される内容について以下にまとめます。 何も指定しない時のデフォルト値は () 内の値または () 内 で 大文字 になっている値です。

質問 概要
? name (<ディレクトリ名>)

必須

レジストリに登録する際のパッケージ名を指定します。

? description

推奨

最大140文字までの文字列。 ユーザーがパッケージを特定できるような簡易な説明を記載します。 パッケージがどのようにできているかではなく、どんなことができるかを記載します。

? main file

推奨

パッケージのエントリーポイントファイルを指定します。 bower.json では 複数指定できるようですが、ウィザードからは複数指定できないようです。

? keywords

推奨

パッケージを検索しやすくするためのキーワードを指定します。 カンマ区切りで複数指定できます。

? authors

パッケージ作成にかかわる製作者を指定します。 カンマ区切りで複数指定できます。

John Doe <john@doe.com> (http://hondoe.com)

? license (MIT)

推奨

パッケージ利用する際のライセンスを特定できる名前 または URL、パス を指定します。

? homepage

作成するパッケージに関する詳細を記載したホームページのURLを指定します。 特に指定がなければ GitHub プロジェクト に フォールバック します。

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

既に配置済みのパッケージを dependencies に追加するかどうか

新規作成であればそもそも追加しているパッケージなどないので Y でも N でも変わりません。 既存の JavaScript プロジェクトに対して bower.json を作成する場合、Y にすると良いと思います。

? add commonly ignored files to ignore list? (Y/n)

一般的に無視するファイルを ignore リスト に追加するかどうか

Y 一択で。

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

このパッケージを間違って一般公開してしまわないようプライベートとして設定するかどうか

作成するパッケージの事情にあわせて 公開/非公開 を設定してください。

? Looks good? (Y/n)

これまでに答えてきた内容をもとに bower.json のサンプルができているので、問題なければ Y を選択します。

参考記事

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!