mokajima.com

npm パッケージのアップデート

  • javascript

yarn outdated

yarn outdated は npm レジストリを調べます。インストールされた npm パッケージが古いかどうかを確認し、その結果を出力します。

$ 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/fontawesome-svg-core  1.2.28  1.2.32  1.2.32  dependencies    https://fontawesome.com
@fortawesome/free-brands-svg-icons 5.13.0  5.15.1  5.15.1  dependencies    https://fontawesome.com
@fortawesome/free-solid-svg-icons  5.13.0  5.15.1  5.15.1  dependencies    https://fontawesome.com
@fortawesome/react-fontawesome     0.1.10  0.1.11  0.1.11  dependencies    https://github.com/FortAwesome/react-fontawesome
gatsby                             2.22.15 2.24.67 2.24.67 dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby#readme
gatsby-image                       2.4.5   2.4.20  2.4.20  dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme
gatsby-plugin-manifest             2.4.9   2.4.33  2.4.33  dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-manifest#readme
gatsby-plugin-offline              3.2.7   3.2.30  3.2.30  dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-offline#readme
gatsby-plugin-react-helmet         3.3.2   3.3.12  3.3.12  dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-react-helmet#readme
gatsby-plugin-sharp                2.6.9   2.6.38  2.6.38  dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#readme
gatsby-remark-prismjs              3.5.6   3.5.15  3.5.15  dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-prismjs#readme
gatsby-source-filesystem           2.3.8   2.3.32  2.3.32  dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem#readme
gatsby-transformer-remark          2.8.19  2.8.37  2.8.37  dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-remark#readme
gatsby-transformer-sharp           2.5.3   2.5.16  2.5.16  dependencies    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sharp#readme
prettier                           2.0.5   2.0.5   2.1.2   devDependencies https://prettier.io
prismjs                            1.20.0  1.21.0  1.21.0  dependencies    https://github.com/PrismJS/prism#readme
react-helmet                       6.0.0   6.1.0   6.1.0   dependencies    https://github.com/nfl/react-helmet#readme

出力では npm パッケージ１つに対し、「Current」「Wanted」「Latest」の３つのバージョン番号が提示されます。それぞれの意味は次の通りです。

  • Current: 現在インストールされているバージョン番号
  • Wanted: package.json で指定した semver の範囲を満たす最大のバージョン番号
  • Latest: 最新のバージョン番号

package.json で指定した semver の範囲

package.json で指定した semver の範囲とはなんでしょうか。

まず、semver とは Semantic Versioning の略です。Semantic Versioning とはバージョン番号管理の手法のことを指します。Semantic Versioning ではバージョン番号を次のように管理します。

バージョンナンバーは、メジャー.マイナー.パッチ とし、バージョンを上げるには、

  1. APIの変更に互換性のない場合はメジャーバージョンを、
  2. 後方互換性があり機能性を追加した場合はマイナーバージョンを、
  3. 後方互換性を伴うバグ修正をした場合はパッチバージョンを上げます。

プレリリースやビルドナンバーなどのラベルに関しては、メジャー.マイナー.パッチ の形式を拡張する形で利用することができます。

https://semver.org/lang/ja/

次に、yarn outdated を実行した際の package.json の内容を確認します。

{
  // ...
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.10",
    "gatsby": "^2.22.15",
    "gatsby-image": "^2.4.5",
    "gatsby-plugin-manifest": "^2.4.9",
    "gatsby-plugin-offline": "^3.2.7",
    "gatsby-plugin-react-helmet": "^3.3.2",
    "gatsby-plugin-sharp": "^2.6.9",
    "gatsby-remark-prismjs": "^3.5.6",
    "gatsby-source-filesystem": "^2.3.8",
    "gatsby-transformer-remark": "^2.8.19",
    "gatsby-transformer-sharp": "^2.5.3",
    "prismjs": "^1.20.0",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.0.0"
  },
  "devDependencies": {
    "prettier": "2.0.5"
  },
  // ...
}

例えば gatsby のバージョン番号は 2.25.15 となっています。Semantic Versioning に従うと、メジャーバージョンが 2、マイナーバージョンが 25、パッチバージョンが 15 となります。

ところで、2.25.15 の前に ^ （キャレット）が付いていました。これは 1.0.0 以上のバージョン番号について、マイナーバージョンのアップデートないしはパッチバージョンのアップデートが可能なことを意味します。

yarn outdated の出力では gatsby の Current が 2.22.15 であるのに対し Wanted が 2.24.67 となっています。2.22.15 から 2.24.67 へのアップデートはマイナーバージョンのアップデートのため、アップデート可能なことがわかります。アップデート可能なバージョンが存在する場合、yarn upgrade を実行することでアップデートが行われます。

なお、~2.22.15 のように ~ （チルダ）が付いている場合は、パッチバージョンのアップデートのみが可能なことを意味します。

以上を踏まえると、package.json で指定した semver の範囲とは、package.json での npm パッケージのバージョン番号の表記に応じたアップデート可能な範囲のことを指します。^2.25.15 であればマイナーバージョンのアップデートの範囲（ 2.25.15 以上 3.0.0 未満）を指します。一方 ~2.25.15 であればパッチバージョンのアップデートの範囲（ 2.25.15 以上 2.26.0 未満）を指します。

yarn upgrade

yarn upgrade は特定の npm パッケージを Wanted のバージョン番号にアップデートします。npm パッケージ名を省略した場合、すべての npm パッケージが一括アップデートされます。

以下の例では @fortawesome/fontawesome-svg-core という npm パッケージのアップデートを行います。

