Zenn
🔧

npmで管理しているライブラリのバージョンアップ手順まとめ

2021/04/06に公開
Node.js
React
Vue.js
npm
tech

概要

  • npmで管理しているライブラリのバージョンアップ方法をまとめていきます。
  • また、今回は何かサンプルのプロジェクトを利用し、結果を見ていくとわかりやすいと思うので、https://github.com/creativetimofficial/vue-notus こちらを利用し下記の手順を試しながら結果を記載していきます。

ローカル環境のnpmバージョンを確認

  • 最新のversionになっていることを確認します。
    最新になっていなければversionをlatestまで上げてからバージョンアップを行うのが良いです。
❯ npm --version
7.6.3

現在のライブラリのversionを確認

  • npm outdatedコマンドで現在のライブラリのバージョン、マイナーバージョンがどのくらい上がるのかを確認します。

npm outdated説明

  • Current：現在インストールされているバージョン
  • Wanted：存在するバージョンのうち、 package.json に記載された semver 条件を満たす最新のバージョン
  • Latest：そのパッケージの最新バージョン
❯ npm outdated
Package                       Current         Wanted   Latest  Location                             Depended by
@babel/core                   7.13.10        7.13.10  7.13.14  node_modules/@babel/core             vue-notus
@babel/eslint-parser          7.13.10        7.13.10  7.13.14  node_modules/@babel/eslint-parser    vue-notus
@popperjs/core                  2.9.1          2.9.1    2.9.2  node_modules/@popperjs/core          vue-notus
@tailwindcss/forms              0.2.1          0.2.1    0.3.2  node_modules/@tailwindcss/forms      vue-notus
@vue/cli-plugin-babel   5.0.0-alpha.7  5.0.0-alpha.7   4.5.12  node_modules/@vue/cli-plugin-babel   vue-notus
@vue/cli-plugin-eslint  5.0.0-alpha.7  5.0.0-alpha.7   4.5.12  node_modules/@vue/cli-plugin-eslint  vue-notus
@vue/cli-service        5.0.0-alpha.7  5.0.0-alpha.7   4.5.12  node_modules/@vue/cli-service        vue-notus
@vue/compiler-sfc               3.0.7          3.0.7   3.0.11  node_modules/@vue/compiler-sfc       vue-notus
chart.js                        2.9.4          2.9.4    3.0.2  node_modules/chart.js                vue-notus
core-js                         3.9.1          3.9.1   3.10.0  node_modules/core-js                 vue-notus
eslint                         7.22.0         7.22.0   7.23.0  node_modules/eslint                  vue-notus
eslint-plugin-vue               7.7.0          7.7.0    7.8.0  node_modules/eslint-plugin-vue       vue-notus
gulp-append-prepend             1.0.8          1.0.8    1.0.9  node_modules/gulp-append-prepend     vue-notus
postcss                         8.2.8          8.2.8    8.2.9  node_modules/postcss                 vue-notus
tailwindcss                     2.0.4          2.0.4    2.1.1  node_modules/tailwindcss             vue-notus
vue                             3.0.7          3.0.7   2.6.12  node_modules/vue                     vue-notus
vue-router                      4.0.5          4.0.5    3.5.1  node_modules/vue-router              vue-notus

バージョンのアップデートを行う(今回は、マイナーバージョンのみアップデートを実施します。)

  • npm-check-updatesというライブラリをグローバルにインストールしncuコマンドで、メジャーバージョンは固定、マイナーバージョンのみ最新にします。
  • なぜ、npm updateコマンドを利用しないのかというと、npm updateコマンドでは、package.jsonの書き換えは行ってくれないためです。

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

npm i -g npm-check-updates

npm-check-updatesを利用し、マイナーバージョンのみアップデートを実施

❯ ncu -u --target minor
Upgrading /Users/yoshitaka.koitabashi/Desktop/vue-notus/package.json
[====================] 21/21 100%

 @popperjs/core                  2.9.1  →          2.9.2
 @tailwindcss/forms              0.2.1  →          0.3.2
 @vue/compiler-sfc               3.0.7  →         3.0.11
 core-js                         3.9.1  →         3.10.0
 gulp-append-prepend             1.0.8  →          1.0.9
 tailwindcss                     2.0.4  →          2.1.1
 vue                             3.0.7  →         3.0.11
 vue-router                      4.0.5  →          4.0.6
 @babel/core                   7.13.10  →        7.13.14
 @babel/eslint-parser          7.13.10  →        7.13.14
 @vue/cli-plugin-babel   5.0.0-alpha.7  →  5.0.0-alpha.8
 @vue/cli-plugin-eslint  5.0.0-alpha.7  →  5.0.0-alpha.8
 @vue/cli-service        5.0.0-alpha.7  →  5.0.0-alpha.8
 eslint                         7.22.0  →         7.23.0
 eslint-plugin-vue               7.7.0  →          7.8.0
 postcss                         8.2.8  →          8.2.9

Run npm install to install new versions.

package.jsonが更新されたので、その状態でnpm install コマンドを実行

❯ npm install

up to date, audited 1580 packages in 3s

117 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

もし、npm installでerrorを吐く場合

  • 依存関係が解決できずエラーになってしまった場合は、npm audit fix --forceコマンドで自動的に修正してくれます。
> npm audit fix --force

アップデート後のライブラリのバージョンを確認

  • npm lsコマンドでライブラリのバージョンが上がったことを確認します。
❯ npm ls
vue-notus@1.1.0 /Users/yoshitaka.koitabashi/Desktop/vue-notus
├── @babel/core@7.13.14
├── @babel/eslint-parser@7.13.14
├── @fortawesome/fontawesome-free@5.15.3
├── @popperjs/core@2.9.2
├── @tailwindcss/forms@0.3.2
├── @vue/cli-plugin-babel@5.0.0-alpha.8
├── @vue/cli-plugin-eslint@5.0.0-alpha.8
├── @vue/cli-service@5.0.0-alpha.8
├── @vue/compiler-sfc@3.0.11
├── autoprefixer@10.2.5
├── chart.js@2.9.4
├── core-js@3.10.0
├── eslint-plugin-vue@7.8.0
├── eslint@7.23.0
├── gulp-append-prepend@1.0.9
├── gulp@4.0.2
├── postcss@8.2.9
├── tailwindcss@2.1.1
├── vue-router@4.0.6
├── vue-template-compiler@2.6.12
└── vue@3.0.11

ライブラリの監査を見れるので結果を確認

  • npm auditコマンドでライブラリの監査が行えるのでその結果を確認します。
❯ npm audit
found 0 vulnerabilities

依存関係の監査結果で脆弱性がSeverity: highのものがあった場合の対応

  • npm audit fixコマンドを実施して依存関係の脆弱性対応を自動で行うことができます。
> npm audit fix --force

Discussion