electron+puppeteer 封裝成exe可執行檔案

RikaXia發表於2019-03-11
封裝

electron小細節

解決Electron命令列中文出現亂碼

"scripts": {
    "start": "chcp 65001 && electron ."
  },
複製程式碼

Electron不支援prompt的替代方案

  • 使用開源庫：smalltalk
  • 手寫彈窗樣式

chromium在electron下會異常崩潰退出

  • 描述：發現electron與木偶人有點水土不服，沒有封裝成electron之前是可以順利執行程式，加上electron之後，需要修改的地方有點多，甚至報錯，執行下不去。
  • 解決：去掉頁面等待
// 等待頁面載入出來
await page.waitForNavigation({
    waitUntil: 'load'
});
複製程式碼

調整頁面預設等待時間

  • 描述：imeoutError: Navigation Timeout Exceeded: 30000ms exceeded
  • 解決：禁用預設超時
// 開啟瀏覽器
browser = await puppeteer.launch({
	headless: false,
	timeout: 0
});

page.setDefaultNavigationTimeout(0);
複製程式碼

Electron 將網頁打包成 exe 可執行檔案

在electron的構建體系中，打包這個概念特別的容易混淆。這裡有很多種結果都是可以說是打包，但是打包的程度是完全不同的，這也就決定了不同的打包場景。本文中，asar這個打包，是個最最最最最小的打包概念，而且這個包，僅僅是對resource/app目錄的封裝，讓人們不是那麼容易看到你寫的程式碼結果而已。

在封裝成可執行的exe檔案時候，遇到了一些問題，如下：

  • 如何配置package.json檔案，使其能夠自動化打包？
  • node_modules依賴找不到
  • openssl可執行路徑出錯
  • puppeteer 找不到瀏覽器路徑
  • 檔案存放路徑問題
  • 如何打包或者解壓asar檔案？

如何配置package.json檔案，使其能夠自動化打包？

配置package.json，核心命令為：

"scripts"：{
    "package": "electron-packager ./ AutoCer --platform=win32  --arch=x64 --icon=./tool.ico --out=./dist --electron-version=4.0.6 --overwrite"
}
複製程式碼
  • ./：打包當前目錄所有內容
  • --out=./dist：將打包內容輸出到當前目錄的dist資料夾
  • AutoCer：你打包後應用的名稱
  • --icon：你打包後應用的圖示
  • --electron-version：這個版本填寫你自己對應的版本，否則會報錯，找不到對應版本
  • --overwrite：每次打包強制覆蓋輸出

package.json完整配置如下：

{
  "name": "autoCer",
  "version": "1.0.0",
  "description": "自動建立開發者證書、下載開發者證書和描述檔案，轉成p12檔案",
  "main": "main.js",
  "scripts": {
    "start": "chcp 65001 && electron .",
    "package": "electron-packager ./ AutoCer --platform=win32  --arch=x64 --icon=./tool.ico --out=./dist --app-version=1.0.0 --overwrite"
  },
  "keywords": [
    "Electron",
    "quick",
    "start",
    "p12",
    "crs"
  ],
  "author": "",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^4.0.6",
    "electron-packager": "^13.1.1"
  },
  "dependencies": {
    "chalk": "^2.4.2",
    "commander": "^2.19.0",
    "fs-extra": "^7.0.1",
    "open-file-explorer": "^1.0.2",
    "plist": "^3.0.1",
    "puppeteer": "^1.11.0"
  }
}

複製程式碼

node_modules依賴找不到？

為什麼在沒有打包前一切執行正常，打包後就會報找不到node_modules中一些第三方資源的路徑，原來是在配置package.json的時候出現了問題，應當把需要依賴第三方資源的從devDependencies調整到dependencies，而又不想把electron、electron-packager打包進應用，則留在devDependencies中即可，配置如下：

package.json：

"devDependencies": {
    "electron": "^4.0.6",
    "electron-packager": "^13.1.1"
},
"dependencies": {
    "chalk": "^2.4.2",
    "commander": "^2.19.0",
    "fs-extra": "^7.0.1",
    "open-file-explorer": "^1.0.2",
    "plist": "^3.0.1",
    "puppeteer": "^1.11.0"
}
複製程式碼

配置package.json後，進入專案目錄，執行npm run package 即可。

openssl可執行路徑出錯

打包後找不到openssl的路徑，導致失敗，所以這裡需要使用openssl的絕對路徑，可將OpenSSL-Win32資料夾手動移動到打完包之後的目錄下，和resources同級即可，最後修改一下OpenSSL-Win32所在的位置，如下：

let openssl = path.join(__dirname, "..", ".."，"..","OpenSSL-Win32", "bin", "openssl.exe");
複製程式碼

puppeteer 找不到瀏覽器路徑

打包後找不到chrome.exe路徑，導致瀏覽器啟動失敗，這裡將node_modules中puppeteer包裡面的.local-chromium整個資料夾手動剪下到打完包之後的目錄下，和resources同級即可，最後修改一下executablePath指定Chromium的位置，如下：


let ChromiumPath = path.join(__dirname, "..", ".."，"..",".local-chromium", "win64-624492", "chrome-win","chrome.exe");

// 開啟瀏覽器
const browser = await puppeteer.launch({
	headless: false,
	timeout: 0，
	executablePath：ChromiumPath
});
複製程式碼

檔案存放路徑問題

不能寫入專案檔案，只能讀取檔案，可存放到系統臨時目錄，如下

const os = require('os');
let tempDir = path.join(os.tmpdir(), "AutoCerTemp");
複製程式碼

如何打包或者解壓asar檔案

當執行npm run package 之後，在專案當前目錄下會輸出dist/AutoCer-win32-x64等打包後的工程，此時我們進入dist/AutoCer-win32-x64/resources，會看到兩個檔案，一個是app資料夾，一個是 electron.asar檔案，此刻我們需要進行最後一步，就是將app檔案打包成asar，在當前目錄下執行以下命令：

打包 asar 命令：

asar p app app.asar
asar pack app app.asar
複製程式碼

打完asar包之後，可以去點選AutoCer.exe啟動你的專案了。

如果你想看下asar裡面是什麼內容，可以使用解壓命令。

asar e app.asar app
asar extract app.asar app
複製程式碼

相關文章