はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

トップ > Chrome > 「2日でできる JavaScriptTraining」をやってみた（モジュールの利用(bower)）

「2日でできる JavaScriptTraining」をやってみた（モジュールの利用(bower)）

Chrome JavaScript Node.js jQuery bower

「2日でできる JavaScriptTraining」をやってみた（モジュールの利用(bower)）

mixi の「2日でできる JavaScriptTraining」をやってみたのでメモ。 今回は、モジュール(bower)の使い方についてまとめておきます。

github.com

環境

動作したバージョンを以下にに書いておく。

  • 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

bower は、JavaScript、HTML、CSSなどを 共有して使えるようにするフロントエンドのエコシステム。

jQuery やBootstrap などバージョンを指定して取ってくることができる。

他の人が作ったモジュールを利用することや、 自分が作ったモジュールを公開することも できる。

ただ、bower はモジュール読み込みの 仕組みを提供していないので、 手動で書く必要がある。

bowerのインストール


npm install -g bower

bowerの実行

以下のコマンドで、 bower の設定ファイル bower.json を対話的に作成。


cd bowerモジュールを使いたいフォルダ
bower init

  1. name

    パッケージの名前を指定。

    パッケージとして公開する場合には、既に同じ パッケージ名が存在していないか確かめる必要が ある。

  2. version

    パッケージのバージョンを指定。

    バージョンの形式は Semantic Versioning に準拠している。 この形式は、一般的に X.Y.Z と記述される。

    • X: major version（後方互換性がなくなる変更）

      （major versionの 0 は開発版であることを示す）。

    • Y: minor version（前方互換性がなくなる変更）

    • Z: patch version（バグ修正など）

    自分の環境では訊かれなかったが、 手動で設定できそう。

  3. description

    パッケージの簡単な概要を記述

  4. main file

    パッケージが外部のパッケージに公開したいファイルを指定する。文字列と配列が指定できる。

  5. what types of module does this package expose?

    パッケージが外部にエンドポイントを公開する方法を明示する。

  6. keywords

    パッケージを検索でヒットさせるためのキーワードを指定する。

  7. authors

    パッケージの作者を指定。

  8. license

    ライセンスを指定。 デフォルトは MIT ライセンス。

  9. homepage

    パッケージの情報が見られる URL を記述。

  10. set currenttly installed components as dependencies?

    既に bower_components に含まれている コンポーネントをパッケージ設定に 含まれるようにするかどうかを指定。

  11. add commonly ignored files to ignore list?

    .gitignore などのファイルから、パッケージに含めないファイルの指定を 読み込むかどうか指定。

  12. would you like to mark this package as private which prevents it from being accidentaly published to the registry?

    bower のレジストリへ登録できないようにするか （private にするか）どうか指定。

  13. 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 のみで依存関係のあるパッケージをインストールしてくれる。