此次事件的开端是由安装新依赖:
imagemin-pngquant
上面依赖基于:
pngquant-bin
然后又搞出了个:
libpng-dev
最后拖家带口出:
windows-build-tools
MD,全家都是沙雕玩意...
这一系列连锁反应牵引而出,经过一般苦战,算是摸清了这全家桶的安装模式流程及各个相关依赖的安装方式,同时这个问题可能仅出现在Window环境的兄弟们,其他的平台要是同样亦出现该情况,可以尝试按照本文的解决方案来走下试试...
别的不说,开捶!
先上个图:
看到这个一串红的人都傻了... 不过,别慌,先来看一串错误:
Error: pngquant failed to build, make sure that libpng-dev is installed
at Promise.all.then.arr (W:\WorkSpace\WxApp\WePY\Auditor\node_modules\bin-build\node_modules\execa\index.js:231:11)
at process._tickCallback (internal/process/next_tick.js:68:7)
这里一段可以看出当前'pngquant'依赖并非无法安装,而是缺少一个叫'libpng-dev'的东西来构建安装'pngquant',所以导致安装程序执行抛出了红色...
那么这个 libpng-dev 又是啥玩意呢?他该怎么安装呢?
首先:
1、libpng-dev:它是图片压缩工具pngquant这个依赖包必备的一个基础二进制可执行程序.exe文件,用来构建成pngquant依赖包的,通常开发及普通都基本用不上,但是不排除部分沙雕项目或者接盘过来的...咳咳,说远了,总之,它就是一个必备的基础依赖文件;
2、有人会说,那安装一下 libpng-dev 不就万事大吉了吗?那你看图:
怎么说?绝望么?压根就没有这个包给你下哦~
在经过一番折腾之后,查阅了些许资料,又被引导至一个叫 windows-build-tools 的东西上面去了,先看下相关资料的说明好吧?
相关资料查阅:
1、一次 node_modules 安装失败的排查之旅 (这个同仁他排查的问题点基本是在网络上面,而我的排查过程发现并不存在这方面的问题,文章里面他有详细写到,关于 pngquant-bin 这个依赖包一系列执行过程及同 libpng-dev 的底层连接源码剖析部分,而我缺失的也并不在这一块,但是所说的执行流程确实是这么个意思)
2、npm install is broken by pngquant-bin dependency #46(imagemin-pngquant GitHub官方的问题帖下有位外国友人贴出来说:看下图)
npm install imagemin-pngquant@5.0.1 --save
npm install pngquant-bin@3.1.1 --save```
(虽然但是,就不再浪费兄弟们的时间去试了,这个坑我帮在座的各位已经踩完了,压根就不是版本或者加了 pngquant-bin 这个依赖去安装的原因,至少对我这边来说绝不是...同时这几个:
①、issues #46
②、ReactJS: Pngquant failed to build, make sure that libpng-dev is installed
③、Error with npm update: pngquant binary does not seem to work correctly
他们在说的所有相关问题都不用再去浪费时间看了,都帮家人们试过了...o(╥﹏╥)o)
最后,我他喵终于发现了盲点:
1、解决 Windows 系统使用 NPM 时遇到的各种问题
2、pngquant failed to build, make sure that libpng-dev is installed 问题 以及
3、pngquant failed to build, make sure that libpng-dev is installed
这几篇文章后,发现一个叫 windows-build-tools 的东西要装,直接:
(切记!切记!切记!在此操作之前,检查一遍设备的代理‘VxN是否挂载、网络是否顺畅’,因为他可能会连接海外服务器,及下载几个G的文件)
npm install -g windows-build-tools
执行之后,终端显示出绿色的:
----------------------------- Python -----------------------------
Successfully installed Python 2.7/x.x
时,他就会卡在那里,但你先不要急着 Ctrl+C&Y,再等个一分钟,然后再 Ctrl+C&Y
此时按电脑Win键,你可能会看到:
没错!这就是到成功路上99.99%进度的标识啦~!
然后,回去再重新执行:
npm i imagemin-pngquant
开饭,上菜!
其实有人会发现,这个中间人 libpng-dev 同样也装好了?
是的没错!在执行 npm install -g windows-build-tools 时,一并给安装上了,并且 libpng-dev 依赖所需的构建/执行支持就是 windows-build-tools 这个鬼东西提供,也就是说,这里面 pngquant-bin 也好、imagemin-pngquant 也罢,大多数的问题点,都基本浮动该依赖的基础上,所以把这个安装好了,其相关的也能好装很多~
PS:个人建议文中的几个依赖
1、imagemin-pngquant
2、pngquant-bin
3、libpng-dev
全部给扔进.gitignore忽略列表去(但这样子做是真的很鸡肋~最好的做法还是少用这几个玩意为妙,至此也是:听我说,谢谢你,因为有你,wepy),避免全员踩坑!