Node.jsで定期的にパッケージ更新する方法【備忘録】

2021/04/17 2021/04/17 #node_modules #Node.js #npm

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.114.17.21  https://lodash.com/
  
 Minor Update New backwards-compatible features.
 ◯ dayjs                     1.8.161.10.4   https://day.js.org
 ◯ bootstrap devDep          4.3.14.6.0    https://getbootstrap.com/
 ◯ bootstrap-vue devDep      2.19.02.21.2   https://bootstrap-vue.org
 ◯ eslint devDep             7.14.07.24.0   https://eslint.org
 ◯ eslint-plugin-vue devDep  7.1.07.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を信じてマージするのは怖いかも。確かに便利ですが、やはりこの辺は手動でやったほうが安心感あります。テストが回るようになっていればいいのですが、そうでない場合はしっかり更新するパッケージを絞って作業するのが良いかもです。

最後に

今回は自分への備忘録として書かせていただきました。フロントの知識は半周遅れ感が否めないので、もと精進したいと考えております。

またまたこの辺の記事は更新していくつもりです。

その時はよしなに.

のん

所属 : 株式会社スマレジ 開発部

YouTube : のんラボ

Twitter : @nonz250

Github : nonz250

Qiita : @nonz250

My Qiita posts My Qiita contributions My Qiita followers

主にPHPを使用し、サーバーサイドを担当。最近はフロントにも興味津々。

なにかを作ったりいじったりするのが好きで、個人開発なども行っている。

趣味はバイクアイコン画像は大抵愛車の「Z250」である。友達にアイコン描いてもらえて嬉しい。

PHP / Laravel / CakePHP2 / CakePHP3 / Vue / Nuxt / C# / etc...

Tags

#のんラボ #Laravel #Vue #個人開発 #ブログ #プログラミング #javascript #Html5 #WEBサービス #Twitter #今年の抱負メーカー #勉強方法 #PWA #モバイルアプリ #Android #ツーリング #バイクに乗るエンジニア #Z250 #秋吉台 #能登半島 #バイク #冒険 #東尋坊 #Squid #リバースプロキシ #hosts #axios #cropper #AdSense #Bootstrap #MySQL #高速化 #トドTask #Telescope #デバッグ #composer #テスト #セキュリティ #POSレジ #スマレジ #本部機能 #バリデーション #入力チェック #Mac #Chrome #テスト駆動開発 #開発手法 #UI #デザイン #WEBサイト #機能美 #PHP #Laravel 6 #コメント #バージョンアップ #vue-cli #localhost #BIツール #売上分析 #TANAX #MFK250 #ツアーシェルケース2 #RESTful #API #REST API #実務的 #PHP Tech Tutor #Smaregi Tech Talk #勉強会 # ブログ #CakePHP3 #CSRF #VSCode #開発環境 #CakePHP3.0 #さくらのレンタルサーバー #モジュールモード #シェル #メール #Gmail #relay #OGP #エラーページ #抱負 #家庭教師 #ドメイン駆動設計 #DDD #読書会 #那智の滝 #伊勢志摩 #伊勢志摩スカイライン #フロント #三方五湖 #レインボーライン #ボーイスカウト・ルール #プログラマが知るべき97のこと #リファクタリング #ユビキタス言語 #車輪の再発明 #マイクロサービス #デプロイ #QA #laravel-mix #Tips #storybook #@storybook/addon-actions #昇降デスク #コードレス #書斎 #オフィス #リモートワーク #働き方 #エラーハンドリング #スマレジ4 #pixel 5 #レビュー #スマレコ #TDD #RSS #404 #高山ダム #ラーツー #React #Nuxt #node_modules #エラー #インポート #設定方法 #環境構築 #Docker #フォレストパーク神野山 #学生向け #PR #採用 #Node.js #npm #しまなみ海道