概要
- 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