react19.0.0 倉庫安裝

Tinypan發表於2024-05-25
React

react19.0.0 倉庫安裝

克隆倉庫到本地:
git clone https://github.com/facebook/react.git
ReactVersions 中可以看到當前版本為 19.0.0

在專案下有個 .nvmrc 檔案，指定了 node 版本為 18.20.0 (react18.3.1 配套的 node 版本為 14.17.6 這跨度有點大啊)

安裝 node 18.20.0 nvm install 18.20.0

安裝完成後切換 node 版本 nvm use ,該命令會根據 .nvmrc 的配置切換到 node 18.20.0

package.json 中指定了包管理器是 yarn@1.22.22

安裝 yarn@1.22.22npm i yarn@1.22.22 --global

yarn 安裝完成後，設定國內映象源 yarn config set registry https://registry.npmmirror.com

準備工作完成，開始安裝依賴 yarn install

安裝後會報錯：

error /Users/pmx/Sites/Commonfiles/Github/react/node_modules/gifsicle: Command failed.
Exit code: 1
Command: node lib/install.js
Arguments:
Directory: /Users/pmx/Sites/Commonfiles/Github/react/node_modules/gifsicle
Output:
⚠ connect ECONNREFUSED 0.0.0.0:443
⚠ gifsicle pre-build test failed
ℹ compiling from source
✖ Error: Command failed: /bin/sh -c autoreconf -ivf
autoreconf: export WARNINGS=
autoreconf: Entering directory '.'
autoreconf: configure.ac: not using Gettext
autoreconf: running: aclocal --force
Can't exec "aclocal": No such file or directory at /opt/homebrew/Cellar/autoconf/2.72/share/autoconf/Autom4te/FileUtils.pm line 299.
autoreconf: error: aclocal failed with exit status: 2

這個錯誤是安裝完成後報的，因為 package.json 中配置了 postinstall 指令，安裝完成後會執行該指令。
報錯是 gifsicle 中丟擲的，檢視 gifsicle 程式碼

gifsicle/lib/install.js

try {
  await bin.run(['--version']);
} catch (error) {
  log.warn('gifsicle pre-build test failed');
}

繼續檢視 gifsicle/lib/index.js

const url = `https://raw.githubusercontent.com/imagemin/gifsicle-bin/v${pkg.version}/vendor/`;

定位到問題，因為 raw.githubusercontent.com 在國內是被牆了的，所以我的處理方式是配置本地 DNS

首先檢視 raw.githubusercontent.com 可解析的 IP 地址

工具：https://ping.chinaz.com/https://raw.githubusercontent.com
選擇 ping 通的 IP 地址,配置到 hosts 中

sudo vim /etc/hosts

寫入
185.199.110.133 raw.githubusercontent.com

hosts 配置完成後，重啟電腦即可生效。如果不想重啟電腦，需要手動清除 DNS 快取 + 重啟網路服務
sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder
注意 Mac 版本不同，指令也會有區別

刪除 node_modules 重新安裝

[4/4] 🔨  Building fresh packages...
$ node node_modules/fbjs-scripts/node/check-dev-engines.js package.json && node ./scripts/flow/createFlowConfigs.js
✨  Done in 12.95s.

相關文章