npmの基礎知識

ブラウザで使いたい機能があったのですが、npmで配布されていました。
npmの知識が必要になったので調べました。

npmとは

Node.jsのパッケージ管理ツールです。
Node Package Managerの略。

Nodo.jsでは、便利な機能をまとめたものが、パッケージという単位で公開・配布されています。
npmは、配布されているパッケージを管理するためのツールです。
パッケージの検索やインストールなどが楽に行なえます。

他の言語や環境でnpmと同じような役割を果たしているツールの一例です。
使っている言語があれば置き換えて考えるとイメージがつくと思います。

• PHP: Composer
• Ruby: Gem
• Python: pip
• Linux: yum, rpm
• MacOS: Homebrew

npmのインストール

Node.jsをインストールすればnpmもインストールされます。

Node.jsは、公式サイトでインストールできます。

また、Homebrewなどのパッケージ管理ツールでもインストールできます。
私は下記のようにインストールしました。（Homebrew使用。さらにnodebrewを使って複数バージョンのNode.jsを管理しています。）

# nodebrew（複数バージョンのNode.jsを管理できるパッケージ） インストールとセットアップ
brew install nodebrew
nodebrew setup

# 環境変数PATHを修正してパスを通す :$HOME/.nodebrew/current/bin
vi ~/.zshrc
source ~/.zshrc

# 安定版の最新をインストール
nodebrew install-binary stable

# インストールされているNode.jsのバージョン一覧を確認
nodebrew list

# 安定版を有効化する
nodebrew use stable

# 現在使われているNode.jsのバージョンを表示する
node -v

npmを使ったパッケージの管理

ローカルインストールとグローバルインストール

Node.jsにはローカルインストールとグローバルインストールが存在します。

• ローカルインストール: 現在のディレクトリ内のnode_modulesディレクトリにパッケージをインストールします。
  1つのプロジェクトのみで使用できます。
  移行が楽で、他のプロジェクトを汚染しないメリットがあります。
• グローバルインストール: OSの特定の場所にパッケージをインストールします。
  全てのプロジェクトで使用できます。
  プロジェクトごとにインストールしなくてもよいメリットがあります。
  反面、汚染のリスクがあり、移行時に同一の環境になる保証がなくなります。

同じ環境を再現することを重視するため、基本はローカルインストールでよいと思います。

package.json

package.jsonはnpmのパッケージ情報を管理しているJSONファイルです。
中には使われているパッケージ名が記載されています。
これを使ってパッケージのインストールやアップデートをまとめて行うことができます。
直接編集して追加インストール、みたいなこともできます。

下記はpackage.jsonの一例です。

package.json

{
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "devDependencies": {
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  }
}

package.jsonの生成

npm init -y

# -yを付けないと、対話式で入力後生成されます。
npm init

パッケージのインストール

# グローバルインストール
npm install --global パッケージ名1 パッケージ名2 ...

# ローカルインストール
npm install パッケージ名1 パッケージ名2 ...

# 例 ※--save-dev: 開発目的のパッケージとしてインストールするときに付けるオプション
npm install --save-dev webpack webpack-cli webpack-dev-server

「--global」は「-g」で、installは「i」でもOKです。

npm i -g パッケージ名

npmパッケージをインストールすると、package.jsonにインストールしたパッケージ名が追記されます。

特定バージョンのパッケージをインストール

npm install パッケージ名@バージョン番号

# 例
npm install underscore@1.8.2

package.jsonに記載の情報をもとにインストール。

npm install

パッケージ名を指定しないで、npm installします。
package.jsonのdependenciesプロパティとdevDependenciesプロパティに記載されているパッケージを一括でインストールします。つまり、package.jsonを編集して別のパッケージをインストールすることもできます。

パッケージのアンインストール

npm uninstall パッケージ名1 パッケージ名2 ...

uninstallは「un」でもOKです。

パッケージのアップデート（更新）

パッケージに更新があるか確認

npm outdatedを使って更新があるかどうかを確認できます。

• Current: 現在のバージョン
• Wanted: 既存のコードを壊さずにアップグレードできる最新バージョン
• Latest: パッケージの最新バージョン
  更新がなければ何も表示されません。

npm outdated

# 出力例
Package     Current  Wanted  Latest  Location
underscore    1.8.2   1.8.3   1.8.3  project

パッケージの更新

npm update パッケージ名

# 例:
npm update underscore

インストールしているパッケージの確認

npm list

グローバルにあるパッケージを確認。

npm list -g

上記だと、サブパッケージも表示されます。パッケージだけを見たい場合は、

$ npm list --depth=0
@1.0.0 /path
├── webpack@4.35.3
├── webpack-cli@3.3.5
└── webpack-dev-server@3.7.2

パッケージの検索

npm search パッケージ名

# 例
npm search mkdir

ブラウザで使用するには？

基本的にはnpmパッケージのreadmeなどに従います。
例えば、browserifyをwebpackのようなモジュールハンドラーを使ってブラウザで使える形式のjavascriptファイルを生成する、というやり方もあります。