SCRAWLED TECH BLOG

当サイトは、アフィリエイト広告を利用しています

package.json内のpackageをアップデートする方法

作成日：2022月09月23日
更新日：2022年09月23日

当ブログもやっとGatsbyをv2からv4にversionをあげた。
その際に使用したインストール済みのパッケージに最新バージョンがあるか確認し、
アップデートするためのyarnコマンドの使い方をまとめておく。
下記のyarnコマンドを使用した。

  • yarn outdated
  • yarn upgrade
  • yarn add [package-name]@latest
  • yarn upgrade-interactive
  • yarn upgrade-interactive --latest

パッケージに最新versionがあるか確認する

yarn outdatedコマンドを実行することで
インストール済みのパッケージに最新バージョンがあるかどうか確認することができる

yarn outdated

yarn outdatedコマンドを実行する
このコマンドでは確認ができるだけでアップデート自体はできない。

GitBash
$ yarn outdated
info Color legend :
 "<red>"    : Major Update backward-incompatible updates
 "<yellow>" : Minor Update backward-compatible features
 "<green>"  : Patch Update backward-compatible bug fixes
Package                             Current Wanted  Latest Package Type    URL
gatsby                              2.31.0  2.32.13 4.23.1 dependencies    https://github.com/gatsbyjs/

※説明のためGatsbyだけ記載

Current

Currentは現在インストールされているversionのこと。

Wanted

package.jsonで指定してあるsemverの条件の最大versionのこと

Latest

そのパッケージの最新version

パッケージを更新する

yarn outdatedコマンドで見つけた古いversionのパッケージを

  • yarn upgrade
  • yarn add [package-name]@latest

のどちらを使って更新する。

yarn upgrade [package-name]

yarn upgrade [package-name]はpackageを指定すれば、そのパッケージのみを、指定しなければ
すべてのパッケージをWantedのバージョンにアップデートすることができる。
package.jsonは更新されず、yarn.lockが更新される

キャレット(^)指定パッケージの場合

最新のメジャーバージョンに更新される

package.json

キャレットがついているためマイナーバージョンまでアップデートできる

package.json
{
  ~
  "dependencies": {
    "gatsby": "^2.26.1",
  },
}
yarn outdated実行（yarn upgrade 実行前）

実行前に現在の状態を確認する。

GitBash
$ yarn outdated
info Color legend :
 "<red>"    : Major Update backward-incompatible updates
 "<yellow>" : Minor Update backward-compatible features
 "<green>"  : Patch Update backward-compatible bug fixes
Package                             Current Wanted  Latest Package Type    URL
gatsby                              2.31.0  2.32.13 4.23.1 dependencies    https://github.com/gatsbyjs/
yarn upgrade実行

gatsbyをアップデートする

GitBash
$ yarn upgrade gatsby
yarn outdated実行（yarn upgrade実行後）

再度、yarn outdatedを実行するとWantedのversionまで更新されている。

GitBash
$ yarn outdated
yarn outdated v1.22.10
info Color legend :
 "<red>"    : Major Update backward-incompatible updates
 "<yellow>" : Minor Update backward-compatible features
 "<green>"  : Patch Update backward-compatible bug fixes
Package                             Current Wanted  Latest Package Type    URL
gatsby                              2.32.13 2.32.13 4.23.1 dependencies    https://github.com/gatsbyjs/

package.jsonは更新されないが、yarn.lockが更新されている。

チルダ(~)指定パッケージの場合

最新のパッチバージョンに更新される

package.json

チルダがついているためパッチバージョンまでアップデートできる

package.json
{
  ~
  "dependencies": {
    "@fortawesome/free-solid-svg-icons": "~5.15.2",
  },
}
yarn outdated実行（yarn upgrade 実行前）

実行前に現在の状態を確認する。

GitBash
$ yarn outdated
info Color legend :
 "<red>"    : Major Update backward-incompatible updates
 "<yellow>" : Minor Update backward-compatible features
 "<green>"  : Patch Update backward-compatible bug fixes
Package                             Current Wanted  Latest Package Type    URL
@fortawesome/free-solid-svg-icons   5.15.2  5.15.4  6.2.0  dependencies    https://fontawesome.com
yarn upgrade実行

gatsbyをアップデートする

GitBash
$ yarn upgrade @fortawesome/free-solid-svg-icons
yarn outdated実行（yarn upgrade実行後）

再度、yarn outdatedを実行するとWantedのversionまで更新されている。

GitBash
$ yarn outdated
yarn outdated v1.22.10
info Color legend :
 "<red>"    : Major Update backward-incompatible updates
 "<yellow>" : Minor Update backward-compatible features
 "<green>"  : Patch Update backward-compatible bug fixes
Package                             Current Wanted  Latest Package Type    URL
@fortawesome/free-solid-svg-icons   5.15.4  5.15.4  6.2.0  dependencies    https://fontawesome.com

package.jsonは更新されないが、yarn.lockが更新されている。

すべてをWantedのバージョンにアップデートする

全部一括でアップデートしたい場合はパッケージを指定せずに実行する

