Node.js プロジェクト に Bower 設定 を 追加する

0 件のコメント

Bower も Node.js の package.json と同じく bower initbower.json というプロジェクトファイルが作成されます。 プロジェクトに関する情報、依存関係はすべて bower.json へ保存されます。

Node.js で組み合わせて Webアプリケーション開発 に向けて利用する場合、「bower.json の作成」と「.bowerrc の作成」を行うことでプロジェクトの準備ができます。 以下ではそれぞれについて見ていきます。

なお、Node.js と組み合わせる場合、保存ディレクトリで少し問題が出るので、 あとに記載する .bowerrc ファイルを作成することで回避します。

bower.json 作成

Node.js プロジェクト のルートディレクトリにおいて以下のコマンドを実行します。

1
bower init

ウィザードが表示されるので質問回答をしていくと bouwer.json が作成されます。 ウィザード中の質問については以下にまとめました。

質問 概要
? 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 を選択します。

bower.json のその他のオプションについては「bower.json の 仕様 (日本語)」を参照してください。

保存先の変更 (.bowerrc 作成)

標準のままだと bower_components の下に配置されます。 このままだと Node.js の Webアプリ プロジェクト上において公開フォルダ配下にならないので困ります。 そこで、以下のファイル .bowerrc を作成することで保存先を public/third_party 配下に変更します。

作成する .bowerrc ファイルのサンプルは以下のようになります。 配置場所は bower.json と同じディレクトリです。

.bowerrc

1
2
3
{
  "directory": "public/third_party"
}

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