読者です 読者をやめる 読者になる 読者になる

ぺーぺーSEのブログ

備忘録・メモ用サイト。

Bower入門

Bower JavaScript Node.js

Bower触ってみた。
下記の記事の前半npm・Node.js辺りを読んだ前提で書く。

blog.pepese.com

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.jsondevDependenciesに追加される。
また、「--save」つけるとbower.jsonDependenciesに追加される。
bower.jsondependenciesが記述されていれば今後は指定しなくとも「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" />