GitBash
$ yarn upgrade

yarn add [package-name]@latest

yarn add package-nameに@latestをつけることでLatestのversionにアップデート
することができる。
メジャーアップデートとなるのでAPIの互換性がなくてエラーが発生する可能性があるので注意。
こっちはpackage.jsonが更新される

最新バージョンにする

上記に引き続き、gatsbyを最新verにしてみる

yarn add[package-name]@latest実行前
GitBash
$ yarn outdated
yarn outdated v1.22.10
info Color legend :
 "<red>"    : Major Update backward-incompatible updates
 "<yellow>" : Minor Update backward-compatible features
 "<green>"  : Patch Update backward-compatible bug fixes
Package                             Current Wanted  Latest Package Type    URL


gatsby                              2.31.0  2.32.13 4.23.1 dependencies    https://github.com/gatsbyjs/
yarn add[package-name]@latest実行

アップデートを実行

bash
$ yarn add gatsby@latest
yarn add[package-name]@latest実行後確認

最新versionになったため「yarn outdated」では出力されなくなる。 package.jsonが更新されている

package.json
{
  ~
  "dependencies": {
    "gatsby": "^4.23.1",
  },
}

バージョン指定

バージョン指定したい場合は下記でてきる

GitBash
yarn add [package-name]@x.x.x

確認とアップデートを同時に行う！！

上記まではまずは「yarn outdated」を打って、バージョンアップがあるか確認した後に
「yarn upgrade」か「yarn add ~ @latest」を使って更新としていたが
数が多い場合は非常に面倒なので、確認と同時にアップデートを実行できる超便利コマンドがある。

yarn upgrade-interactive

yarn upgrade-interactiveを実行すると下記のような形で一覧がでる。
upgrade-interactiveは「yarn outdated」と「yarn upgrade」を対話的に行うことができるが
メジャーアップデートはできない。
※yarn upgradeと同様にpackage.jsonは更新されず、yarn.lockのみが更新される

GitBash
$ yarn upgrade-interactive
yarn upgrade-interactive v1.22.10
info Color legend :
 "<red>"    : Major Update backward-incompatible updates
 "<yellow>" : Minor Update backward-compatible features
 "<green>"  : Patch Update backward-compatible bug fixes
? Choose which packages to update.
 devDependencies
   name                                 range    from       to       url
 ( ) @material-ui/core                    ^4.11.3  4.11.3  ❯  4.12.4   https://mui.com/


 dependencies
   name                                 range    from       to       url
 ( ) @fortawesome/fontawesome-svg-core    ^1.2.34  1.2.34  ❯  1.3.0    https://fontawesome.com
 (*) @fortawesome/free-brands-svg-icons   ^5.15.2  5.15.2  ❯  5.15.4   https://fontawesome.com
 ( ) @fortawesome/free-regular-svg-icons  ^5.15.2  5.15.2  ❯  5.15.4   https://fontawesome.com
 (*) @fortawesome/free-solid-svg-icons    ^5.15.2  5.15.2  ❯  5.15.4   https://fontawesome.com
 ~
  • カーソルで移動してspaceでチェックをつけてEnterでアップデートを実行できる

yarn upgrade-interactive --latest

yarn upgrade-interactive --latestを実行すると下記のような形で一覧がでる。
upgrade-interactiveは「yarn outdated」と「yarn add [package-name]@latest 」を対話的に行うことができる
※メジャーバージョンに更新され、package.jsonが書き変わる。

GitBash
$ yarn upgrade-interactive --latest
yarn upgrade-interactive v1.22.10
info Color legend :
 "<red>"    : Major Update backward-incompatible updates
 "<yellow>" : Minor Update backward-compatible features
 "<green>"  : Patch Update backward-compatible bug fixes
? Choose which packages to update. (Press <space> to select, <a> to toggle all, <i> to invert selection)
 dependencies
   name                                 range   from        to      url
>( ) @fortawesome/fontawesome-svg-core    latest  1.2.34   ❯  6.2.0   https://fontawesome.com
 ( ) @fortawesome/free-brands-svg-icons   latest  5.15.4   ❯  6.2.0   https://fontawesome.com
 ( ) @fortawesome/free-regular-svg-icons  latest  5.15.2   ❯  6.2.0   https://fontawesome.com
 ( ) @fortawesome/free-solid-svg-icons    latest  5.15.4   ❯  6.2.0   https://fontawesome.com
 ( ) @fortawesome/react-fontawesome       latest  0.1.14   ❯  0.2.0   https://github.com/FortAwesome/react-fontawesome
  • latestオプションなしと比べるとtoが最新メジャーバージョンになっている
  • 操作は一緒。

まとめ

マイナーバージョンをあげる作業は「yarn upgrade-interactive」を使えば簡単にできた。
メジャーバージョンをあげる時は「upgrade-interactive --latest」を使えば、一括で行うことは
できるが、エラーが発生する可能性が高いので一つずつ丁寧にやった方がいいような気がする。
※実際にエラーを吐きまくったので...

参考

下記を参考にさせていただきました。

新着記事

目次
タグ別一覧
top