LoginSignup
8
9

More than 5 years have passed since last update.

@ymaru

Bower メモ

Posted at

Bower とは？

Bower
twitter社が作ったフロントエンド用のパッケージ管理ツールで、jquery/angularjs/reactなどのJSライブラリやbootstrapなどのCSSライブラリの管理を行えます。

インストール

bower のインストールは、npm から行えます。

$ sudo npm -g install bower
/usr/local/bin/bower -> /usr/local/lib/node_modules/bower/bin/bower
/usr/local/lib
└── bower@1.7.9 

$ bower -v
1.7.9
$

bower help

bower はサブコマンドで様々な操作を行うことができます。
bower helpでサブコマンド一覧を表示できます。

$ bower help

Usage:

    bower <command> [<args>] [<options>]
Commands:

    cache                   Manage bower cache
    help                    Display help information about Bower
    home                    Opens a package homepage into your favorite browser
    info                    Info of a particular package
    init                    Interactively create a bower.json file
    install                 Install a package locally
    link                    Symlink a package folder
    list                    List local packages - and possible updates
    login                   Authenticate with GitHub and store credentials
    lookup                  Look up a package URL by name
    prune                   Removes local extraneous packages
    register                Register a package
    search                  Search for a package by name
    update                  Update a local package
    uninstall               Remove a local package
    unregister              Remove a package from the registry
    version                 Bump a package version
Options:

    -f, --force             Makes various commands more forceful
    -j, --json              Output consumable JSON
    -l, --loglevel          What level of logs to report
    -o, --offline           Do not hit the network
    -q, --quiet             Only output important information
    -s, --silent            Do not output anything, besides errors
    -V, --verbose           Makes output more verbose
    --allow-root            Allows running commands as root
    -v, --version           Output Bower version
    --no-color              Disable colors
See 'bower help <command>' for more information on a specific command.

bower help サブコマンド でサブコマンドのヘルプが見れます。

$ bower help init

Usage:

    bower init [<options>]

Options:

    -h, --help              Show this help message
    Additionally all global options listed in 'bower help' are available

Description:

    Creates a bower.json file based on answers to questions.

bower init

アプリケーションで使うライブラリや依存関係を記述した bower.json を作成します。
bower init するといくつか質問されるので、答えていくと bower.json が作られます。

質問 デフォルト 説明
name ディレクトリ名 ライブラリの名前
description ライブラリの説明
main file ライブラリのエンドポイント
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? No 
$ mkdir bower
$ cd bower/
$
$ bower init
? name bower
? description 
? main file 
? keywords 
? authors ymaru
? license MIT
? homepage 
? set currently installed components as dependencies? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No
cidentally published to the registry? (y/N) 
{
  name: 'bower',
  authors: [
    'ymaru'
  ],
  description: '',
  main: '',
  license: 'MIT',
  homepage: '',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes
$ ls
bower.json

bower install

ライブラリをインストールします。

$ $ bower install jquery --save
bower not-cached    https://github.com/jquery/jquery-dist.git#*
bower resolve       https://github.com/jquery/jquery-dist.git#*
bower checkout      jquery#3.1.0
bower progress      jquery#* Receiving objects:  19% (27/141)
bower progress      jquery#* Receiving objects:  20% (29/141)
bower progress      jquery#* Receiving objects:  21% (30/141)
bower progress      jquery#* Receiving objects:  21% (31/141), 52.00 KiB | 22.00 KiB/s
bower progress      jquery#* Receiving objects:  23% (33/141), 116.00 KiB | 35.00 KiB/s
bower progress      jquery#* Receiving objects:  24% (34/141), 116.00 KiB | 35.00 KiB/s
bower progress      jquery#* Receiving objects:  24% (35/141), 132.00 KiB | 33.00 KiB/s
bower progress      jquery#* Receiving objects:  26% (37/141), 172.00 KiB | 37.00 KiB/s
bower progress      jquery#* Receiving objects:  26% (37/141), 188.00 KiB | 35.00 KiB/s
bower progress      jquery#* Receiving objects:  26% (37/141), 204.00 KiB | 30.00 KiB/s
bower progress      jquery#* Receiving objects:  26% (37/141), 220.00 KiB | 26.00 KiB/s
bower progress      jquery#* Receiving objects:  26% (37/141), 228.00 KiB | 17.00 KiB/s
bower progress      jquery#* Receiving objects:  27% (39/141), 236.00 KiB | 16.00 KiB/s
bower progress      jquery#* Receiving objects:  27% (39/141), 260.00 KiB | 14.00 KiB/s
bower progress      jquery#* Receiving objects:  31% (44/141), 268.00 KiB | 13.00 KiB/s
bower progress      jquery#* Receiving objects:  45% (64/141), 284.00 KiB | 12.00 KiB/s
bower progress      jquery#* Receiving objects:  63% (89/141), 316.00 KiB | 14.00 KiB/s
bower resolved      https://github.com/jquery/jquery-dist.git#3.1.0
bower install       jquery#3.1.0

jquery#3.1.0 bower_components/jquery

インストールしたライブラリは bower_components 配下に保存されます。
※パスは以下に記載している .bowerrc で変更できます。

$ find bower_components -type f 
bower_components/jquery/.bower.json
bower_components/jquery/AUTHORS.txt
bower_components/jquery/bower.json
bower_components/jquery/dist/core.js
bower_components/jquery/dist/jquery.js
bower_components/jquery/dist/jquery.min.js
bower_components/jquery/dist/jquery.min.map
bower_components/jquery/dist/jquery.slim.js
bower_components/jquery/dist/jquery.slim.min.js
bower_components/jquery/dist/jquery.slim.min.map
bower_components/jquery/external/sizzle/dist/sizzle.js
bower_components/jquery/external/sizzle/dist/sizzle.min.js
bower_components/jquery/external/sizzle/dist/sizzle.min.map
bower_components/jquery/external/sizzle/LICENSE.txt
bower_components/jquery/LICENSE.txt
bower_components/jquery/README.md
… 略 …
$

--save を付けると bower.json に依存関係が記述されます。
別環境に依存関係のファイルをインストールする場合、bower.json があれば、
bower install するだけで依存関係のファイルをすべてインストールしてくれます。

$ cat bower.json
{
  "name": "bower",
  "authors": [
    "ymaru"
  ],
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "^3.1.0"
  }
}

