はじめに

package.json に記載されているパッケージのバージョンアップには npm-check-updates というツールがとても便利なので紹介したいと思います。

結論

package.json に記載されているパッケージのバージョンアップ方法は以下の 2 つの方法があります。

• 方法 1 : npm outdated コマンドを使う
  • npm outdated コマンドを実行し、アップデート情報を確認して、パッケージをひとつひとつ丁寧にアップデートする
• 方法 2 : npm-check-updates パッケージをつかう ← おすすめ！
  • npm-check-updates パッケージを利用して、アップデート情報を確認して、すべてパッケージをまとめてアップデートする

手間を考えると npm-check-updates の方が楽です。

そもそもバージョンアップなら npm update でいいのでは？

たしかに npm update や npm update <package> のコマンド実行によって package.json の内容から依存関係のバージョンの記載の範囲内の最新版をインストールして package-lock.json や node_modules を更新します。

しかし、package.json の dependencies や devDependencies に記載されている範囲の中での最新のバージョンでアップデートするので、package.json に記載されているバージョンが低ければ、世の中に更新されている最新のバージョンには更新されません。

例：^3.2.1 と記載されている場合、4.0.0 が世の中にリリースされても npm update では気づけない。

（正直、グローバルインストールしたパッケージをバージョンアップする場合を除いて npm update が必要となるケースがあまりわかりません。基本的に npm install でこと足りると思ってます。）

方法 1 : npm outdated コマンドを使う

npm outdated の挙動

インストールしたパッケージに新しいバージョンが存在するかどうか確認することができる npm outdated というコマンドがあります。

npm outdated と実行すると package.json に記載されているパッケージのアップデート情報を教えてくれます。

# あえて古いバージョンの cowsay をインストールする
$ npm install [email protected]
+ [email protected]

# package.json の確認
$ cat package.json
{
  （省略）
  "dependencies": {
    "cowsay": "^1.2.0"
  },
  （省略）
}

# npm outdated の実行で 1.2.0 → 1.4.0 のアップデートが可能なことを教えてくる
$ npm outdated            
Package  Current  Wanted  Latest  Location
cowsay     1.2.0   1.4.0   1.4.0  typescript-node-base

しかし、npm outdated は最新バージョンがあることを教えてくれるだけで、バージョンアップまではしてくれません。

バージョンアップ手順

package.json に記載されているパッケージのバージョン情報をアップデートしたい場合は以下の手順を踏む必要があります。

1. npm outdated で新しいバージョンがリリースされてないか確認する
2. 新しいバージョンがリリースされていた場合、該当のパッケージをアンインストールする
3. npm install <package> で再度パッケージをインストールする

しかし、この手順では、たくさんのパッケージを管理していると 2. の手順でバージョンアップのあるパッケージに対して1つ1つパッケージを再インストールしなければならないので大変です。

方法 2 : npm-check-updates を使う

npm-check-updates というパッケージを使用すればとても以下のコマンドだけの手順でアップデートが可能です。

1. ncu コマンドの実行 （アップデート情報の確認）
2. ncu -u コマンドの実行（package.json の更新）
3. npm install コマンドの実行（更新された package.json をもとにパッケージをインストール）

実行例は以下の通りです。cowsay の古いパッケージを package.json ごとアップデートします。

# package.json の状況
$ cat package.json
{
  （省略）
  "dependencies": {
    "cowsay": "^1.2.0"
  },
  （省略）
}

# ncu でアップデート可能なパッケージの確認（ほとんどの記事ではグローバルインストールしていますが使用頻度は多くないと思うので npx での実行でもいいと思います）
$ npx -p npm-check-updates  -c "ncu"
npx: 285個のパッケージを6.971秒でインストールしました。
Checking package.json
[====================] 2/2 100%

 cowsay  ^1.2.0  →  ^1.4.0   

Run ncu -u to upgrade package.json


# ncu -u を実行すると package.json が更新される
$ npx -p npm-check-updates  -c "ncu -u"
npx: 285個のパッケージを6.971秒でインストールしました。
Checking package.json
[====================] 2/2 100%

 cowsay  ^1.2.0  →  ^1.4.0   

Run npm install to install new versions.


# package.json が更新していることの確認
$ cat package.json
{
  （省略）
  "dependencies": {
    "cowsay": "^1.4.0"
  },
  （省略）
}


# 更新された package.json をもとに npm install の実行
$ npm install

サンプルはわかりやすいように1つのパッケージしか入っていませんが、複数のパッケージが入っていても ncu -u ですべてのパッケージが一度にアップデートされます。

また、特定のパッケージだけを指定できたり、正規表現で複数のパッケージも指定できたり、マイナーバージョン以上、またはパッチバージョン以上のバージョンアップを指定できたり、いろいろとできるようです（詳しくは公式リファレンス参照）。

【参考】
npm installしたパッケージの更新確認とアップデート(npm-check-updates)

【参考】 depcheck

depcheck という使用されていないパッケージを教えてくれるツールもありました。
アップデートの検討を考える前にこのツールを使って不要なパッケージは削除してしまった方がいいと思います。

使い方は npx depcheck とコマンド実行するだけです。

使用例：

# 未使用パッケージ削除前
$ npx depcheck
npx: 108個のパッケージを6.778秒でインストールしました。
Unused dependencies
* bootstrap
* jquery
* path
Unused devDependencies
* babel-eslint
* casperjs

# 未使用パッケージ削除後
$ npx depcheck
npx: 108個のパッケージを4.581秒でインストールしました。
No depcheck issue

【参考】
npx については以下の記事で解説しています。
・ npm でローカルインストールしたパッケージを CLI でコマンド実行する方法（npm-srcipts, npx）

公式リファレンス

• npm outdated
  • https://docs.npmjs.com/cli/outdated
• npm-check-updates
  • https://github.com/tjunnone/npm-check-updates
  • オプション一覧：https://github.com/tjunnone/npm-check-updates#options