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
手動壓縮圖片