create-react-appのバージョンを2.0.4から3.2.0(執筆時最新版)へアップグレードする

久しぶりにReactアプリを作成しようと思い、reate-react-appのバージョンも最新にしようとして試行錯誤したことを記録しておきます。

結論

メジャーバージョンをまたいだ最新バージョンにアップグレードする場合は--latestを指定する。

$ yarn global upgrade create-react-app --latest

--latestつけないとメジャーバージョンが同一の最新版にアップグレードされる

アップグレード前のバージョン

アップグレード前のバージョンは2.0.4でした。create-react-appがグローバル環境にインストールされています。

$ yarn global list create-react-app
yarn global v1.9.4  # これはyarn自体のバージョン
[---------------------------------------------------------------] 0/63(node:54313) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
info "create-react-app@2.0.4" has binaries:  # これの 2.0.4の部分がcreate-react-appのバージョン
   - create-react-app
✨  Done in 0.22s.

upgradeコマンドで最新版にアップグレード

yarnの公式サイトyarn global | Yarnを参考に最新版へのアップグレードを試みました。

$ yarn global upgrade create-react-app
yarn global v1.9.4 # これはyarn自体のバージョン
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[---------------------------------------------------------------] 0/63(node:54321) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Rebuilding all packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.19.2", while you're on "1.9.4".  # yarnのバージョンをあげてね、との警告
info To upgrade, run the following command:
$ brew upgrade yarn
success Saved 52 new dependencies.
info Direct dependencies
└─ create-react-app@2.1.8   # バージョン2.1.8をインストールする
info All dependencies
├─ ansi-styles@2.2.1
├─ balanced-match@1.0.0
├─ block-stream@0.0.9
# 中略
├─ which@1.3.1
├─ xtend@4.0.2
└─ yallist@2.1.2
✨  Done in 1.26s.

create-react-appのバージョンを確認します。2.1.8でした。執筆時の最新バージョンは3.2.0ですので、期待した結果ではありません。

$ yarn global list create-react-app
yarn global v1.9.4 # これはyarn自体のバージョン
[---------------------------------------------------------------] 0/63(node:54322) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
info "create-react-app@2.1.8" has binaries: # create-react-appのバージョンは2.1.8
   - create-react-app
✨  Done in 0.20s.

メジャーバージョンをまたいで最新バージョンを取得する

この記事を書いている時点(2019年12月)の時点でのcreate-react-appの最新バージョンは3.2.0です。メジャーバージョンをまたいで最新バージョンにアップグレードするには、--latestオプションを使用します。

$ yarn global upgrade create-react-app --latest
yarn global v1.9.4 # これはyarn自体のバージョン
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[------------------------------------------------------------------------] 0/91(node:54326) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Rebuilding all packages...
success Saved lockfile.
success Saved 40 new dependencies.
info Direct dependencies
└─ create-react-app@3.2.0 # バージョン3.2.0をインストールする
info All dependencies
├─ ansi-escapes@3.2.0
├─ ansi-regex@4.1.0
├─ ansi-styles@3.2.1
# 中略
├─ supports-color@5.5.0
├─ through@2.3.8
└─ tslib@1.10.0
✨  Done in 5.73s.

create-react-appのバージョンを確認します。3.2.0でした。執筆時の最新バージョンになりました。

$ yarn global list create-react-app
yarn global v1.9.4  # これはyarn自体のバージョン
[-------------------------------------------------------------------------------------------] 0/91(node:55561) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
info "create-react-app@3.2.0" has binaries: # create-react-appのバージョンは3.2.0
   - create-react-app
✨  Done in 0.22s.

global環境にインストールされたパッケージのバージョン管理ポリシー

yarn global add some-package would add a carret-range, something like ^1.0.0

`yarn global upgrade` doesn't upgrade packages · Issue #5001 · yarnpkg/yarn · GitHub

「yarn global add some-packageを実行したときには、"^1.0.0"のように、キャレットレンジが適用されます」と書かれています。キャレットレンジは Versions of dependencies | Yarn に例が示されているように、例えば^1.2.3であれば、バージョン1.2.3以上、2.0.0未満までのバージョンを受け入れるという意味です。 yarn global addだけでなく、yarn addを実行した際、このキャレットレンジがデフォルトで適用されます。