electron+puppeteer 封裝成exe可執行文件

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
複製代碼