---
url: /blog-ocean-world/use-nodejs-to-automatically-generate-the-compressed-file.md
description: 有些案子需要打包、壓縮後交付，雖然壓縮按一下很簡單，但是一直重複就不簡單了。讓我們使用腳本自動產生壓縮檔，不用再手動壓縮了。♪(^∇^*)
---

![use-nodejs-to-automatically-generate-the-compressed-file](/use-nodejs-to-automatically-generate-the-compressed-file.webp){.cover}

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

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

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

## 檔案結構

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

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

## 安裝套件

搜尋了一下發現有個套件叫做 [archiver](https://www.npmjs.com/package/archiver)，可以幫我們打包、壓縮檔案。

安裝 archiver：

```bash
npm i -D archiver @types/archiver
```

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

`scripts\arch-dist.ts`

```ts
import fs from 'node:fs'

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

const fileName = `${name}.zip`

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

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

archive.on('error', (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`

```json
{
  "scripts": {
    "build": "vite build && npm run build:arch",
    "build:arch": "npx vite-node scripts/arch-dist.ts"
  }
}
```

::: tip
使用 npx 就不需要先安裝 vite-node 了，不知道的朋友可以看看[這裡](https://hoyis-note.coderbridge.io/2021/07/20/npm-npx-%E5%B7%AE%E5%88%A5/)
:::

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

## 總結 🐟

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

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