JQ Blog

[JS] Bower, Npmについて

bowerとnpmは両方ともパッケージが管理できるツール。
npmはNode Package ModulesのことでNode.jsのライブラリやパッケージをインストールし、管理できる。
bowerはツイッターが作ったフロントエンドのパッケージを管理ツールである。

NPM(Node Package Modules)

インストール

npmはNode.jsをインストールすると自動にインストールされる。

使い方

1
2
3
4
5
6
7
8
9
10
11
12
13

# 構成設定ファイルである package.json を作成する
$ npm init

# プロジェクトのみインストール&アンインストール
$ npm install <package> --save
$ npm uninstall <package> --save

# グローバルインストール&アンインストール
$ npm install -g <package>
$ npm uninstall -g <package>

# package.jsonに記載されているパッケージをインストール
$ npm install

ちなみに--saveをつけるとそのパッケージが依存している全てのパッケージも一気にインストールされる。

Railsでの使い方

  • Railsの設定ファイル変更
    config/initializers/assets.rb
1

Rails.application.config.assets.paths << Rails.root.join('node_modules')
  • assetsで参照する
    requireやimportを通して使うことができる

Bower

インストール

bowerはNode.jsのパッケージなのでnpmでインストールする。

1
2
3
4
5

# node.jsのインストール
$ brew install node

# bowerのインストール
$ npm install -g bower

使い方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 構成設定ファイルである bower.json を作成する
$ bower init

# ライブラリを検索する
$ bower search <package>

# パッケージを追加し、かつbower.jsonに記録する
$ bower install <package> --save

# '#'をつけるとバージョンを指定してパッケージを追加できる
$ bower install <package>#1.1.1 --save

# bower.jsonに記録されたパッケージをインストールする
$ bower install

# パッケージを削除する
$ bower uninstall <package>

構成設定ファイル

  • .bowerrc
    • directory属性設定でパッケージのインストールパス(bower_components)を指定する
    • 手動でbowerを使うなら.bowerrcを手動で作らなきゃいけない
  • bower.json
    • 依存性及び開発バージョン情報などを表す

bower-rails

インストール

  • gemfileに追加
1

gem 'bower-rails'
  • bundle install
1

$ bundle install

使い方

1
2
3
4
5
6
7
8

# bowerを初期化
$ rails g bower_rails:initialize

# Bowerfileに欲しいアセットを任意に追加
asset '<package name>', '<package version>'

# bowerをインストール
$ rake bower:install

あとはインストールされたパッケージをrequireでロードして使う。

参考

npmの使い方
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう
Bower/bower-rails チートシート