Bower入門
Bower触ってみた。
下記の記事の前半npm・Node.js辺りを読んだ前提で書く。
Bower
BowerはTwitter社が作ったJavaScriptのライブラリ管理をするパッケージマネージャ。
Node.jsのnpmみたいなもの。
インストール
> npm install -g bower [UserHome]\AppData\Roaming\npm\bower -> [UserHome]\AppData\Roaming\npm\node_modules\bower\bin\bower bower@1.3.12 [UserHome]\AppData\Roaming\npm\node_modules\bower ├── is-root@1.0.0 ├── stringify-object@1.0.0 ├── junk@1.0.1 ├── abbrev@1.0.5 ├── which@1.0.9 ├── chmodr@0.1.0 ├── osenv@0.1.0 ├── archy@0.0.2 ├── rimraf@2.2.8 ├── lru-cache@2.5.0 ├── bower-logger@0.2.2 ├── graceful-fs@3.0.5 ├── bower-endpoint-parser@0.2.2 ├── opn@1.0.1 ├── lockfile@1.0.0 ├── nopt@3.0.1 ├── retry@0.6.0 ├── tmp@0.0.23 ├── request-progress@0.3.0 (throttleit@0.0.2) ├── q@1.0.1 ├── chalk@0.5.0 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0) ├── shell-quote@1.4.2 (array-filter@0.0.1, array-map@0.0.0, array-reduce@0.0.0, jsonify@0.0.0) ├── bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3) ├── semver@2.3.2 ├── fstream@1.0.4 (inherits@2.0.1) ├── p-throttler@0.1.0 (q@0.9.7) ├── promptly@0.2.0 (read@1.0.5) ├── mkdirp@0.5.0 (minimist@0.0.8) ├── bower-config@0.5.2 (osenv@0.0.3, graceful-fs@2.0.3, optimist@0.6.1) ├── fstream-ignore@1.0.2 (inherits@2.0.1, minimatch@2.0.1) ├── tar-fs@0.5.2 (pump@0.3.5, tar-stream@0.4.7) ├── decompress-zip@0.0.8 (nopt@2.2.1, mkpath@0.1.0, touch@0.0.2, readable-stream@1.1.13, binary@0.3.0) ├── glob@4.0.6 (inherits@2.0.1, once@1.3.1, minimatch@1.0.0) ├── request@2.42.0 (caseless@0.6.0, json-stringify-safe@5.0.0, aws-sign2@0.5.0, forever-agent@0.5.2, oauth-sign@0.4.0, stringstream@0.0.4, tunnel-agent@0.4.0, qs@1.2.2, node-uuid@1.4.2, mime-types@1.0.2, form-data@0.1.4, bl@0.9.4, http-signature@0.10.1, tough-cookie@0.12.1, hawk@1.1.1) ├── bower-registry-client@0.2.3 (graceful-fs@2.0.3, request-replay@0.2.0, lru-cache@2.3.1, mkdirp@0.3.5, async@0.2.10, request@2.51.0) ├── cardinal@0.4.0 (redeyed@0.4.4) ├── mout@0.9.1 ├── update-notifier@0.2.0 (semver-diff@0.1.0, string-length@0.1.2, latest-version@0.2.0, configstore@0.3.2) ├── handlebars@2.0.0 (optimist@0.3.7, uglify-js@2.3.6) ├── inquirer@0.7.1 (figures@1.3.5, mute-stream@0.0.4, through@2.3.6, readline2@0.1.1, lodash@2.4.1, cli-color@0.3.2, rx@2.4.1) └── insight@0.4.3 (object-assign@1.0.0, chalk@0.5.1, async@0.9.0, lodash.debounce@2.4.1, os-name@1.0.3, tough-cookie@0.12.1, configstore@0.3.2, inquirer@0.6.0) > bower -v 1.3.12
プロジェクトディレクトリの作成
プロジェクト用のディレクトリを作成して初期化を行う。
対話式の部分は基本Enter/Yes。
> mkdir project > cd project > bower init ? name: project ? version: 0.0.0 ? description: ? main file: ? what types of modules does this package expose?: ? keywords: ? authors: ? license: MIT ? homepage: ? set currently installed components as dependencies?: Yes ? add commonly ignored files to ignore list?: Yes ? would you like to mark this package as private which prevents it from being accidentally published to the registry?: Yes { name: 'project', version: '0.0.0', license: 'MIT', private: true, ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests' ] } ? Looks good?: Yes
bower.jsonファイル（依存関係及び自分のライブラリの情報を記述）が作成される。
プロキシ設定は「.bowerrc」ファイル（ユーザホームかbower.jsonの隣におく）に行う。
> touch .bowerrc
■.bowerrc
{
"strict-ssl": false,
# "directory": "library", # 保存するディレクトリ名を指定したい場合 デフォルトは「bower_components」
"registry": "http://bower.herokuapp.com",
"proxy": "http://${username}:${password}@${proxy_host}:${proxy_port}",
"https-proxy": "http://${username}:${password}@${proxy_host}:${proxy_port}"
}★「https-proxy」のスキームは「https」ではなく「http」。
また、モノがGithubにある場合があるので、ここをみてgitのプロキシも設定しておく。
使い方
「bower install」コマンドでモジュールを取得およびbower_componentsディレクトリに配備してくれる。
> bower install --save-dev jquery
「--save-dev」つけるとbower.jsonのdevDependenciesに追加される。
また、「--save」つけるとbower.jsonのDependenciesに追加される。
bower.jsonのdependenciesが記述されていれば今後は指定しなくとも「bower instal」コマンドだけでライブラリがインストールされる。
テスト目的などで開発中にしか使わないモジュールの場合は「--save-dev」を使う。
バージョン指定したい場合は下記。
> bower install --save-dev jquery#2.1.3
直接URLから取得した場合は下記。
> bower install --save-dev http://code.jquery.com/jquery-2.1.3.js
取得した後は、HTMLで下記のように指定して使用。
<script src="/bower_components/jquery/dist/jquery.js" /> <script src="/bower_components/jquery/dist/jquery.min.js" />