bower install jquery だと、最新版がインストールされます。
bower install jquery#1 で、v1 系の最新版がインストールされます。

bower list

インストールしているライブラリの一覧を表示します。

$ bower list
bower check-new     Checking for new versions of the project dependencies...
bower /Users/ymaru/bower
└── jquery#3.1.0
$

bower info

ライブラリのバージョンや情報を表示します。

$ bower info jquery
bower cached        https://github.com/jquery/jquery-dist.git#3.1.0
bower validate      3.1.0 against https://github.com/jquery/jquery-dist.git#*

{
  name: 'jquery',
  main: 'dist/jquery.js',
  license: 'MIT',
  ignore: [
    'package.json'
  ],
  keywords: [
    'jquery',
    'javascript',
    'browser',
    'library'
  ],
  homepage: 'https://github.com/jquery/jquery-dist',
  version: '3.1.0'
}

Available versions:
  - 3.1.0
  - 3.0.0
  - 2.2.4
  - 2.2.3
  - 2.2.2
  - 2.2.1
  - 2.2.0
  - 2.1.4
  - 2.1.3
  - 2.1.2
  - 2.1.1
  - 2.1.0
  - 2.0.3
  - 2.0.2
  - 2.0.1
  - 2.0.0
  - 1.12.4
  - 1.12.3
  - 1.12.2
  - 1.12.1
  - 1.12.0
  - 1.11.3
  - 1.11.2
  - 1.11.1
  - 1.11.0
  - 1.10.2
  - 1.10.1
  - 1.10.0
  - 1.9.1
  - 1.9.0
  - 1.8.3
  - 1.8.2
  - 1.8.1
  - 1.8.0
  - 1.7.2
  - 1.7.1
  - 1.7.0
  - 1.6.4
  - 1.6.3
  - 1.6.2
  - 1.6.1
  - 1.6.0
  - 1.5.2
  - 1.5.1
  - 1.5.0
  - 1.4.4
  - 1.4.3
  - 1.4.2
  - 1.4.1
  - 1.4.0
  - 1.3.2
  - 1.3.1
  - 1.3.0
  - 1.2.6
  - 1.2.5
  - 1.2.4
  - 1.2.3
  - 1.2.2
  - 1.2.1
  - 1.1.4
  - 1.1.3
  - 1.1.2
  - 1.1.1
  - 1.0.4
  - 1.0.3
  - 1.0.2
  - 1.0.1

Show 22 additional prereleases with ‘bower info jquery --verbose’
You can request info for a specific version with 'bower info jquery#<version>'
$

bower uninstall

ライブラリをアンインストールします。

$ bower uninstall jquery --save
bower uninstall     jquery
$

.bowerrc

bower.json と同じディレクトリに .bowerrc というファイルがあると bower の設定ができます。
proxyの設定や bower_componentsのパスなどを変更できます。

$cat .bowerrc
{
  "cwd": "~/.my-project",
  "directory": "bower_components",
  "registry": "https://bower.herokuapp.com",
  "shorthand-resolver": "git://github.com//.git",
  "proxy": "http://proxy.local",
  "https-proxy": "http://proxy.local",
  "ca": "/var/certificate.pem",
  "color": true,
  "timeout": 60000,
  "save": true,
  "save-exact": true,
  "strict-ssl": true,
  "storage": {
    "packages" : "~/.bower/packages",
    "registry" : "~/.bower/registry",
    "links" : "~/.bower/links"
  },
  "interactive": true,
  "resolvers": [
    "mercurial-bower-resolver"
  ],
  "shallowCloneHosts": [
    "myGitHost.example.com"
  ],
  "scripts": {
    "preinstall": "",
    "postinstall": "",
    "preuninstall": ""
  },
  "ignoredDependencies": [
    "jquery"
  ]
}
$

参考

8
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
9