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は、[公式サイト](https://nodejs.org/ja/)でインストールできます。

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

```zsh
# 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の一例です。

```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の生成

```zsh
npm init -y

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

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

```zsh
# グローバルインストール
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です。

```zsh
npm i -g パッケージ名
```

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


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

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

# 例
npm install underscore@1.8.2
```

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

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


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

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

uninstallは「un」でもOKです。


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

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

npm outdatedを使って更新があるかどうかを確認できます。
- Current: 現在のバージョン
- Wanted: 既存のコードを壊さずにアップグレードできる最新バージョン
- Latest: パッケージの最新バージョン
更新がなければ何も表示されません。

```zsh
npm outdated

# 出力例
Package     Current  Wanted  Latest  Location
underscore    1.8.2   1.8.3   1.8.3  project
```
### パッケージの更新

```zsh
npm update パッケージ名

# 例:
npm update underscore
```



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

```zsh
npm list
```

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

```zsh
npm list -g
```

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

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

## パッケージの検索

```zsh
npm search パッケージ名

# 例
npm search mkdir
```

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

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