JavaScript_パッケージ管理ツール

パッケージ管理について

現在、JavaScriptの世界は、「スクリプトファイルをコピーすればインストールは完了」という状況ではなくなったといえます。

例えばフレームワークを利用する場合には、その内部で利用しているライブラリやフレームワークのファイルも用意する必要があります。

参照するべきファイルをすべて用意しないとプログラムは動作しないことが多々あります。

パッケージマネージャ

パッケージマネージャとは、パッケージと呼ばれる形でプログラムを管理するための専用ツールです。

パッケージには、プログラム本体だけでなく、リソースやライブラリも含まれます。

これらの複雑化したプログラムを１つのコマンドで全て用意するための仕組みがパッケージマネージャです。

npmコマンド

npmとは、Node.js用のパッケージマネージャです。

npmのインストール

npmコマンドは「Node.js」をインストールすることで同時にインストールされます。

Node.jsのインストール後に、下記コマンドが実行できることを確認します。


$ npm -v

npmのアップデート

npm自身及び関連パッケージ類がアップデートされている場合に更新を行います。


$ npm update -g npm

インストールされているパッケージを全て最新版に更新する場合には下記コマンドを実行します。


$ npm update -g

npmによるパッケージのインストール

npmでは、プログラムは全てnpmサーバにアップデートされています。

コマンドを利用して必要なパッケージをローカル環境にダウンロード（インストール）します。

npmのインストールにはローカルインストールとグローバルインストールがあります。

・ローカルインストール

ローカルインストールは、現在の場所(cwd)にパッケージをインストールします。

「node_modules」というディレクトリが作成され、そこにパッケージがダウンロードされます。


$ npm install パッケージ名

・グローバルインストール

グローバルインストールは、ホームディレクトリに専用ディレクトリを作成して、そこにパッケージをダウンロードします。

これは、サーバサイドで利用するために、サーバプログラム内から一意に参照するための仕組みです。


$ npm install -g パッケージ名

パッケージの利用

インストールされたパッケージは基本的にスクリプトファイルなので、scriptタグで読み込みます。


<script src="node_modules/パッケージ名/スクリプトファイル名"></scritp>

package.json

npmでは、利用するパッケージに関する情報を記述するための専用ファイルが用意されています。

下記コマンドを実行することで、package.jsonが作成されます。


$ npm init --yes

パッケージを追加する場合には、「--save」オプションをつけることでパッケージ情報をpackage.jsonに自動的に記載できます。


$ npm install jquery --save

package.jsonがあれば、下記コマンドで必要なパッケージを一括で取得することができます。


$ npm install

Bower

Bowerはクライアントサイド開発のためのパッケージマネージャです。

インストールはnpmコマンドから行えます。


$ npm install -g bower

Bowerは基本的にローカルインストールのみを行います。

「bower_components」というディレクトリにパッケージが追加されていきます。


$ bower install パッケージ名

npmと同じくパッケージ管理のためにbower.jsonが用意されています。


$ bower init

「install --save」オプションでパッケージ情報を自動的に記載できます。