Electron笔记六：打包成可执行程序（.exe）

本人初学Electron，把学习的过程记录了下来，以免以后忘记：
Electron笔记一：安装
Electron笔记二：http与websock的实现
Electron笔记三：调用外部程序（子进程管理）
Electron笔记四：Dll的调用
Electron笔记五：无需控件，HTML5直接播放rtsp（摄像头）
Electron笔记六：打包成可执行程序（.exe）

1. 安装electron-packager

   npm install electron-packager  --save-dev

2.打包命令

基本命令：
   electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

命令说明：
   sourcedir：项目源文件所在路径（唯一的必须参数）
   appname：项目名称（直接使用package.json文件中的name属性更方便）
   platform：要构建哪个平台的应用（Windows、Mac 还是 Linux）
   arch：决定了使用 x86 （ia32）还是 x64（x64），还是两个架构都用
   optional options：可选选项

举例说明： 
   electron-packager ./ demoapp --win --arch=x64 --out ../outputs 

本项目实际应用：如果每次打包都输入就太麻烦了，可以简化命令，做一个快捷方式，在package.json中，多加一个"build"项

"scripts": {
    "start": "chcp 65001 && electron main.js",
    "build": "electron-packager ./ demoapp --win --arch=x64 --out ../outputs --electron-zip-dir=../electron-zip --icon=logo.ico --overwrite --extra-resource=./resources/bin/"
  },

以后只需要在cmd中直接输入npm run build即可打包了。

其中
    --icon是图标，我们放一个logo.ico在根目录中
    --overwrite :如果已打过包，就覆盖
    --electron-zip-dir  :为防止每次打包都下载Electron，可先把下载好包 electron-v13.1.7-win32-x64.zip放到\electron-zip中，electron离线下载包
    --extra-resource : ./resources/bin/ 额外的资源包，打包后文件的文件都会在\outputs\demoapp-win32-x64\resources\app中，exe文件在根目录中，则直接运行就找不到csdtk.dll文件和ffmpeg.exe，这时只需要把resources\app\resources\bin拷贝到resources\bin中，需加入"win": 
"extraResources": [  {    "from": "./resources/bin",   "to": "./bin"  }就可实现此功能。

代码如下：

  "devDependencies": {
    "electron": "^13.1.7",
    "electron-packager": "^15.3.0"
  },
  "dependencies": {
    "child_process": "^1.0.2",
    "ffi-napi": "^4.0.3",
    "fluent-ffmpeg": "^2.1.2",
    "http-server": "^0.12.3",
    "iconv-lite": "^0.6.3",
    "ref-array-di": "^1.2.2",
    "ws": "^7.5.3"
  },
  "build": {
    "appId": "demoapp",
    "win": "./logo.ico",
    "extraResources": [
      {
        "from": "./resources/bin",
        "to": "./bin"
      }
    ]
  }

运行 npm run build 之后exe文件生成了

3.加密资源，打包代

可以看到，在每个包下的resources文件夹里的app文件夹 就是我们写的程序，这样我们的代码就是暴露在用户电脑上的，这非常的不安全，还好electron 自带了加密功能。
    安装 asar:   npm install -g asar
安装完成以后,就可以使用asar命令讲程序文件打包了，cmd进入resources\app\resources目录
   asar pack ./app app.asar

执行完毕以后，在./下可以看到app.asar文件，把他复制到./OutApp/mclans.../resources/下，然后把resources下的app文件夹删除，运行resources上层的.exe文件可以启动应用了。

运行demoapp.exe,一切都正常