備忘録_npm再入門


なんとなくの部分を文書化して知識整理

## npmのヴァージョン確認

```
npm -v
```

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

### アプリケーション用にインスール

カレントディレクトリに「node_modules」というディレクトリが作成される。
※インストールされたパッケージは「node_modules」ディレクトリに格納される

```
// インストール
$ npm install <パッケージ名>

// アンインストール
$ npm install <パッケージ名>
```

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

グローバルにインストールされる
※`npm install -g <パッケージ名>`でインストールされたパッケージは「package.json」に ***記述されない***

```
// グローバルインストール
$ npm install -g <パッケージ名>

// グローバルアンインストール
$ npm uninstall -g <パッケージ名>
```

## 一括インストールのフロー

1. 設定ファイルの作成

「package.json」というファイルが作成される
※色々聞かれるがとりあえずenterでおk

```
// 通常設定
$ npm init

// 項目にデフォルト設定を適用
$ npm init -y
```

2. パッケージインストール + package.jsonへヴァージョン情報を記載

必要に応じでインストールするパッケージを`--save-dev`で対応していくことで、
package.jsonに自動的に記述されていく

```
$ npm install <パッケージ名> --save-dev
```

3. 一括インストール

パッケージ情報が記述されている`package.json`がある状態で、
下記コマンドを実行することで一括インストールされる

```
$ npm install
```

## インストール済みのパッケージを確認

```
// アプリケーションごと
$ npm list

// 1階層目だけを表示させたい時
$ npm list -depth=0

// グローバル
$ npm list -g
```

### パッケージ管理

```
// 対象パッケージのHPへ
$ npm home <パッケージ名>

// 対象パッケージのリポジトリへ
$ npm repo <パッケージ名>

// 対象パッケージのドキュメント
$ npm docs <パッケージ名>

// バグ一覧(現在)
$ npm bugs <パッケージ名>

// パッケージのアップデートの確認
$ npm outdated

// グローバルにパッケージを確認
$ npm outdated -g

// パッケージに関するもろもろ確認
$ npm view <パッケージ名>

// パッケージの現ヴァージョンとヴァージョン履歴の確認
$ npm view <パッケージ名> versions
```

## オプションに関しての補足

### --save

`--save`オプションを実行すると`package.json`の「dependencies」に記載される。
「dependencies」に記載されているパッケージは`npm install`した際に ***インストールされる。***

```
$ npm install <パッケージ名> --save

$ npm uninstall <パッケージ名> --save
```

### --save-dev

`--save-dev`オプションを実行すると`package.json`の「devDependencies」に記載される。
「devDependencies」に記載されているパッケージは`npm install`した際に ***インストールされない。***

#### 注意点

`package.json`を含むディレクトリ全体をGitHubなどからcloneして開発する場合、`package.json`のあるディレクトリで`npm install`を実行すると「devDependencies」も特例的?にインストールされる。
※依存関係もインストールで対応する


```
$ npm install <パッケージ名> --save-dev

$ npm uninstall <パッケージ名> --save-dev
```

### 「dependencies」と「devDependencies」の使い分け

- 「dependencies」   : 実行時に必要になるもの
- 「devDependencies」: ビルド系ツール

## パッケージの検索/確認

```
// 検索
$ npm search <パッケージ名>

// 詳細表示
$ npm show <パッケージ名>
```

## パッケージを探す

- npms : https://npms.io/
様々要素をもとにランク付け。

- npm Discover : http://www.npmdiscover.com/
Aパッケージ使用している人は、Bも使ってます的な。

- Packages by PageRank : http://anvaka.github.io/npmrank/online/
ソートして表示。

## npmコマンドのショートカット

- npm i    => npm install
- npm r    => npm uninstall
- npm i -S => npm install --save
- npm i -D => npm install --save-dev
- npm i -g => npm install -global 

## npm関連のパスの確認コマンド

```
// ローカルインストール先のディレクトリ確認
$ npm root

// ローカルインストール先の、コマンドディレクトリ(bin)確認
$ npm bin

// グローバルインストール先のディレクトリ確認
$ npm -g root

// グローバルインストール先の、コマンドディレクトリ(bin)確認
$ npm -g bin
```

## 依存オブジェクトのバージョンを固定

- ^ : バージョンアップは可能※メジャーアップデートは不可
- ~ : マイナーバージョンアップのみ

## shrinkwrapコマンド

使用中の依存オブジェクトのバージョンが記述された「npm-shrinkwrap.json」ファイルが作成される。
「npm-shrinkwrap.json」ファイルが存在する場合はデフォルトとして使わる。
※`npm install`したときには「package.json」を無視します。

```
$ npm shrinkwrap
```

## -gを使わないという選択肢

コマンドのパスを通す。
-gでインストールすることでコマンドとして利用できるようになるがそれを避けるためにパスを通す

```~/.zshrcなど
export PATH=$PATH:./node_modules/.bin
```

`node_modules`ディレクトリの`bin`ディレクトリにパスを通すことで-gしなくてもコマンド使用可能。

### correct機能の対応

gulp用にコマンドを通すことでグローバルにインストールしなくてもコマンドが使用できるようになるが、zshのcorrect機能がうざかったので解除(※環境がzsh)

一応やり方メモ

aliasに「nocorrcet」を設定
※あとは適当に順次追加すればおk

```.zshrcなどに
// gulpコマンドの場合
alias gulp='nocorrcet gulp'
```


## 参考にさせていただいているサイト様
https://www.webprofessional.jp/10-npm-tips-and-tricks/
http://qiita.com/Mic-U/items/cd456d6bea72937464f8