「2日でできる JavaScriptTraining」をやってみた（モジュールの利用(bower)）
mixi の「2日でできる JavaScriptTraining」をやってみたのでメモ。 今回は、モジュール(bower)の使い方についてまとめておきます。
環境
動作したバージョンを以下にに書いておく。
-
Chrome 46.0.2490.86 m (64-bit)
-
Node.js v5.0.0
-
npm 3.4.1
-
gulp version 3.9.0
-
bower 1.6.5
-
-
6.モジュールを実装するトレーニング
モジュールシステム
フロントエンドにもいくつかモジュールシステムとそれに付随したエコシステム（パッケージ管理）がある。 その中にbower がある（Twitter が開発）。
bower
bower は、JavaScript、HTML、CSSなどを 共有して使えるようにするフロントエンドのエコシステム。
jQuery やBootstrap などバージョンを指定して取ってくることができる。
他の人が作ったモジュールを利用することや、 自分が作ったモジュールを公開することも できる。
ただ、bower はモジュール読み込みの 仕組みを提供していないので、 手動で書く必要がある。
bowerのインストール
npm install -g bower
bowerの実行
以下のコマンドで、 bower の設定ファイル bower.json を対話的に作成。
cd bowerモジュールを使いたいフォルダ
bower init
-
name
パッケージの名前を指定。
パッケージとして公開する場合には、既に同じ パッケージ名が存在していないか確かめる必要が ある。
-
version
パッケージのバージョンを指定。
バージョンの形式は Semantic Versioning に準拠している。 この形式は、一般的に X.Y.Z と記述される。
-
X: major version（後方互換性がなくなる変更）
（major versionの 0 は開発版であることを示す）。
-
Y: minor version（前方互換性がなくなる変更）
-
Z: patch version（バグ修正など）
自分の環境では訊かれなかったが、 手動で設定できそう。
-
-
description
パッケージの簡単な概要を記述
-
main file
パッケージが外部のパッケージに公開したいファイルを指定する。文字列と配列が指定できる。
-
what types of module does this package expose?
パッケージが外部にエンドポイントを公開する方法を明示する。
-
keywords
パッケージを検索でヒットさせるためのキーワードを指定する。
-
authors
パッケージの作者を指定。
-
license
ライセンスを指定。 デフォルトは MIT ライセンス。
-
homepage
パッケージの情報が見られる URL を記述。
-
set currenttly installed components as dependencies?
既に bower_components に含まれている コンポーネントをパッケージ設定に 含まれるようにするかどうかを指定。
-
add commonly ignored files to ignore list?
.gitignore などのファイルから、パッケージに含めないファイルの指定を 読み込むかどうか指定。
-
would you like to mark this package as private which prevents it from being accidentaly published to the registry?
bower のレジストリへ登録できないようにするか （private にするか）どうか指定。
-
Looks good?
この設定で問題なければ y を入力。
これで、
bower.jsonを作られる。
ディレクトリ構成の設定
bower install の前にディレクトリ構成の設定をしておく。 .bowerrcファイルを作っておく。
-
cwd
現在のworking directory を指定。
自分の環境では、何故かデフォで
publicフォルダ になっていたので、常にpublicフォルダを作れていたので変更。 -
directory
インストールされるコンポーネントのパス。 default では
bower_componentsフォルダにインストールされる。
最終的に、記述した.bowerrcファイルを示す。
{
"cwd": "./",
"directory": "./bower_components"
}
詳細：spec/config.md at master · bower/spec · GitHub
bower install
パッケージの検索は、Bower - Search か 以下のコマンドでできる。
bower search パッケージ名
Buttonsパッケージのインストールは以下のコマンド。
bower install --save Buttons
--saveオプションで、 bower.jsonファイルに依存関係のファイルが記述される。 今回の場合、"dependencies"プロパティの記述が追記される。
{
~
"dependencies": {
"Buttons": "~2.0.0"
}
}
"dependencies"に書いておけば、 新しいProject でもパッケージをインストールするときに bower install のみで依存関係のあるパッケージをインストールしてくれる。
参考リンク
