場景

同一套代碼，需要打包出N個客户端，主題色，logo，應用名都不同。

具體流程

1. Linux 系統部署electron_wine的docker

electron-builder 默認情況下，windows的應用程序只能在windows去打包。如果想要在linux 環境下打包出運行於windows的應用程序，需要依賴 wine 。

electron-builder 官方有提供出 wine 的 docker 鏡像

1.1 linux 安裝 docker

這些步驟也適用於其他 Linux作系統，安裝命令可能有所不同。

dnf install -y yum-utils device-mapper-persistent-data lvm2

dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

dnf install docker-ce docker-ce-cli containerd.io

1.2 安裝 electronuserland/builder:wine 鏡像

由於不知道哪個數據源有 electronuserland/builder:wine 鏡像 所以就一股腦懟進去

// 配置數據源
vim /etc/docker/daemon.json
{
    "registry-mirrors": [
        "https://docker.registry.cyou",
        "https://docker-cf.registry.cyou",
        "https://dockercf.jsdelivr.fyi",
        "https://docker.jsdelivr.fyi",
        "https://dockertest.jsdelivr.fyi",
        "https://mirror.aliyuncs.com",
        "https://dockerproxy.com",
        "https://mirror.baidubce.com",
        "https://docker.m.daocloud.io",
        "https://docker.nju.edu.cn",
        "https://docker.mirrors.sjtug.sjtu.edu.cn",
        "https://docker.mirrors.ustc.edu.cn",
        "https://mirror.iscas.ac.cn",
        "https://docker.rainbond.cc"
    ]
}
// 拉取 docker 鏡像
docker pull electronuserland/builder:wine

1.3 linux 系統，工作目錄下安裝打包electron打包需要的依賴

1.3.1. 安裝 nodejs （具體安裝流程問AI）

1.3.2. 安裝各種依賴

// asar 用於解壓安裝包進行源碼修改
npm install asar  -D
// rcedit用於修改.exe文件ico，productName
npm install rcedit -D
// sharp 用於修改logo尺寸
npm install sharp -D
// png-to-ico 用於將PNG轉ICO
npm install png-to-ico -D
// electron、electron-builder
npm install electron electron-builder -D

2. windows 應用母包準備

在 window 打包時，只打包出來免安裝包（win-unpacked）作為一個母包

npm run && electron-vite build --mode=production && electron-builder --dir

3. 替換應用資源（自定義主題色，logo，應用名...）

3.1 將 win-unpacked 上傳到 linux

3.2 提取 win-unpacked/resources/app.asar 並替換資源

// 提取app.asar
asar e app.asar app


// 替換源碼資源、主題色
...


// 無法確定資源的logo資源是否符合規定，使用sharp，png-to-ico 將圖片轉256x256的ico
sharp(imgPath).resize(256, 256).png({ compressionLevel: 9 }).toFile(pngToPath);
// 轉換為 ICO 文件
const icoBuffer = await pngToIco(pngToPath);
// 保存 ICO 文件
await fs.promises.writeFile(icoToPath, icoBuffer);


// 使用rcedit修改應用的icon與名稱
node_modules/rcedit/bin/rcedit.exe win-unpacked/appName.exe --set-icon "icoPath"
node_modules/rcedit/bin/rcedit.exe --set-version-string "oldProductName" "newProductName"


// 資源替換完成，重新壓縮app.asar
app p app app.asar

4. 啓動 docker

docker run -d --name electron_wine -ti \
--env-file <(env | grep -iE 'DEBUG|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS_TAG|TRAVIS|TRAVIS_REPO_|TRAVIS_BUILD_|TRAVIS_BRANCH|TRAVIS_PULL_REQUEST_|APPVEYOR_|CSC_|GH_|GITHUB_|BT_|AWS_|STRIP|BUILD_') \
--env ELECTRON_CACHE="/root/.cache/electron" \
--env ELECTRON_BUILDER_CACHE="/root/.cache/electron-builder" \
-v {打包工作目錄}:/project \
-v ${PWD##*/}-node-modules:/project/node_modules \
-v ~/.cache/electron:/root/.cache/electron \
-v ~/.cache/electron-builder:/root/.cache/electron-builder \
electronuserland/builder:wine

進入 docker 並執行

docker exec -i electron_wine npx electron-builder build --prepackaged=win-unpacked --win --config electron-builder.config.js

至此，已完成在 linux 系統打包出 windows 的 exe 文件。

待解決問題

1. 這樣打出來的 exe 應用是沒有簽名，在電腦上運行會提示未知風險。大佬們有在 linux 對 .exe 文件進行簽名的方案嗎？

2. 這樣解壓 app.asar 文件進行替換資源的方案貌似有點不安全。大佬們有更優的解決方案還望指點一二。