npmのモジュールのバージョンを一気に上げる

October 01, 2019

プロジェクトが一段落して落ち着いたときなどにnpmモジュールのバージョンを上げる作業が入ったりします。プロジェクトが走っているときにライブラリのメジャーバージョンアップなんかがあったけど、破壊的変更あるからちょっと後回しにするなんてことよくあるんじゃないでしょうか。

一つ一つpackage.jsonの記述を消して再度npm i hogeを実行するのも面倒です。npm-check-update一気にアップデートしてみました。

現在のバージョンのチェック

npm outdatedコマンドでバージョンの状態をチェックできます。

npm outdated

出力結果はこんな感じです。Currentがインストールされているバージョン、Wantedがsemverの条件に当てはまる最新版、Latestがそのライブラリの最新版となります。

Package                        Current   Wanted   Latest  Location
@babel/core                      7.4.5    7.6.2    7.6.2  hoge
@emotion/core                  10.0.10  10.0.17  10.0.17  hoge
@emotion/styled                10.0.11  10.0.17  10.0.17  hoge
@storybook/addon-actions        5.1.11    5.2.1    5.2.1  hoge
@storybook/addon-knobs          5.1.11    5.2.1    5.2.1  hoge
@storybook/addon-links          5.1.11    5.2.1    5.2.1  hoge
@storybook/addon-viewport       5.1.11    5.2.1    5.2.1  hoge
@storybook/addons               5.1.11    5.2.1    5.2.1  hoge
@storybook/cli                  5.1.11    5.2.1    5.2.1  hoge
@storybook/react                5.1.11    5.2.1    5.2.1  hoge
@types/puppeteer                1.12.4   1.20.0   1.20.0  hoge
@types/react                   16.8.19   16.9.4   16.9.4  hoge
@types/react-dom                16.8.4   16.9.1   16.9.1  hoge
@types/react-helmet              5.0.8   5.0.11   5.0.11  hoge
@types/storybook__addon-knobs    5.0.3    5.0.4    5.0.4  hoge
babel-plugin-emotion           10.0.13  10.0.19  10.0.19  hoge
gatsby                           2.8.6  2.15.28  2.15.28  hoge
gatsby-image                     2.1.2   2.2.23   2.2.23  hoge
gatsby-plugin-emotion            4.0.7    4.1.9    4.1.9  hoge
gatsby-plugin-manifest           2.1.1   2.2.20   2.2.20  hoge
gatsby-plugin-offline            2.1.1   2.2.10   3.0.11  hoge
gatsby-plugin-react-helmet      3.0.12   3.1.10   3.1.10  hoge
gatsby-plugin-robots-txt         1.4.0    1.5.0    1.5.0  hoge
gatsby-plugin-sharp              2.1.3   2.2.27   2.2.27  hoge
gatsby-plugin-sitemap            2.2.0   2.2.16   2.2.16  hoge
gatsby-plugin-typescript        2.0.15   2.1.11   2.1.11  hoge
gatsby-source-filesystem        2.0.38   2.1.28   2.1.28  hoge
gatsby-transformer-sharp        2.1.21   2.2.19   2.2.19  hoge
jest                            24.8.0   24.9.0   24.9.0  hoge
jest-puppeteer                   4.2.0    4.3.0    4.3.0  hoge
puppeteer                       1.17.0   1.20.0   1.20.0  hoge
react                           16.8.6  16.10.1  16.10.1  hoge
react-dom                       16.8.6  16.10.1  16.10.1  hoge
resemblejs                       3.1.0    3.2.3    3.2.3  hoge
ress                             1.2.2    1.2.2    2.0.1  hoge
ts-jest                         24.0.2   24.1.0   24.1.0  hoge
ts-node                          8.3.0    8.4.1    8.4.1  hoge
twemoji                         12.0.4   12.1.3   12.1.3  hoge
typescript                       3.5.2    3.6.3    3.6.3  hoge

ライブラリを一気にアップデートする

npm-check-updateで一気にアップデートできます。

インストール

npm install -g npm-check-update

ncu -uの実行結果です。-upackage.jsonを更新してくれます。この後にnpm installをすればちゃんとそのバージョンのモジュールがインストールされます。

ncu -u                                                                                                                                                        22:54:16
Upgrading /Users/hoge/package.json
[====================] 46/46 100%

 @emotion/core                  ^10.0.10  →  ^10.0.17 
 @emotion/styled                ^10.0.11  →  ^10.0.17 
 gatsby                           ^2.8.3  →  ^2.15.28 
 gatsby-image                     ^2.1.2  →   ^2.2.23 
 gatsby-plugin-emotion            ^4.0.7  →    ^4.1.9 
 gatsby-plugin-manifest           ^2.1.1  →   ^2.2.20 
 gatsby-plugin-offline            ^2.1.1  →   ^3.0.11 
 gatsby-plugin-react-helmet      ^3.0.12  →   ^3.1.10 
 gatsby-plugin-robots-txt         ^1.4.0  →    ^1.5.0 
 gatsby-plugin-sharp              ^2.1.3  →   ^2.2.27 
 gatsby-plugin-sitemap            ^2.2.0  →   ^2.2.16 
 gatsby-plugin-typescript        ^2.0.15  →   ^2.1.11 
 gatsby-source-filesystem        ^2.0.38  →   ^2.1.28 
 gatsby-transformer-sharp        ^2.1.21  →   ^2.2.19 
 react                           ^16.8.6  →  ^16.10.1 
 react-dom                       ^16.8.6  →  ^16.10.1 
 ress                             ^1.2.2  →    ^2.0.1 
 twemoji                         ^12.0.4  →   ^12.1.3 
 @babel/core                      ^7.4.5  →    ^7.6.2 
 @storybook/addon-actions        ^5.1.11  →    ^5.2.1 
 @storybook/addon-knobs          ^5.1.11  →    ^5.2.1 
 @storybook/addon-links          ^5.1.11  →    ^5.2.1 
 @storybook/addon-viewport       ^5.1.11  →    ^5.2.1 
 @storybook/addons               ^5.1.11  →    ^5.2.1 
 @storybook/cli                  ^5.1.11  →    ^5.2.1 
 @storybook/react                ^5.1.11  →    ^5.2.1 
 @types/puppeteer                ^1.12.4  →   ^1.20.0 
 @types/react                   ^16.8.19  →   ^16.9.4 
 @types/react-dom                ^16.8.4  →   ^16.9.1 
 @types/react-helmet              ^5.0.8  →   ^5.0.11 
 @types/storybook__addon-knobs    ^5.0.3  →    ^5.0.4 
 babel-plugin-emotion           ^10.0.13  →  ^10.0.19 
 jest                            ^24.8.0  →   ^24.9.0 
 jest-puppeteer                   ^4.2.0  →    ^4.3.0 
 puppeteer                       ^1.17.0  →   ^1.20.0 
 resemblejs                       ^3.1.0  →    ^3.2.3 
 ts-jest                         ^24.0.2  →   ^24.1.0 
 ts-node                          ^8.3.0  →    ^8.4.1 
 typescript                       ^3.5.2  →    ^3.6.3 

npm outdatedを実行してもなにも表示されなければ更新成功です。