React环境安装
安装node（nvm）
此处安装的是nvm，可以同事安装不同版本的node环境，已安装node忽略此步骤
Nvm官方地址
https://github.com/nvm-sh/nvm
命令如下
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.0/install.sh | bash
一般来说，raw.githubusercontent.com这个域名是无法正常解析的，所以需要首先执行以下命令
sudo vi /etc/hosts
添加
151.101.76.133 raw.githubusercontent.com
(http://raw.githubusercontent.com)
（参考自：https://blog.csdn.net/laoxuan2011/article/details/106177126/）
之后执行nvm安装
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.0/install.sh | bash
写入配置文件
vi ~/.bash_profile
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
使之生效
source ~/.bash_profile
检查是否安装成功
nvm --version
输出版本表示安装成功
0.37.0
安装最新的稳定版node
nvm install node
查看node版本
node -v
输出版本表示安装成功
v15.1.0
安装cnpm
`npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org`
安装react
这里参考的是菜鸟教程
https://www.runoob.com/react/react-install.html
全局安装react
cnpm install -g create-react-app
建立一个react项目
npx create-react-app my-app
看起来非常顺利，一切即将大功告成，可问题就在此时发生了
报错内容
npm ERR! code 1
npm ERR! path /Users/XXX/Documents/my-app/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-gyp rebuild
npm ERR! /bin/sh: pkg-config: command not found
npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while in binding.gyp. while trying to load binding.gyp
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack at ChildProcess.onCpExit (/Users/XXX/Documents/ReactProject/my-app/node_modules/node-gyp/lib/configure.js:345:16)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:327:20)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:277:12)
npm ERR! gyp ERR! System Darwin 19.6.0
npm ERR! gyp ERR! command "/Users/XXXXX/.nvm/versions/node/v15.1.0/bin/node" "/Users/XXXXX/Documents/my-app/node_modules/.bin/node-gyp" "rebuild"
npm ERR! gyp ERR! cwd /Users/XXXXXX/Documents/my-app/node_modules/canvas
npm ERR! gyp ERR! node -v v15.1.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
总之就是not ok。下半部分可能废话比较多，先放一个简化版，后面有详细的配置过程与参考链接
简化版
- 安装xcode command line tools
- brew install pkg-config, pixman, cairo, pango
- 配置pkg-config环境变量
- 降低node版本至12.13.1
- (不一定用得到)
npm install -g node-gyp
sudo npm install bcrypt
npm rebuild
下面是详细版，有完整的命令与参考地址
详细版
看报错信息是缺少pkg-config这个东西，那么就安装了
安装的时候需要用到homebrew
参考地址，写得很详细
https://zhuanlan.zhihu.com/p/90508170
还需要下载安装xcode command line tools
https://developer.apple.com/download/more
执行命令
brew install pkg-config
在经过漫长的等待之后，出现这条信息就表示pkg-config安装成功了，如果不成功，应该是brew源的问题，换一个源再试一下
/usr/local/Cellar/pkg-config/0.29.2_3: 11 files, 623.8KB
配置环境变量
vi ~/.bash_profile
输入以下内容，注意自己下载的pkg-config路径版本
export PKG_CONFIG_PATH=/usr/local/Cellar/pkg-config/0.29.2_3
export PATH=$PKG_CONFIG_PATH/bin:$PAT
执行
source ~/.bash_profile
注意=号的左右不能有空格，否则会报错
/Users/XXXXX/.bash_profile:7: bad assignment
重新create-react-app my-app
此时注意，如果原来的路径里有my-app这个项目，记得删除。反正也不能用，删就删了。
这个时候令人心里一颤的错误又出现了，整体风格和上面贴的那串错误差不多，少的包是pixman
继续
brew install pixman
安装成功后再次循环，报错如故，核心内容是
npm ERR! No package 'cairo' found
继续
brew install cairo
经过更加漫长的等待，安装完成后会看到Python3.9，也不知道为什么会扯到Python。。。
安装cairo不要用阿里的源，会报一个地址404错误导致下载失败，查了一下从4月份就有这个问题了一直没解决。brew本来源没有问题，缺点是太慢。
半个多小时之后，再一次create-react-app my-app，还是报错
npm ERR! No package 'pangocairo' found
这题我会，brew install pangocairo
报错
==> Searching for similarly named formulae...
Error: No similarly named formulae found.
Error: No available formula or cask with the name "pangocairo".
==> Searching for a previously deleted formula (in the last month)...
Error: No previously deleted formula found.
==> Searching taps on GitHub...
Error: No formulae found in taps.
查无此人？百度告知命令应该是
brew install pango
此时可把源换成阿里，速度要快很多
然而create-react-app还是报错，这次的报错更加奇怪
npm ERR! code 1
npm ERR! path /Users/XXXX/Documents/ReactProject/my-app/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-gyp rebuild
npm ERR! SOLINK_MODULE(target) Release/canvas-postbuild.node
npm ERR! CXX(target) Release/obj.target/canvas/src/backend/Backend.o
npm ERR! CXX(target) Release/obj.target/canvas/src/backend/ImageBackend.o
npm ERR! CXX(target) Release/obj.target/canvas/src/backend/PdfBackend.o
npm ERR! ../src/backend/Backend.cc:111:10: warning: address of stack memory associated with local variable 'msg' returned [-Wreturn-stack-address]
npm ERR! return msg.c_str();
npm ERR! ^~~
npm ERR! 1 warning generated.
npm ERR! In file included from ../src/backend/PdfBackend.cc:1:
npm ERR! In file included from ../src/backend/PdfBackend.h:4:
npm ERR! ../src/backend/../closure.h:6:10: fatal error: 'jpeglib.h' file not found
npm ERR! #include
npm ERR! ^~~~~~~~~~~
npm ERR! 1 error generated.
npm ERR! make: *** [Release/obj.target/canvas/src/backend/PdfBackend.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack at ChildProcess.onExit (/Users/XXX/Documents/ReactProject/my-app/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:327:20)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:277:12)
npm ERR! gyp ERR! System Darwin 19.6.0
npm ERR! gyp ERR! command "/Users/XXX/.nvm/versions/node/v15.1.0/bin/node" "/Users/XXX/Documents/ReactProject/my-app/node_modules/.bin/node-gyp" "rebuild"
npm ERR! gyp ERR! cwd /Users/XXX/Documents/ReactProject/my-app/node_modules/canvas
npm ERR! gyp ERR! node -v v15.1.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/XXX/.npm/_logs/2020-11-08T11_59_09_842Z-debug.log
#nvm
终于在GitHub上找到了类似的报错，地址为
https://github.com/Automattic/node-canvas/issues/1580
一位大佬的回答，居然是降版本
sudo npm install n -g
n 12.13.1
npm i canvas --save
鉴于我没有装n，直接用nvm安装的node 12.13.1
nvm install 12.13.1
nvm use 12.13.1 // 临时修改node版本，只在当前终端生效
// 或者 nvm alias default 12.13.1 全局修改node版本，重启终端生效
node -v
实验命令npm I canvas，报了一个警告（虽然不知道有没有什么问题）
node-pre-gyp WARN Using needle for node-pre-gyp https download
继续https://www.jianshu.com/p/0694587a1b0a
npm install -g node-gyp
sudo npm install bcrypt
npm rebuild
第不知道多少次重复这个命令
npx create-react-app my-app
在漫长与忐忑的等待之后终于大功告成
后来发现，有很多与到相同问题的人是在直接npm install canvas的时候出现的，仔细看我的报错信息，归根结底还是canvas的错误导致的这一系列问题，所以我后来的实验命令就改成了npm i canvas。但记录这一问题的博客时间也都比较早，不知道为什么现在又出现了。归根结底，遇到的这些麻烦可能是安装node版本太新的缘故，也许这些操作中有很多是多余的。为了这个问题耗费了一个周末的时间，期间重装了一次macOS系统，因为我之前的pip和conda居然失效了。