package.json に記載されているパッケージのバージョンアップ方法 【 npm-check-updates, outdated 】
はじめに
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 cowsay@1.2.0
+ cowsay@1.2.0
# 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 に記載されているパッケージのバージョン情報をアップデートしたい場合は以下の手順を踏む必要があります。
-
npm outdatedで新しいバージョンがリリースされてないか確認する - 新しいバージョンがリリースされていた場合、該当のパッケージをアンインストールする
-
npm install <package>で再度パッケージをインストールする
しかし、この手順では、たくさんのパッケージを管理していると 2. の手順でバージョンアップのあるパッケージに対して1つ1つパッケージを再インストールしなければならないので大変です。
方法 2 : npm-check-updates を使う
npm-check-updates というパッケージを使用すればとても以下のコマンドだけの手順でアップデートが可能です。
-
ncuコマンドの実行 （アップデート情報の確認） -
ncu -uコマンドの実行（package.json の更新） -
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
- npm-check-updates
Discussion