jackmiwamiwa devblog

フロントエンドをメインに行ったことをまとめていくサイトになります。

npmアップデート手順・アップデートを行ってみて

個人のフロントエンドのテンプレートでnpmパッケージのアップデートをよく行うので、アップデートの方法などのメモ

コマンド上でのバージョンアップ手順

npm-check-updatesのインストール

グローバルにインストール

$ npm -g npm-check-updates

www.npmjs.com

npm-check-updates使い方

バージョンアップするものの確認を行う

$ ncu

バージョンアップするもの全てのバージョンをあげる

$ ncu -u

パッケージを指定して、バージョンをあげる

$ ncu -u パッケージ名

マイナーバージョンのみアップデート

$ ncu -a

devDependenciesのみアップデートを行う

$ ncu -d

dependenciesのみアップデートを行う

$ ncu -p

注意

ncuなどでバージョンを上げた時にはパッケージのインストールは完了していないので、npm installyarn installを行う必要あり。

参考

tech.glatchdesign.com

vscodeでのバージョンアップ手順

vscode上でnpmパッケージのバージョンを確認できる「Version Lens」

marketplace.visualstudio.com

コードがいつ変更されたのかを表示できる「GitLens」

marketplace.visualstudio.com

npmバージョンをアップデートしてみた所感

普段から自分の使っているバージョンに意識できるようになった

Version Lensを入れることで、気軽に確認を行うことができるようになったので、バージョンアップを行う前よりは意識できるようになった

使っているパッケージ・使っていないパッケージを普段より見つけやすくなった

npmのバージョン確認(ncuなどでバージョンアップされている) → 何のパッケージか調べる(何を行なっているパッケージか、どこで使われているパッケージかなど) → 使われている場所なし

などで使われていないパッケージを消しやすくなった。

パッケージの切り替えを行いやすくなった

Version Lensの最新版かつGitLensの更新が一定期間内行われていない場合、大替案やパッケージ自体が変更になったなど調べるきっかけになった。

参考リンク記事一覧

tech.glatchdesign.com

tacamy.hatenablog.com