はじめに

gulpを使用していて、npm audit fixしてください！ってエラーが表示される事が数回ありました。
これはパッケージに脆弱性のある箇所を自動修正してくれるコマンドらしく、これを入力する事で大半は通常通りに使用する事ができるようになります。(ダメな時もあるらしいですが私は通過しました)
ただ、エラーが出るのが苦手なので、どうすれば良いだろうな〜って漁っていたら、解決策を見つけました。

考え方

Q.なぜこのエラーが起こるのか
A.package.jsonのに入っているパッケージのバージョンが古いから

Q.どうすれば良いか
A.package.jsonに記載されてるバージョンが古くないかチェック
→package.json更新
→npmアップデート

意外と簡単に出来ちゃいます。

このアップデートで使用するコマンドが

npm install npm-check-updates

なのですが、具体的にどう言った時に使用すれば良いのか、以下に簡単に説明します。

できる事

• package.jsonに書かれているnpmのバージョンを、一括で最新に書き変える事ができる。
• 実際に書き変える前に確認だけすることもできる。
• ncuコマンドで書き換えが出来る。

どんなときに使えるのか？

• 既存のpackage.jsonを使用して、同じnpmをそのまま使いたいけど、バージョンだけは新しくしたいとき。

使い方

初回はnpm-check-updatesをグローバルにインストールします。

npm install -g npm-check-updates

上記のコマンドを入力すると、ncuというコマンドが使用できるようになります。

npx ncu -u

するとnpm outdatedの簡易版のような見た目で各パッケージの現在インストールされているバージョンと最新バージョンの情報がそれぞれ一覧表示されます。

gulp-babel^8.0.0-beta.2→^8.0.0gulp-postcss^7.0.1→^8.0.0gulp-sass^3.2.1→^4.0.2postcss-flexbugs-fixes^3.3.0→^4.1.0postcss-normalize-charset^1.1.1→^4.0.

(ncuコマンドだけでも上記の処理が可能との記事もありましたが、私は出来ませんでした。)

そして、npmのアップデートをします。

npm update

最後にnpmのインストールをしたら終了です。

npm install 

※特定のパッケージのみアップデートを実行したい場合は

ncu -u {パッケージ名}

※特定のパッケージ以外をアップデートを実行したい場合は

ncu -x {パッケージ名}

で出来るそうです◎！
複数のパッケージがある場合は、パッケージごとを半角スペースで区切れば一気に処理ができます。

さいごに

時間に余裕があるときは、packeage.jsonは毎回新規で作ってあげた方が良いみたい。

参考サイト

脆弱性の警告を受けたnpmパッケージの依存関係を力技で直す : https://qiita.com/hibikikudo/items/0af352acac85fce28ec2
npm で作られたプロジェクトの依存モジュールを更新する : https://takuya-1st.hatenablog.jp/entry/2019/08/23/235613