197
132

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

package.json に記載されているパッケージのバージョンアップ方法 【 npm-check-updates, outdated 】

Last updated at Posted at 2020-10-18

はじめに

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

しかし、package.json の dependenciesdevDependencies に記載されている範囲の中での最新のバージョンでアップデートするので、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 に記載されているパッケージのバージョン情報をアップデートしたい場合は以下の手順を踏む必要があります。

  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)

公式リファレンス

197
132
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
197
132

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?