image-webpack-loader安裝失敗怎麼破
highlight: agate theme: channing-cyan
我正在參加「掘金·啟航計劃」
前言
最近項目中使用到了image-webpack-loader
這個插件,在打包的時候對項目中的圖片資源進行壓縮,但是發現這個依賴包在安裝的時候真的是一波三折,經過一通搗鼓,發現了一些原因,這裏記錄一下歷程
先上答案
老規矩,寫文章習慣性先把最後的結論或者成果直接放到文章前面,如果不想了解具體內容的,只想解決問題的,就只看到答案即可了 1. 通過cnpm安裝 2. 給raw.githubusercontent.com這個地址配置host,教程 3. 手動壓縮圖片
一、導圖梳理
二、問題分析:
問題點:
package.json如下
js
{
"name": "pc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"image-webpack-loader": "^8.1.0"
}
}
npm install 安裝依賴
出現以下報錯
``` shell
[email protected] postinstall D:\wjr_project\package-demo\pc-yarn\node_modules\gifsicle node lib/install.js
getaddrinfo ENOENT raw.githubusercontent.com gifsicle pre-build test failed compiling from source Error: Command failed: C:\Windows\system32\cmd.exe /s /c "autoreconf -ivf" ``` 從報錯信息得到的信息點 1. 在安裝gifsicle這個依賴的時候,該依賴包會執行node lib/install.js 這個段腳本 2. raw.githubusercontent.com 這個地址連接失敗
既然是gifsicle這個包執行install.js這個腳本報錯了,我們先去看看這個包,看包的話先從packag-lock.json或者是yarn.lock依賴樹去查看包的依賴
找到對應的包後
- 直接在node_module 裏面看源碼查看install.js的問題
- 去github上找到這個並且查看issues查看有沒有人提類似的問題(有一定概率快速找到解決問題的辦法)
去github上找依賴包,不要直接去github上搜,因為該包名和在github上的倉庫名不一定是一致的,正確的方法應該是先去npm上搜包,然後從npm中裏面跳到對應的github倉庫
從圖上可以看到,這個包名叫gifsicle但是實際上對應的github倉庫是gifsicle-bin
在issues中能找到已經有人提到最終怎麼解決的(通過cnpm安裝),這裏找到了一種解決辦法
雖然找到了一種解決辦法,但是還沒找到問題導致的原因,我們繼續去排查包的代碼
繼續分析安裝報錯的點
```
[email protected] postinstall D:\wjr_project\package-demo\pc-yarn\node_modules\gifsicle node lib/install.js
getaddrinfo ENOENT raw.githubusercontent.com gifsicle pre-build test failed compiling from source Error: Command failed: C:\Windows\system32\cmd.exe /s /c "autoreconf -ivf" ``` 從上面看到安裝依賴的時候,安裝完後執行install.js這個文件,我們就去依賴包源碼裏面看到對應的代碼
install.js
```js
import process from 'node:process';
import {fileURLToPath} from 'node:url';
import binBuild from 'bin-build';
import bin from './index.js';
(async () => { try { await bin.run(['--version']); console.log('gifsicle pre-build test passed successfully'); } catch (error) { console.warn(error.message); console.warn('gifsicle pre-build test failed'); console.info('compiling from source');
const config = [
'./configure --disable-gifview --disable-gifdiff',
`--prefix="${bin.dest()}" --bindir="${bin.dest()}"`,
].join(' ');
try {
const source = fileURLToPath(new URL('../vendor/source/gifsicle-1.93.tar.gz', import.meta.url));
await binBuild.file(source, [
'autoreconf -ivf',
config,
'make install',
]);
console.log('gifsicle built successfully');
} catch (error) {
console.error(error.stack);
// eslint-disable-next-line unicorn/no-process-exit
process.exit(1);
}
}
})();
index.js
js
import fs from 'node:fs';
import process from 'node:process';
import {fileURLToPath} from 'node:url';
import BinWrapper from 'bin-wrapper';
const pkg = JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url)));
const url = http://raw.githubusercontent.com/imagemin/gifsicle-bin/v${pkg.version}/vendor/
;
const binWrapper = new BinWrapper()
.src(${url}macos/gifsicle
, 'darwin')
.src(${url}linux/x86/gifsicle
, 'linux', 'x86')
.src(${url}linux/x64/gifsicle
, 'linux', 'x64')
.src(${url}freebsd/x86/gifsicle
, 'freebsd', 'x86')
.src(${url}freebsd/x64/gifsicle
, 'freebsd', 'x64')
.src(${url}win/x86/gifsicle.exe
, 'win32', 'x86')
.src(${url}win/x64/gifsicle.exe
, 'win32', 'x64')
.dest(fileURLToPath(new URL('../vendor', import.meta.url)))
.use(process.platform === 'win32' ? 'gifsicle.exe' : 'gifsicle');
export default binWrapper; ```
會動態從raw.githubusercontent.com這個地址裏面拉取一些文件,由於拉取不下來,導致無法安裝,後來百度了一下raw.githubusercontent.com這個地址,是被牆的一個地址,我們本地無法連接,這也就是為什麼npm或者yarn直接通過淘寶鏡像安裝依賴也無法安裝成功的原因,因為安裝依賴的時候使用鏡像,只對安裝依賴加速有作用,包裏面代碼的動態從指定地址raw.githubusercontent.com拉取文件是無法起到鏡像作用的
既然是因為raw.githubusercontent.com無法連接,科普了一下需要配置host即可訪問,在ipaddress.com查到ip地址,配置host即可訪問,也可以成功安裝依賴了
這裏就是第二種解決辦法
三、最終解決方案
使用image-webpack-loader這個插件的目的,本就是為了在打包的時候壓縮圖片,減少包體大小,那麼結合上面的問題分析,得到的最終解決方案有三種
- 通過cnpm安裝
- 給raw.githubusercontent.com這個地址配置host
- 手動壓縮圖片