Vite打包zip並改名為md5sum雜湊案例

天渺工作室發表於2024-09-17
Vite

通常在DevOps CICD流水線部署前端專案時，一般預設都要將dist資源打包為zip，並且把zip名稱改為md5sum雜湊值(用於檔案完整性驗證)。

md5sum是什麼？

md5sum 是一個在 Unix 和類 Unix 系統（如 Linux）中廣泛使用的命令列工具，它主要用於計算和驗證檔案的 MD5 雜湊值。MD5（Message-Digest Algorithm 5）是一種廣泛使用的加密雜湊函式，可以產生一個128位（16位元組）的雜湊值（通常以一個32位的十六進位制數表示）。md5sum 工具的主要用途包括：

  1. 檔案完整性驗證：透過計算檔案的 MD5 雜湊值，可以驗證檔案在傳輸或儲存過程中是否被篡改。如果檔案的 MD5 雜湊值在傳輸前後一致，那麼可以認為檔案在傳輸過程中未被更改。
  2. 軟體分發：在軟體分發過程中，開發者會提供軟體的 MD5 雜湊值。使用者下載軟體後，可以使用 md5sum 計算下載檔案的 MD5 雜湊值，並與開發者提供的雜湊值進行比較，以確保下載的軟體包完整且未被篡改。
  3. 備份驗證：在備份檔案或目錄時，使用 md5sum 可以為每個備份檔案生成一個 MD5 雜湊值，並儲存這些雜湊值。之後，可以透過重新計算備份檔案的 MD5 雜湊值來驗證備份的完整性和一致性。
  4. 資料去重：雖然這不是 md5sum 的主要用途，但由於 MD5 雜湊值對於相同的輸入總是產生相同的輸出，因此可以用於快速檢測資料集中的重複項。然而，由於 MD5 的安全性問題（如存在碰撞攻擊），這種方法在需要高度安全性的場合並不適用。
  5. 簡單加密：雖然 MD5 並不適合用於加密（因為它是一個單向雜湊函式，無法從雜湊值恢復原始資料），但在某些簡單場景下，MD5 雜湊值可以用於生成一種簡單的“密碼”或校驗碼，儘管這種方式的安全性較低。

Vite對應程式碼簡單案例：

1,我們使用vite-plugin-zip-pack和crypto外掛

npm i vite-plugin-zip-pack -D

npm i crypto -D

2,Vite配置程式碼

// vite.config.ts
import fs from "fs";
import path from "path";
import crypto from "crypto";

export default defineConfig({
    plugins: [
        //...
        zipPack({
            inDir: "dist",
            outDir: "zip/", // zip存放路徑
            outFileName: "dist.zip", // 預設名稱為dist
            done: () => {
                // zip路徑
                const originPath = "zip/";
                const originFilePath = `${originPath}dist.zip`;
                // 讀取zip內容
                const fileContents = fs.readFileSync(originFilePath);
                // 建立雜湊物件
                const hash = crypto.createHash("md5");
                // 更新雜湊值
                hash.update(fileContents);
                // 計算雜湊值，並以16進編碼制輸出md5sum
                const md5sum = hash.digest("hex");
                // 獲取副檔名
                const fileExtension = path.extname(originFilePath);
                // 拼接md5新的檔名
                const newFileName = `${originPath}${md5sum}${fileExtension}`;
                fs.rename(originFilePath, newFileName, (err) => {
                    if (err) throw err;
                    console.log("檔案已重新命名");
                    // 需要刪除舊包 就加上這句邏輯。不用的話 那就不加了
                    fs.readdir(originPath, (error, files) => {
                        if (error) throw error;
                        (files || []).forEach((element) => {
                            if (element !== path.basename(newFileName)) {
                                // 刪除舊zip
                                fs.unlink(
                                    path.join(originPath, element),
                                    (unlinkErr) => {
                                        if (unlinkErr) throw unlinkErr;
                                        console.log(element + "舊包已刪除");
                                    },
                                );
                            }
                        });
                    });
                });
            },
        }),
    ],
});

相關文章