Gatsby新建项目/安装依赖时pngquant编译失败问题求助

先对应你遇到的错误信息，方便精准排查：

⚠ write EPROTO 4403060160:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:332:
⚠ pngquant pre-build test failed
ℹ compiling from source
✖ Error: pngquant failed to build, make sure that libpng is installed
at /Users/path_to_project/node_modules/bin-build/node_modules/execa/index.js:231:11
at runMicrotasks ()

我之前在macOS上碰到过一模一样的问题，结合自己的排查经验和社区方案，给你几个靠谱的解决方向：

1. 先搞定SSL代理干扰问题 #

错误里的ssl3_get_record:wrong version number几乎都是代理配置搞的鬼——不管是全局VPN、代理工具，还是npm/yarn本身的代理设置，都可能导致SSL握手失败。

• 先关闭所有正在运行的代理工具（比如Charles、Clash这类），再重新执行gatsby new或者yarn install试试。
• 如果还是不行，手动清空npm和yarn的代理配置：

  npm config delete proxy
  npm config delete https-proxy
  yarn config delete proxy
  yarn config delete https-proxy
  

  执行完这些命令后，再重新尝试安装操作。

2. 让编译工具正确识别已安装的libpng #

你已经装了libpng，但pngquant编译时还是找不到，大概率是路径识别问题，或者需要强制使用系统libpng：

• 先用Homebrew重新安装libpng，确保它是最新且正确配置的：

  brew reinstall libpng
  

• 然后设置环境变量，让pngquant编译时使用系统安装的libpng：

  export PNGQUANT_USE_SYSTEM_LIBPNG=true
  # 之后执行安装命令
  yarn install
  # 或者用npm的话
  npm install
  

• 如果还是不行，彻底清除缓存后重新安装：

  # 清除npm/yarn缓存
  npm cache clean --force
  yarn cache clean
  # 删除旧的依赖文件和锁文件
  rm -rf node_modules package-lock.json yarn.lock
  # 重新安装
  yarn install
  

3. 备选：切换Node.js版本试试 #

虽然你的Node 12.18.1理论上兼容Gatsby 2.x，但有时候版本间的细微差异也会导致编译问题。可以用nvm切换到最新的LTS版本试试：

nvm install --lts
nvm use --lts
# 同样先清理旧依赖和缓存
rm -rf node_modules package-lock.json yarn.lock
yarn install

按照这个顺序排查，应该能解决你的问题。

内容的提问来源于stack exchange，提问作者Pavel Shevtsov