使っているnpmパッケージの名前が変わってた

依存パッケージのアップデートはしていますか？

フロントエンドの開発を行っていく中で依存パッケージのアップデートは欠かせないものだと思います。

例えば、以下のようなnpm updateやyarn upgrade、npm-check-updatesをコマンドラインから実行したり、GitHub Appで自動化するならRenovate や Dependabot を使っているのではないでしょうか。

今回は、4ヶ月もアップデートから取り残されていたパッケージを見つけたお話です。

パッケージ名が変わっていた

今回は開発中にreact-use-gestureのドキュメントを読みに行く際に、パッケージ名前が@use-gesture/reactへと変更していたことに気が付きました。

名前が変更された後の最初の安定版10.0.0が4ヶ月前にリリースされていたようです。

パッケージ名の変更を知る

一般的にnpmではパッケージが非推奨になるとdeprecatedが付きます。

今回パッケージ名が変更されていた react-use-gesture では、以下のように表示されています。

This package has been deprecated
Author message:

This package is no longer maintained. Please use @use-gesture/react instead

最近更新されていないパッケージを察してnpmレジストリのページへ毎回見に行くわけにもいきません。では、どのような方法で非推奨かを知ると良いのでしょうか？

パッケージの情報をみる

Changelogや噂を追ってない限りは、 npm レジストリに対してパッケージの情報を問い合わせて非推奨かどうかを確認するしかないようです。

❯ npm info react-use-gesture | grep -i deprecated
DEPRECATED ⚠️  - This package is no longer maintained. Please use @use-gesture/react instead

❯ yarn info react-use-gesture | grep deprecated
  deprecated: 'This package is no longer maintained. Please use @use-gesture/react instead'

jq

会社のSlackで聞いた際に、id:utgwkk が教えてくださったissueには jq を駆使してグラフィカルに表示してくれるスクリプトがありました。 npmコマンドを叩いて、使用しているパッケージが非推奨かをビジュアライズしてくれます。

github.com

check-is-deprecated

これも内部的にはnpmコマンドを叩いているようです。 package.jsonのファイル名指定すると、非推奨のパッケージを検出してくれます。

github.com

❯ check-is-deprecated -f package.json
react-use-gesture:
✖ npm
❯ check-is-deprecated -f package.json
🎉 All is OK!

自動化したい

cliを実行する

最初に思いつくのは、上記の手動でcliを叩くものをGitHub Actionsなどで実行する方法です。

tinovyatkin/action-check-deprecated-js-deps

似たようなことを GitHub Actions で公開されているものがありました。 npm レジストリに対してパッケージの情報を問い合わせて、非推奨かどうかを確認しているようです。

github.com

Renovate Replacement Presets

今回、調べていくなかで Renovate の issue に似たような話題をみつけました。

github.com

これは、なんらかのパッケージ名が変更された場合に変更後のパッケージ名に置き換える機能を用意しよう。というものでした。

issueが作られたのが2018年、PRの作成日が2020年2月でマージされたのが2021年11月だったので長らく議論していたようです。

紆余曲折あり最終的にリリースされたのは、変更前後のパッケージ名をマッピング出来るReplacement Presetsという機能のようです。

docs.renovatebot.com

この機能は、自動という訳ではなく変更後のパッケージ名が判明してから設定する必要があります。

今回のreact-use-gestureなら以下のように書くことが出来ます。

{
  "packageRules": [
    {
      "matchDatasources": [
        "npm"
      ],
      "matchPackageNames": [
        "react-use-gesture"
      ],
      "replacementName": "@use-gesture/react",
      "replacementVersion": "10.0.0"
    }
  ]
}