Electron-桌面 App-螢幕遮罩(Screen mask) - 6

前言
公司最近配的一台螢幕，沒辦法調整亮度，亮得要命，眼睛要瞎掉了
所以只好自立自強搞一個螢幕遮罩

本章節內容
打包成.exe

第一步：安裝打包工具

在終端機執行以下指令，將 electron-builder 加入開發依賴：

npm install electron-builder --save-dev

第二步：配置 package.json

{
  "name": "screen-mask",
  "version": "1.0.0",
  "main": "src/main.js",
  "scripts": {
    "build:css": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --minify",
    "watch:css": "npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch",
    "start": "npm run build:css && electron .",
    "dev": "npm run build:css && (npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch & electron .)",
    "pack": "npm run build:css && electron-builder --win --x64"
  },
  "build": {
    "appId": "com.my.app",
    "productName": "螢幕遮罩工具",
    "directories": {
      "output": "dist"
    },
    "win": {
      "target": ["nsis", "portable"],
      "icon": "src/assets/icon.ico"
    },
    "files": ["src/**/*", "package.json", "!src/input.css"]
  }
}

第三步：生成 icon.ico

1. 可以隨便找一張圖，上網找圖片轉.ico 的網站
   生成 256 x 256 的 .ico 檔
2. 放至 src/asset 底下
   前一章節的 icon 圖檔也可以放置這個路徑下但是 main.js 要記得改一下

   // src/main.js
   const icon = nativeImage.createFromPath(
     path.join(__dirname, 'assets/icon.png') // 👈 這裡要改
   )

第四步：打包

⚠️ 以 系統管理員身分 於專案根目錄執行指令

npm run pack

• 如果不是以 系統管理員身分 執行，很可能打包失敗

  errorOut=ERROR: Cannot create symbolic link : �Τ��ݨS���o���S���v���C

  這個錯誤訊息中的亂碼，翻譯過來其實是：「ERROR: Cannot create symbolic link : 用戶不具備適當的權限。」
  這是因為 electron-builder 在打包過程中需要建立「符號連結」（Symbolic Links），而 Windows 系統基於安全性考量，預設不允許一般權限的開發者建立連結。

✅ 完成後會於根目錄下生成 dist 資料夾：

dist/
├── win-unpacked/                 # 免安裝的解壓縮版本（包含所有執行檔與資源）
│   └── ...
├── 螢幕遮罩工具 1.0.0.exe         # 免安裝的可執行檔 (Portable)
├── 螢幕遮罩工具 Setup 1.0.0.exe   # 軟體安裝程式 (Installer)
├── 螢幕遮罩工具 Setup 1.0.0.exe.blockmap # 用於自動更新的區塊映射檔
├── latest.yml                    # 自動更新設定檔（記錄版本與雜湊值）
├── builder-debug.yml             # 封裝過程的除錯日誌
├── builder-effective-config.yaml # 最終生效的封裝設定檔
└── output.css                    # 編譯後的樣式檔案（通常是前端資源）

• win-unpacked/: 這是軟體的「本體」。如果你想快速測試功能而不進行安裝，直接進去執行裡面的 .exe 即可。
• Setup 1.0.0.exe: 這是你要分發給使用者的安裝檔，它會負責將軟體安裝到使用者的 AppData 目錄並建立捷徑。
• latest.yml: 這非常重要。如果你有設定 Auto-update，Electron Updater 會比對這個檔案來決定是否需要下載新版本。
• blockmap: 這是為了節省頻寬用的。當使用者更新軟體時，它能讓程式只下載有變動的部分，而不是重新下載整個安裝包。

📚 額外筆記

"nsis", "portable" 差異

package.json 配置

{
  ...
  "build": {
    ...
    "win": {
      "target": ["nsis", "portable"],
      "icon": "src/assets/icon.ico"
    },
    ...
  }
  ...
}

這兩個選項決定了你打包出來的 .exe 會以什麼 形式 交給使用者。
簡單來說，一個是「需要安裝的」，一個是「點開即用的」。

1. nsis (安裝程式)
這是 Windows 上最常見的安裝方式（類似你下載 Chrome 或 LINE 後執行的安裝檔）。

• 行為： 使用者執行 .exe 後，會跳出安裝畫面（授權協議、選擇安裝路徑、進度條），最後將程式安裝到電腦的 C:\Program Files 或 AppData 中。
• 優點：
  會在開始功能表和桌面建立快捷方式。會在「控制台」的「新增或移除程式」中出現，方便使用者解除安裝。適合正式發佈、長期使用的應用程式。

2. portable (免安裝便攜版)
這會產生一個單一的 .exe 檔案，使用者不需要安裝。

• 行為： 點兩下直接開啟程式。它不會把檔案複製到系統資料夾，也不會建立快捷方式。
• 優點：
  方便分享： 可以直接丟在隨身碟或是雲端，點開就能用。
• • 乾淨： 不會在系統留下安裝紀錄，刪除該檔案就等於移除程式。
  • 缺點： 每次啟動可能會稍微慢一點點（因為它需要先解壓到暫存空間），且使用者不容易在開始功能表找到它。

進階小知識：NSIS 設定
如果你想讓安裝過程更專業，可以在 build 裡面加入 nsis 的細節設定：

"nsis": {
  "oneClick": false,          // 取消一鍵安裝，讓使用者可以選路徑
  "allowToChangeInstallationDirectory": true,
  "createDesktopShortcut": true,
  "installerIcon": "build/icon.ico",
  "uninstallerIcon": "build/icon.ico"
}