首發(fā)掘金：https://juejin.im/post/5c85b08ae51d453a476237de

electron小細節(jié)

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

"scripts": {
    "start": "chcp 65001 && electron ."
  },

Electron不支持prompt的替代方案

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

chromium在electron下會異常崩潰退出

• 描述：發(fā)現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 可執(zhí)行文件

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

在封裝成可執(zhí)行的exe文件時候，遇到了一些問題，如下：

• 如何配置package.json文件，使其能夠自動化打包？
• node_modules依賴找不到
• openssl可執(zhí)行路徑出錯
• 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": "自動創(chuàng)建開發(fā)者證書、下載開發(fā)者證書和描述文件，轉成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可執(zhí)行路徑出錯

打包后找不到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
});

文件存放路徑問題

不能寫入項目文件，只能讀取文件，可存放到系統(tǒng)臨時目錄，如下

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