Node.jsで定期的にパッケージ更新する方法【備忘録】
こんにちは。Nonです。今回はNode.jsのパッケージ管理について書いていきたいと思います。
どちらかというと自分向けの備忘録のような記事になるので、皆さんのお力になるかどうかはわかりませんが、新しい発見につながれば嬉しいです。
定期的なパッケージ更新をどうしているか？
正直、少し前までは npm update を実行して少し動作チェックして終了みたいな適当なアップデートでした。
でも最近になってようやくパッケージアップデート方法について調べるようになりました。
調査の結果、「これ便利だな」と思ったツールや手法をご紹介します。
1. npm outdated
まぁ、皆さんご存知の王道コマンドですね。
Package Current Wanted Latest Location Depended by
@toast-ui/vue-editor 1.1.1 1.1.1 2.5.2 node_modules/@toast-ui/vue-editor src
axios 0.18.1 0.18.1 0.21.1 node_modules/axios src
bootstrap 4.3.1 4.6.0 4.6.0 node_modules/bootstrap src
bootstrap-vue 2.19.0 2.21.2 2.21.2 node_modules/bootstrap-vue src
cross-env 5.2.0 5.2.1 7.0.3 node_modules/cross-env src
dayjs 1.8.16 1.10.4 1.10.4 node_modules/dayjs src
eslint 7.14.0 7.24.0 7.24.0 node_modules/eslint src
eslint-plugin-vue 7.1.0 7.9.0 7.9.0 node_modules/eslint-plugin-vue src
firebase 7.6.1 7.24.0 8.4.1 node_modules/firebase src
jquery 3.4.1 3.6.0 3.6.0 node_modules/jquery src
laravel-mix 4.0.16 4.1.4 6.0.16 node_modules/laravel-mix src
lodash 4.17.11 4.17.21 4.17.21 node_modules/lodash src
popper.js 1.15.0 1.16.1 1.16.1 node_modules/popper.js src
resolve-url-loader 2.3.2 2.3.2 3.1.2 node_modules/resolve-url-loader src
sass 1.22.2 1.32.10 1.32.10 node_modules/sass src
sass-loader 7.1.0 7.3.1 11.0.1 node_modules/sass-loader src
vue-axios 2.1.5 2.1.5 3.2.4 node_modules/vue-axios src
vue-cropperjs 4.1.0 4.2.0 5.0.0 node_modules/vue-cropperjs src
このマイナーバージョンの最新版と、パッケージあとしての最新版が表示されるので、今どの辺のバージョンを利用しているのか一目瞭然ですね。
私はこのリストを見てどのパッケージを更新しようかを決めます。問題はこの後なのですが、パッケージ更新時 npm update package_name@version でアップデートするのは正直面倒です。
そこで利用したツールがこちら。
2. npm-check
このツールを使いました。
公式ドキュメントを読んでもらえばわかりますが、対話的にパッケージをアップデートを利用することができます。
いちいちコマンドでしてしなくてもいいですし、patch/minor/majorで区切りをつけてくれるので、気軽なアップデートにも向いています。
? Choose which packages to update. (Press <space> to select)
Patch Update Backwards-compatible bug fixes.
❯◯ lodash devDep 4.17.11 ❯ 4.17.21 https://lodash.com/
Minor Update New backwards-compatible features.
◯ dayjs 1.8.16 ❯ 1.10.4 https://day.js.org
◯ bootstrap devDep 4.3.1 ❯ 4.6.0 https://getbootstrap.com/
◯ bootstrap-vue devDep 2.19.0 ❯ 2.21.2 https://bootstrap-vue.org
◯ eslint devDep 7.14.0 ❯ 7.24.0 https://eslint.org
◯ eslint-plugin-vue devDep 7.1.0 ❯ 7.9.0 https://eslint.vuejs.org
(Move up and down to reveal more choices)
似たようなツールに npm-check-update があります。star的にはこちらのほうが多いです。記事も多い印象。私の使い方がおかしいのかもしれませんが、 npm-check のほうが使いやすかったので、こちらを取り上げました。
npm-check-updateのリンクはこちら。
3. npm install {package}@{version} --force
パッケージ更新時にたまーにお互いがお互いを依存関係として認識してしまって、更新ができなくなってしまうので、そういう時は強制的にアップデートします。
npm install {package}@{version} --force を実行すると、依存関係をある程度無視してインストールしてくれるので、これを使用します。
このときに注意してほしいのは、当然強制アプデなので、テストをしっかりしておくことです。
ユニットテストがしっかり書けていれば、このコマンドを実行する閾は低くなりますね。
1 / 2 / 3 を繰り返し実行して、少しずつパッケージをアップデートすれば安全に更新作業ができるかと思います。
とはいえ、やっぱりこの辺の作業で安心するためにはテストは必須ですね。
特にフロントの更新になるのでE2Eテストもほしいところではあります。
CIでSlackなどに通知してくれるようにするのもいいかも
npm outdated の内容をCIを回すたびに通知してくれるBotなどを作成すると、定期メンテナンスにつながるので良いですね。
ただ、Githubなどで自動で上がってくるBotを信じてマージするのは怖いかも。確かに便利ですが、やはりこの辺は手動でやったほうが安心感あります。テストが回るようになっていればいいのですが、そうでない場合はしっかり更新するパッケージを絞って作業するのが良いかもです。
最後に
今回は自分への備忘録として書かせていただきました。フロントの知識は半周遅れ感が否めないので、もと精進したいと考えております。
またまたこの辺の記事は更新していくつもりです。
その時はよしなに.
