Electron打包成win安装包并创建桌面快捷方式

野性酷女 2022-05-20 05:11 679阅读 0赞

一开始打包通过electron-packager，可以将electron应用打包成可执行exe，虽然可以实现桌面端应用，但是没有安装包而且没有在桌面创建快捷方式总是显得不是很正规，于是查询了下官网，果然有安装程序，下面就一点一点开始实现需求  
附上项目地址[项目地址][Link 1]  
首先我们需要将我们的程序打包  
这里我们使用electron-packager

npm install electron-packager --save-dev

package.json 配置 scripts 命令 packager

{
      "name": "electron-quick-start",
      "version": "1.0.0",
      "description": "A minimal Electron application",
      "main": "main.js",
      "scripts": { "start": "electron .", "packager": "electron-packager . electron-quick-start --overwrite --win=x32 --out ./HelloWorldApp --arch=x64 --app-version=1.0.0 --electron-version=2.0.0" },
      "repository": "https://github.com/electron/electron-quick-start",
      "keywords": [ "Electron", "quick", "start", "tutorial", "demo" ],
      "author": "GitHub",
      "license": "CC0-1.0",
      "devDependencies": { "electron": "^2.0.0", "electron-packager": "^12.1.0", "electron-winstaller": "^2.6.4" } }

electron-packager . electron-quick-start –win=x32 –out ./HelloWorldApp –arch=x64 –app-version=0.0.1 –electron-version=2.0.0  
electron-packager <路径(.代表根目录)> <可执行文件的文件名> –win=x32<系统> –out <打包成的文件夹名> –arch=x64 –app-version=0.0.1<应用版本> –electron-version=2.0.0<使用electron的版本>

执行`npm run packager` 就会在当前目录下生成一个HelloWorldApp文件夹里面可以找到可执行的exe文件，这样我们就先完成了第一步，将程序打包。

**第二步**将打包程序打包成安装程序  
我们需要安装`electron-winstaller`

npm install --save-dev electron-winstaller

github是这么描述的NPM module that builds Windows installers for Electron apps using Squirrel.  
使用Squirrel生成electron的window安装包

我们开始第二步的实现  
创建一个build.js

var electronInstaller = require('electron-winstaller');
    var path = require("path");
    
    resultPromise = electronInstaller.createWindowsInstaller({
        appDirectory: path.join('./HelloWorldApp/electron-quick-start-win32-x64'), //刚才生成打包文件的路径
        outputDirectory: path.join('./tmp/build/installer64'), //输出路径
        authors: 'qfy', // 作者名称
        exe: 'electron-quick-start.exe', //在appDirectory寻找exe的名字
        noMsi: true, //不需要mis![这里写图片描述](https://img-blog.csdn.net/20180712225817503?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjI2MTEz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
      });
    
    resultPromise.then(() => console.log("It worked!"), (e) => console.log(`No dice: ${e.message}`));

执行`node build.js`  
会在控制台打印出it worked 证明程序包打包成功，我们可以在tmp路径下找到setup.exe  
官网还有其他的配置属性，类似于程序名称，程序安装gif图，安装程序图标等[官网][Link 2]  
现在我们点击setup.exe安装完我们的程序后可以正常打开我们的程序但是在安装时没有安装快捷方式到桌面，所以我们为了方便用户体验，我们需要另一个npm包来帮助我们实现需求electron-squirrel-startup,该包功能强大，实现了很多接口方便自动更新，生命周期接口等，以后会慢慢介绍，这里仅仅简单的调用该包  
**第三步**

npm i electron-squirrel-startup --save

我们在main.js添加如下代码  
`if(require('electron-squirrel-startup')) return;`  
之后我们重新打包

npm run packager
    node build.js

执行完后点击setup.exe就可以看到桌面上生成了一个快捷方式  
![这里写图片描述][70]

[Link 1]: https://gitee.com/xiaofengfeng01/electron-packager-test
[Link 2]: https://github.com/electron/windows-installer
[70]: /images/20220520/0d6c1af8e0224a0eae917fd03e118646.png