yarnで古いバージョンのパッケージをインストールする方法メモ

2021/11/23

(最終更新: 2021/11/23

はじめに

Reactのreact-router-domがメジャーバージョンアップした(バージョン6)とのことで、バージョン6の記法を勉強できていないため、バージョン5をインストールしたいです。

yarnを使って実施する方法をメモします。

前提

  • create-react-appを利用してReactアプリを作成している状態。(今回はReact×typescipt)

【結論】バージョンを指定してパッケージインストールする方法

react-router-domのバージョン5、かつマイナーバージョンは最新のものをインストールしたい場合

$ yarn add. react-router-dom@5.x

react-router-domのバージョン5.2をインストールしたい場合

$ yarn add. react-router-dom@5.2

試したこと

普通にインストール

通常のインストールをする。

$ yarn add react-router-dom

結果、以下のログが出てインストール完了する。v6がインストールされている。

[4/4] Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ react-router-dom@6.0.2
info All dependencies
├─ react-router-dom@6.0.2
└─ react-router@6.0.2

package.jsonファイル、yarn.lockには以下が追記された。

package.json
{
  "dependencies": {
    ・・・(省略)・・・
    "react-router-dom": "^6.0.2",
    ・・・(省略)・・・
  }
yarn.lock
react-router-dom@^6.0.2:
  version "6.0.2"
  resolved ・・・(省略)・・・
  integrity ・・・(省略)・・・
  dependencies:
    history "^5.1.0"
    react-router "6.0.2"
参考資料
package.jsonやyarn.lockについて:
[package.jsonとpackage-lock.json とは?(Node.js/React) - エンジニアを目指す日常ブログ](https://tomiko0404.hatenablog.com/entry/2021/10/07/package-json)

バージョン6.0.2から5.2に変更してみる

@5.2を指定してupgradeする。

$ yarn upgrade react-router-dom@5.2

成功したログ。バージョン5.2.1がインストールされた。

[4/4] Rebuilding all packages...
success Saved lockfile.
success Saved 8 new dependencies.
info Direct dependencies
└─ react-router-dom@5.2.1
info All dependencies
├─ hoist-non-react-statics@3.3.2
├─ mini-create-react-context@0.4.1
├─ path-to-regexp@1.8.0
├─ react-router-dom@5.2.1
├─ react-router@5.2.1
├─ resolve-pathname@3.0.0
├─ tiny-warning@1.0.3
└─ value-equal@1.0.1

react-router-domには、5.2.05.2.1のバージョンがある。今回、指定した5.2の中で最新のバージョンがインストールされた模様。

package.jsonとyarn.lockの記載は以下のように変わる。package.jsonはインストール時に指定したコマンドが載っているイメージで、yarn.lockは実際にインストールされたバージョンまで記載されている。

package.json
    "react-router-dom": "5.2",
yarn.lock
react-router-dom@5.2:
  version "5.2.1"
  resolved ・・・(省略)・・・
  integrity ・・・(省略)・・・
  dependencies:
    "@babel/runtime" "^7.12.13"
    history "^4.9.0"
    loose-envify "^1.3.1"
    prop-types "^15.6.2"
    react-router "5.2.1"
    tiny-invariant "^1.0.2"
    tiny-warning "^1.0.0"

バージョン5の最新に変更する

@5を指定してupgradeする。

$ yarn add react-router-dom@5

成功したログ。バージョン5.3がインストールされた。

[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ react-router-dom@5.3.0
info All dependencies
└─ react-router-dom@5.3.0
Done in 47.35s.

メジャーバージョンのみ指定したので、5の中で最新のバージョンがインストールされた模様。

package.jsonとyarn.lockの記載は以下のように変わる。

package.json
    "react-router-dom": "5",
yarn.lock
react-router-dom@5:
  version "5.3.0"
  resolved ・・・(省略)・・・
  integrity ・・・(省略)・・・
  dependencies:
    "@babel/runtime" "^7.12.13"
    history "^4.9.0"
    loose-envify "^1.3.1"
    prop-types "^15.6.2"
    react-router "5.2.1"
    tiny-invariant "^1.0.2"
    tiny-warning "^1.0.0"

その他、注意点のメモ

^~xを利用した指定方法

package.jsonに自動的に追加されたレコードを見ると、^が使われている。 それぞれの使い方は以下の通り。

  • x:最新の数字を自動で入れてね、の意
  • ^:同じメジャーバージョンの中で最新を入れてねの意
  • ~:書いたところはその通りで、それ以下のバージョンは

使い方は以下のようになる。

$ yarn add. react-router-dom@5.x  ※5.3がインストールされる
$ yarn add react-router-dom@^5.2 ※5.3がインストールされる
$ yarn add react-router-dom@~5   ※5.3がインストールされる
参考資料
詳しく書いてある資料

試した結果からは、@5と書いても@5.xと書いても@^5.0と書いても良さそうだが、普通に使うのであれば@5.xあたりが安全か。

リリースされたバージョンの確認方法

以下サイトを確認。

参考資料

https://www.npmjs.com/package/react-router-dom

または

$ yarn info react-router-dom

を実行する。

npmの場合は一度アンインストールする必要がある

npmの場合はupgradeが無いので、以下でアンインストールしてやり直す必要があるらしい。

$ npm remove react-router-dom

まとめ

パッケージのバージョンを指定してインストールする方法を確認した。



個別連絡はこちらへ→Twitterお問い合わせ

プロフィール

プロフィールイメージ

はち子

事業会社のシステム部門で働きはじめて5年目の会社員。システム企画/要件定義/システムアーキテクチャ等。

Twitter→@bun_sugi

過去の記事について

はてなブログに掲載の記事(主にプログラミングメモ)についてはこちらに掲載しております。(本ブログに移行中)

タグ一覧

関連記事

Copyright© 2024, エンジニアを目指す日常ブログ

お問い合わせ|プライバシーポリシー