久しぶりに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を実行した際、このキャレットレンジがデフォルトで適用されます。
続く
この時点でcreate-react-appのバージョンアップは解決したのですが、nodeをアップグレードしなかったため、別のエラーが出てしまいました。yarn create react-appの実行の際にエラーが出た場合は下記の記事もご覧ください。
