
npmでインストールしたパッケージのバージョンを管理する
パッケージのインストール時にはおなじみのnpmですが、インストールだけでなく本来の役割であるパッケージのバージョン管理を行いたいと思います。ちょうどインストールしたパッケージが使わないうちにどんどんバージョンが古くなってきたこともあり、アップデートをする機会があったので備忘録として残しておきたいと思います。
パッケージのバージョンを確認し、アップデートを行う
まずnpmが入っている前提になりますが、インストールの方法についてなど詳しくは過去記事「WEB開発環境(Mac OS)に必要な各種インストール方法まとめ(1)」で紹介していますので参考にどうぞ。 まずは、npm自体のバージョンを確認しアップデートを行います。おなじみのコマンドでバージョンを確認したら、下記のように続けてnpm自体のアップデートを行います。アップデートが完了し、再度バージョンを確認するとバージョンが上がっているのが確認できるかと思います。// npmのバージョン確認 $ npm -v // npm自体をアップデート $ npm update -g npm次にインストールされたパッケージ一覧の現在のバージョンを確認します。下記コマンドを叩くと次のように現在のバージョンと最新のバージョンが合わせて確認できます。
$ npm ls --depth=0 // グローバルの場合 $ npm ls -g --depth=0先ほどのコマンドでパッケージの現在のバージョンが確認できましたが、最新バージョンとの差分がわかりませんのでアップデートが必要かどうかがわかりません。そこで下記コマンドで最新版との差分を確認します。
$ npm outdated // グローバルの場合 $ npm outdated -g // 出力結果 Package Current Wanted Latest Location npm 5.6.0 5.8.0 6.0.0インストールされているものが最新版であるパッケージは表示されませんが、現在のバージョンと最新版の差分がある場合は詳細情報が表示されます。 アップデートの必要がある場合は、基本のコマンドでもある、$ npm update で更新してもいいのですが、更新を一括で行ってくれる便利なパッケージ「npm-check-updates」を使うのがオススメです。npm-check-updatesを使用する場合は、まず下記コマンドでグローバルにインストールします。
$ npm install -g npm-check-updatesインストールが完了すると、下記コマンドでパッケージごとの最新版との差分が同じように確認できます。だたし、このコマンドはpackage.jsonのファイルがあるディレクトリで実行する必要があります。
$ ncu // 出力結果 chalk ^1.1.3 → ^2.4.1 find-up 1.1.2 → 2.1.0 get-stdin ^5.0.1 → ^6.0.0 npm ^3.10.6 → ^6.0.0出力結果に最新版バージョンとの差分が表示されますので、確認できたら下記コマンドで一括アップデートします。
$ ncu -uいかがでしょうか、これらのパッケージは古いバージョンのままで使い続けるのはリスクもあるので、このようなバージョン管理ツールを使ってマメに更新していくといいのではないでしょうか。
categories
- WordPress(61)
- JavaScript(49)
- Vue.js(48)
- CSS(46)
- jQuery(34)
- Nuxt.js(22)
- Sass(21)
- Gulp(17)
- webpack(16)
- PHP(14)
- HTML(14)
- GSAP(11)
- React(10)
- Vite(9)
- Pug(9)
- Laravel(8)
- Cordova(8)
- Linux(7)
- Next.js(6)
- Apache(5)
- Shopify(4)
- REST API(4)
- Node.js(4)
- Smarty(3)
- Git(3)
- JSON(3)
- その他プログラミング(3)
- Google Apps API(3)
- Bootstrap(3)
- 環境構築・システム(3)
- TypeScript(2)
- EJS(2)
- RMS(2)
- Docker(2)
- Instagram API(2)
- Excel VBA(2)
- SVG(1)
- Dart(1)
- ECカートASP(1)
- Markdown(1)
- AMP(1)
- Nginx(1)
- XML(1)
- shellscript(1)
- Ruby(1)
- MySQL(1)