npmで管理しているライブラリのバージョンアップ手順まとめ

# 概要
* npmで管理しているライブラリのバージョンアップ方法をまとめていきます。
* また、今回は何かサンプルのプロジェクトを利用し、結果を見ていくとわかりやすいと思うので、https://github.com/creativetimofficial/vue-notus こちらを利用し下記の手順を試しながら結果を記載していきます。

# ローカル環境のnpmバージョンを確認
* 最新のversionになっていることを確認します。
最新になっていなければversionをlatestまで上げてからバージョンアップを行うのが良いです。

```
❯ npm --version
7.6.3
```

# 現在のライブラリのversionを確認
* **npm outdatedコマンド**で現在のライブラリのバージョン、マイナーバージョンがどのくらい上がるのかを確認します。

## npm outdated説明

* Current：現在インストールされているバージョン
* Wanted：存在するバージョンのうち、 package.json に記載された semver 条件を満たす最新のバージョン
* Latest：そのパッケージの最新バージョン

```
❯ npm outdated
Package                       Current         Wanted   Latest  Location                             Depended by
@babel/core                   7.13.10        7.13.10  7.13.14  node_modules/@babel/core             vue-notus
@babel/eslint-parser          7.13.10        7.13.10  7.13.14  node_modules/@babel/eslint-parser    vue-notus
@popperjs/core                  2.9.1          2.9.1    2.9.2  node_modules/@popperjs/core          vue-notus
@tailwindcss/forms              0.2.1          0.2.1    0.3.2  node_modules/@tailwindcss/forms      vue-notus
@vue/cli-plugin-babel   5.0.0-alpha.7  5.0.0-alpha.7   4.5.12  node_modules/@vue/cli-plugin-babel   vue-notus
@vue/cli-plugin-eslint  5.0.0-alpha.7  5.0.0-alpha.7   4.5.12  node_modules/@vue/cli-plugin-eslint  vue-notus
@vue/cli-service        5.0.0-alpha.7  5.0.0-alpha.7   4.5.12  node_modules/@vue/cli-service        vue-notus
@vue/compiler-sfc               3.0.7          3.0.7   3.0.11  node_modules/@vue/compiler-sfc       vue-notus
chart.js                        2.9.4          2.9.4    3.0.2  node_modules/chart.js                vue-notus
core-js                         3.9.1          3.9.1   3.10.0  node_modules/core-js                 vue-notus
eslint                         7.22.0         7.22.0   7.23.0  node_modules/eslint                  vue-notus
eslint-plugin-vue               7.7.0          7.7.0    7.8.0  node_modules/eslint-plugin-vue       vue-notus
gulp-append-prepend             1.0.8          1.0.8    1.0.9  node_modules/gulp-append-prepend     vue-notus
postcss                         8.2.8          8.2.8    8.2.9  node_modules/postcss                 vue-notus
tailwindcss                     2.0.4          2.0.4    2.1.1  node_modules/tailwindcss             vue-notus
vue                             3.0.7          3.0.7   2.6.12  node_modules/vue                     vue-notus
vue-router                      4.0.5          4.0.5    3.5.1  node_modules/vue-router              vue-notus
```

# バージョンのアップデートを行う(今回は、マイナーバージョンのみアップデートを実施します。)

* [npm-check-updates](https://github.com/raineorshine/npm-check-updates)というライブラリをグローバルにインストールし**ncuコマンド**で、メジャーバージョンは固定、マイナーバージョンのみ最新にします。
* なぜ、**npm updateコマンド**を利用しないのかというと、npm updateコマンドでは、package.jsonの書き換えは行ってくれないためです。

## npm-check-updatesのインストール方法

```
npm i -g npm-check-updates
```

## npm-check-updatesを利用し、マイナーバージョンのみアップデートを実施

```
❯ ncu -u --target minor
Upgrading /Users/yoshitaka.koitabashi/Desktop/vue-notus/package.json
[====================] 21/21 100%

 @popperjs/core                  2.9.1  →          2.9.2
 @tailwindcss/forms              0.2.1  →          0.3.2
 @vue/compiler-sfc               3.0.7  →         3.0.11
 core-js                         3.9.1  →         3.10.0
 gulp-append-prepend             1.0.8  →          1.0.9
 tailwindcss                     2.0.4  →          2.1.1
 vue                             3.0.7  →         3.0.11
 vue-router                      4.0.5  →          4.0.6
 @babel/core                   7.13.10  →        7.13.14
 @babel/eslint-parser          7.13.10  →        7.13.14
 @vue/cli-plugin-babel   5.0.0-alpha.7  →  5.0.0-alpha.8
 @vue/cli-plugin-eslint  5.0.0-alpha.7  →  5.0.0-alpha.8
 @vue/cli-service        5.0.0-alpha.7  →  5.0.0-alpha.8
 eslint                         7.22.0  →         7.23.0
 eslint-plugin-vue               7.7.0  →          7.8.0
 postcss                         8.2.8  →          8.2.9

Run npm install to install new versions.
```

## package.jsonが更新されたので、その状態でnpm install コマンドを実行

```
❯ npm install

up to date, audited 1580 packages in 3s

117 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```

### もし、npm installでerrorを吐く場合

* 依存関係が解決できずエラーになってしまった場合は、npm audit fix --forceコマンドで自動的に修正してくれます。

```
> npm audit fix --force
```

# アップデート後のライブラリのバージョンを確認

* **npm lsコマンド**でライブラリのバージョンが上がったことを確認します。

```
❯ npm ls
vue-notus@1.1.0 /Users/yoshitaka.koitabashi/Desktop/vue-notus
├── @babel/core@7.13.14
├── @babel/eslint-parser@7.13.14
├── @fortawesome/fontawesome-free@5.15.3
├── @popperjs/core@2.9.2
├── @tailwindcss/forms@0.3.2
├── @vue/cli-plugin-babel@5.0.0-alpha.8
├── @vue/cli-plugin-eslint@5.0.0-alpha.8
├── @vue/cli-service@5.0.0-alpha.8
├── @vue/compiler-sfc@3.0.11
├── autoprefixer@10.2.5
├── chart.js@2.9.4
├── core-js@3.10.0
├── eslint-plugin-vue@7.8.0
├── eslint@7.23.0
├── gulp-append-prepend@1.0.9
├── gulp@4.0.2
├── postcss@8.2.9
├── tailwindcss@2.1.1
├── vue-router@4.0.6
├── vue-template-compiler@2.6.12
└── vue@3.0.11
```

# ライブラリの監査を見れるので結果を確認

* **npm auditコマンド**でライブラリの監査が行えるのでその結果を確認します。

```
❯ npm audit
found 0 vulnerabilities
```

## 依存関係の監査結果で脆弱性がSeverity: highのものがあった場合の対応

* **npm audit fixコマンド**を実施して依存関係の脆弱性対応を自動で行うことができます。

```
> npm audit fix --force
```