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
复制代码