エンジニアを目指す日常ブログ

日々勉強したことのメモ。独学ですので間違っていたらコメント等で教えてください。

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

はじめに

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) - エンジニアを目指す日常ブログ

バージョン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がインストールされる

詳しく書いてある資料
package.json のチルダ(~) とキャレット(^) - Qiita
Package.jsonのバージョンの読み方、知ってる?

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

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

以下サイトを確認。

www.npmjs.com

または

$ yarn info react-router-dom

を実行する。

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

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

$ npm remove react-router-dom

【npm/yarn】パッケージをダウングレードする - Ren's blog

おわりに

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