打包後順便壓縮一下吧，使用 Node.js 自動產生壓縮檔

use-nodejs-to-automatically-generate-the-compressed-file

有些案子需要打包、壓縮後交付，雖然壓縮也只是簡單按一下，但是一直重複就不簡單了。(˘･_･˘)

讓我們使用腳本自動產生壓縮檔，解放手動壓縮輪迴吧。♪(^∇^*)

檔案結構

第一步當然是先介紹一下檔案結構。

.
├─ dist              // 打包後的檔案
├─ scripts
│   └─ arch-dist.ts  // 產生壓縮檔的腳本
├─ package.json
└─ ...

安裝套件

搜尋了一下發現有個套件叫做 archiver，可以幫我們打包、壓縮檔案。

安裝 archiver：

npm i -D archiver @types/archiver

來寫程式吧！( •̀ ω •́ )✧

scripts\arch-dist.ts

import { name } from '../package.json';

import fs from 'fs';
import archiver from 'archiver';

const fileName = `${name}.zip`;

const output = fs.createWriteStream(`./${fileName}`);
const archive = archiver('zip', {
  zlib: { level: 9 }
});

output.on('close', function () {
  console.log(`zip 壓縮完成 : `, fileName);
});

archive.on('error', function (err) {
  throw err;
});

/** 將資料傳輸至 output */
archive.pipe(output);
/** 指定要加入的目錄，第二參數為 false，表示不要將自己加入 */
archive.directory('./dist', false);
archive.finalize();

程式碼就這麼簡單，非常的樸實無華。(´・ω・`)


鱈魚：「現在我們來執行腳本吧！」

路人：「Node.js 又不能直接跑 TypeScript。(⊙_⊙)？」

鱈魚：「沒錯，所以讓我們來編譯吧。(≧∇≦)ﾉ」

路人：（直接離場）


先別走啊！開玩笑的啦，我才不會這樣自找麻煩。(´,,•ω•,,)

可以利用 vite-node 直接執行 TypeScript 腳本。

vite-node 就是 Vitest 與 Nuxt 3 Dev SSR 底層使用的工具，可以讓我們無痛執行 TypeScript。

甚麼？你說 ts-node？那個實在太難用，我們還是用 vite-node 吧。(´・ω・`)

現在讓我們新增腳本。

package.json

{
  "scripts": {
    "build": "vite build && npm run build:arch",
    "build:arch": "npx vite-node scripts/arch-dist.ts",
  },
}
使用 npx 就不需要先安裝 vite-node 了，不知道的朋友可以看看這裡

這樣就可以在 build 後，自動執行壓縮檔案的腳本了。

總結 🐟

  • archiver 套件可以幫我們打包、壓縮檔案
  • 使用 vite-node 可以無痛執行 TypeScript 腳本

終於不用一直手動壓縮惹。(。・ω・。)

目錄