$ yarn upgrade @fortawesome/fontawesome-svg-core

package.json での @fortawesome/fontawesome-svg-core のバージョン番号の表記は ^1.2.28 です。また、yarn outdated の出力では Wanted は 1.2.32 となっています。そのため、yarn upgrade を実行すると @fortawesome/fontawesome-svg-core は 1.2.32 にアップデートされます。

このとき package.json は更新されませんが、 yarn.lock の差分を確認するとバージョン番号が変わっていることがわかります。

diff --git a/yarn.lock b/yarn.lock
index 7eec881..f4ca88d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1112,17 +1112,17 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==

-"@fortawesome/fontawesome-common-types@^0.2.28":
-  version "0.2.28"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz#1091bdfe63b3f139441e9cba27aa022bff97d8b2"
-  integrity sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg==
+"@fortawesome/fontawesome-common-types@^0.2.28", "@fortawesome/fontawesome-common-types@^0.2.32":
+  version "0.2.32"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz#3436795d5684f22742989bfa08f46f50f516f259"
+  integrity sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w==

 "@fortawesome/fontawesome-svg-core@^1.2.28":
-  version "1.2.28"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz#e5b8c8814ef375f01f5d7c132d3c3a2f83a3abf9"
-  integrity sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==
+  version "1.2.32"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz#da092bfc7266aa274be8604de610d7115f9ba6cf"
+  integrity sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.28"
+    "@fortawesome/fontawesome-common-types" "^0.2.32"

 "@fortawesome/free-brands-svg-icons@^5.13.0":
   version "5.13.0"

yarn add [package-name]@latest

yarn add [package-name]@latest は npm パッケージを最新のバージョンにアップデートします。メジャーバージョンのアップデートを含むため、アップデート後は不具合が発生していないかを確認する必要があります。 また、 @latest ではなく @バージョン番号 とすることでバージョン番号を指定してアップデートすることも可能です。

yarn upgrade-interactive [--latest]

yarn upgrade-interactive は npm パッケージの一括アップデートを対話式で行います。yarn outdated と yarn upgrade を合わせたイメージで、npm パッケージの３つのバージョン（「Current」「Wanted」「Latest」）を確認しながら、アップデートする npm パッケージを選択することができます。yarn upgrade-interactive --latest とすると最新のバージョンへの一括アップデートを対話式で行います。

$ 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. (Press <space> to select, <a> to toggle all, <i> to invert selection)
 dependencies
   name                                range     from        to       url
❯◯ @fortawesome/fontawesome-svg-core   ^1.2.28   1.2.28   ❯  1.2.34   https://fontawesome.com
 ◯ @fortawesome/free-brands-svg-icons  ^5.13.0   5.13.0   ❯  5.15.2   https://fontawesome.com
 ◯ @fortawesome/free-solid-svg-icons   ^5.13.0   5.13.0   ❯  5.15.2   https://fontawesome.com
 ◯ @fortawesome/react-fontawesome      ^0.1.10   0.1.10   ❯  0.1.14   https://github.com/FortAwesome/react-fontawesome
 ◯ gatsby                              ^2.22.15  2.22.15  ❯  2.31.1   https://github.com/gatsbyjs/gatsby/tree/master/packages/gats
by#readme
 ◯ gatsby-image                        ^2.4.5    2.4.5    ❯  2.10.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gats
by-image#readme
 ◯ gatsby-plugin-manifest              ^2.4.9    2.4.9    ❯  2.11.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gats
by-plugin-manifest#readme
 ◯ gatsby-plugin-offline               ^3.2.7    3.2.7    ❯  3.9.0    https://github.com/gatsbyjs/gatsby/tree/master/packages/gats
by-plugin-offline#readme
 ◯ gatsby-plugin-react-helmet          ^3.3.2    3.3.2    ❯  3.9.0    https://github.com/gatsbyjs/gatsby/tree/master/packages/gats
by-plugin-react-helmet#readme
 ◯ gatsby-plugin-sharp                 ^2.6.9    2.6.9    ❯  2.13.1   https://github.com/gatsbyjs/gatsby/tree/master/packages/gats
by-plugin-sharp#readme
 ◯ gatsby-remark-images                ^3.3.39   3.3.39   ❯  3.10.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gats
by-remark-images#readme
 ◯ gatsby-remark-katex                 ^3.3.14   3.3.14   ❯  3.9.0    https://github.com/gatsbyjs/gatsby/tree/master/packages/gats
by-remark-katex#readme
 ◯ gatsby-remark-prismjs               ^3.5.6    3.5.6    ❯  3.12.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gats
by-remark-prismjs#readme
 ◯ gatsby-source-filesystem            ^2.3.8    2.3.8    ❯  2.10.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gats
by-source-filesystem#readme
 ◯ gatsby-transformer-remark           ^2.8.19   2.8.19   ❯  2.15.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gats
by-transformer-remark#readme
 ◯ gatsby-transformer-sharp            ^2.5.3    2.5.3    ❯  2.11.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gats
by-transformer-sharp#readme
 ◯ prismjs                             ^1.20.0   1.20.0   ❯  1.23.0   https://github.com/PrismJS/prism#readme
 ◯ react                               ^16.12.0  16.13.1  ❯  16.14.0  https://reactjs.org/
 ◯ react-dom                           ^16.12.0  16.13.1  ❯  16.14.0  https://reactjs.org/
 ◯ react-helmet                        ^6.0.0    6.0.0    ❯  6.1.0    https://github.com/nfl/react-helmet#readme
(Move up and down to reveal more choices)

参考

© mokajima.com