Electron-quick-start、electron-packager和NSIS

三巧

已于 2023-02-02 17:16:46 修改

阅读量1.1k

点赞数

文章标签： electron git github windows

于 2023-01-25 18:52:40 首次发布

本文链接：https://blog.csdn.net/qq_39124701/article/details/128742702

版权

-1.electron-packager特点

electron-packager只能生成文件夹
所以它需要依靠市面上的安装包制作软件二次打包生成单独的exe或msi安装包文件
安装包制作软件可能是NSIS、Inno Setup、Actual Installer、CreateInstall，甚至是自解压
链接：安装包制作工具整理

0.准备

确保安装了git、nvm和VSCode
准备一个ico图标(在线生成、PS制作就行，不要折腾)

1.克隆Electron-quick-start

随意打开一个目录位置，右键空白处，点击Git Bash Here，输入以下命令克隆中文版本

git clone https://gitee.com/beibeibeibei/electron-quick-start-Chinese.git

或输入以下命令克隆Github原版

git clone https://github.com/electron/electron-quick-start

打开克隆下来的electron-quick-start-Chinese文件夹，Shift+右键空白处，点击在此处打开 Power Shell 窗口(S)，输入以下命令

cmd /c "set ELECTRON_MIRROR=https://repo.huaweicloud.com/electron/&& npm install"

2.启动试试

输入以下命令启动项目，启动成功。

npm start

在这里插入图片描述

3.制作软件图标

使用cloudconvert在线网站生成图标，图标文件放置在以下路径
.\electron-quick-start-Chinese\assets\app-icon\mac\b.icns
.\electron-quick-start-Chinese\assets\app-icon\win\b.ico

4.下载electron压缩包(替electron-packager提前下好，idm不是什么小npm能碰瓷的)

访问Github发行版页面下载electron-packager需要的electron压缩包
或者在electron压缩包阿里源下载
选择的版本应该和启动软件时显示的electron版本一致
本文章使用的版本是electron-v22.0.2-win32-x64.zip
将下载好的压缩包放置在以下路径
.\electron-quick-start-Chinese\assets\electron-download\electron-v22.0.2-win32-x64.zip

5.安装electron-packager

输入以下命令安装electron-packager

npm install --save-dev electron-packager

修改package.json文件添加script脚本
修改前(截取部分)

    "scripts": {
        "//f": "命令行运行 npm run start 来代替运行\"electron\"，还可以使用pre和post钩子功能",
        "start": "electron .",
    },

修改后(截取部分)

    "scripts": {
        "//f": "命令行运行 npm run start 来代替运行\"electron\"，还可以使用pre和post钩子功能",
        "start": "electron .",
        "package": "electron-packager . --overwrite --platform=win32 --out=out --icon=assets/app-icon/win/b.ico --electronZipDir=assets/electron-download/ --ignore=.github/* --ignore=.gitignore --ignore='README(_en|_zh)?.md' --ignore=assets/electron-download/* --ignore=package-lock.json"
    },

6.使用electron-packager打包

输入以下命令打包

npm run package

在这里插入图片描述
打包完成，位于以下路径
.\electron-quick-start-Chinese\out\electron-quick-start-Chinese-win32-x64

7.再用NSIS打包

7.0 最简单NSIS打包方法

软件文件夹用Bandizip压缩成zip，下载安装NSIS，使用NSIS的"Installer based on .ZIP file"功能读取zip，点击Generate即可。

7.1 访问NSIS官网下载NSIS安装包

访问NSIS首页或者访问NSIS的sourceforge下载页面下载NSIS
请添加图片描述
在这里插入图片描述

7.2 安装NSIS

在这里插入图片描述双击运行NSIS安装包
点击 Next >
请添加图片描述
点击 I Agree

点击 Next >

修改安装位置后，点击 Install，记录安装位置备用

很快安装完成，可以都取消勾选，点击 Finish。之后自动打开的NSIS主界面和chm格式的教程不需要，关闭即可。

7.3 配置VSCode，让VSCode可以编写NSIS脚本

打开VSCode，切换到扩展界面，搜索NSIS，选中NSIS扩展(作者：idleberg)并安装
在这里插入图片描述
或者访问vscode-nsis扩展网页链接点击 Install 按钮跳转 VSCode 安装
打开NSIS安装位置找到Makensis，例如这个路径：E:\Program Files (x86)\NSIS\makensis.exe
在VSCode中按步骤设置makensis，文件-首选项-设置，搜索Nsis>Compiler: Path To Makensis这项设置，将makensis.exe的完整路径填进去
在这里插入图片描述
再搜索Nsis>Compiler: Custom Arguments这项设置，添加两项，每项占一行
第一项-INPUTCHARSET
第二项UTF8
请添加图片描述

7.4 编写最小nsi脚本(可跳过)

打开NSIS安装位置找到Examples文件夹，例如这个路径：E:\Program Files (x86)\NSIS\Examples
找到最小的文件，example1.nsi
复制到桌面上，用VSCode编辑(不熟悉最好复制一份，1KB不占空间但是不小心删了却要重装)
脚本内容如下(核心代码未改动，只添加了中文注释)
(vscode-nsis扩展并不知道这个世界上有UTF8文件，Bad text encoding报错直接删除中文或者不用管就可以了，编译是可以过的)

; example1.nsi

; 这个脚本是最简单的NSIS脚本。
; 所有设置都是默认设置。
; 生成的安装程序只会询问程序的安装位置，然后把本脚本(也就是example1.nsi)放在里面。

; example2.nsi比本脚本(也就是example1.nsi)仅增加了一个功能，那就是添加卸载程序和开始菜单快捷方式。

;--------------------------------

; 安装程序的名称
Name "Example1"

; 要写入的文件(最终的生成结果)
OutFile "example1.exe"

; 请求Windows Vista及更高版本的应用程序权限
; 一些复杂的安装包在运行时可能需要管理员权限，而这里仅设置为user
RequestExecutionLevel user

; 生成Unicode安装程序
; 启用Unicode让界面显示全世界的语言，尤其是中文强烈依赖Unicode
; 除非代码质量差，不然Unicode只需设置为True即可(关闭后更返祖，可以理解为仅支持26个英文字母)
Unicode True

; 默认安装目录
InstallDir $DESKTOP\Example1

;--------------------------------

; Pages页面
; Page directory 安装目录选择页面
; Page instfiles 安装执行页面

Page directory
Page instfiles

;--------------------------------

; 要安装的东西
Section "" ;没有Page components 组件选择页面,名称不重要

  ; 设置安装目录的输出路径
  SetOutPath $INSTDIR
  
  ; 将文件放置在这里
  File example1.nsi
  
SectionEnd

7.5 编译最小nsi脚本(可跳过)

点击实心闪电图标编译脚本(Ctrl+Shift+B)，生成安装包试试
在这里插入图片描述
很快VSCode右下角弹出提示，编译成功！
点击Run按钮直接运行安装包，点击Reveal按钮打开安装包所在文件夹

运行生成的安装包，它可以正常运行，点击 Install 安装

点击 Close 关闭，桌面上出现了一个文件夹，安装包已经执行了安装动作。
在这里插入图片描述

根据脚本内容，安装目录中确实将自身复制进去了

7.6 编写example2.nsi

; example2.nsi
;
; 本脚本基于example1.nsi并增加了以下功能
;       1.记住目录
;       2.卸载功能
;       3.可选的开始菜单快捷方式
;
; example2.nsi脚本会将example2.nsi文件安装到用户选择的目录中。
;
; install-shared.nsi脚本将提供一种更可靠的检查管理员权限的方法
; install-per-user.nsi脚本将提供如何做文件关联功能的方法

;--------------------------------

; 安装程序的名称
Name "Example2"

; 要写入的文件(最终的生成结果)
OutFile "example2.exe"

; 请求Windows Vista及更高版本的应用程序权限
RequestExecutionLevel admin

; 生成Unicode安装程序
; 启用Unicode让界面显示全世界的语言，尤其是中文强烈依赖Unicode
; 除非代码质量差，不然Unicode只需设置为True即可(关闭后更返祖，可以理解为仅支持26个英文字母)
Unicode True

; 默认安装目录
InstallDir $PROGRAMFILES\Example2

; 用于检查目录的注册表项（因此，如果二次安装，它将自动覆盖旧目录）
InstallDirRegKey HKLM "Software\NSIS_Example2" "Install_Dir"

;--------------------------------

; Pages页面
; Page components 组件选择页面
; Page directory 安装目录选择页面
; Page instfiles 安装执行页面
; UninstPage uninstConfirm 卸载确认页面
; UninstPage instfiles 取消安装

Page components
Page directory
Page instfiles

UninstPage uninstConfirm
UninstPage instfiles

;--------------------------------

; 要安装的东西
Section "Example2 (required)"

  SectionIn RO
  
  ; 设置安装目录的输出路径
  SetOutPath $INSTDIR
  
  ; 将文件放置在这里
  File "example2.nsi"
  
  ; 将安装路径写入注册表
  WriteRegStr HKLM SOFTWARE\NSIS_Example2 "Install_Dir" "$INSTDIR"
  
  ; 卸载注册表项的 Windows 安装程序属性：https://learn.microsoft.com/en-us/windows/win32/msi/uninstall-registry-key
  ; 写入卸载注册表项
  WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\Example2" "DisplayName" "NSIS Example2"
  WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\Example2" "UninstallString" '"$INSTDIR\uninstall.exe"'
  WriteRegDWORD HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\Example2" "NoModify" 1
  WriteRegDWORD HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\Example2" "NoRepair" 1
  WriteUninstaller "$INSTDIR\uninstall.exe"
  
SectionEnd

; 可选的Section(可由用户禁用)
Section "Start Menu Shortcuts"

  CreateDirectory "$SMPROGRAMS\Example2"
  CreateShortcut "$SMPROGRAMS\Example2\Uninstall.lnk" "$INSTDIR\uninstall.exe"
  CreateShortcut "$SMPROGRAMS\Example2\Example2 (MakeNSISW).lnk" "$INSTDIR\example2.nsi"

SectionEnd

;--------------------------------

; 卸载程序

Section "Uninstall"
  
  ; 删除注册表项
  DeleteRegKey HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\Example2"
  DeleteRegKey HKLM SOFTWARE\NSIS_Example2

  ; 删除文件和卸载程序
  Delete $INSTDIR\example2.nsi
  Delete $INSTDIR\uninstall.exe

  ; 如果有快捷方式则删除快捷方式
  Delete "$SMPROGRAMS\Example2\*.lnk"

  ; 删除目录
  RMDir "$SMPROGRAMS\Example2"
  RMDir "$INSTDIR"

SectionEnd

7.7 编译example2.nsi并添加electron项目

不要学Potplayer傻了吧唧的，确认好文件名再执行安装和删除
在这个路径下运行以下命令.\electron-quick-start-Chinese\out\electron-quick-start-Chinese-win32-x64

cmd /k "echo off&&for /r %i in (*) do ( echo %%i )"

全选复制结果到vscode中，第一行命令删除不要
选中路径前半段，Ctrl+H替换为"  File “或者”  File /oname=$INSTDIR****"，就像这样
.\electron-quick-start-Chinese\out\electron-quick-start-Chinese-win32-x64\chrome_100_percent.pak
.\electron-quick-start-Chinese\out\electron-quick-start-Chinese-win32-x64\locales\zh-CN.pak
  File chrome_100_percent.pak
  File /oname=$INSTDIR\locales\zh-CN.pak locales\zh-CN.pak

将example2.nsi放置在这个位置
.\electron-quick-start-Chinese\out\electron-quick-start-Chinese-win32-x64\example2.nsi
编辑example2.nsi，找到File “example2.nsi”，把处理好的文件名复制进去
提前CreateDirectory创建文件夹，NSIS并不会智能创建文件夹

  ; 将文件放置在这里
  File "example2.nsi"
  CreateDirectory "$INSTDIR\locales"
  CreateDirectory "$INSTDIR\resources\app"
  CreateDirectory "$INSTDIR\resources\app\assets\app-icon\mac"
  CreateDirectory "$INSTDIR\resources\app\assets\app-icon\win"
  File chrome_100_percent.pak
  File chrome_200_percent.pak
  File d3dcompiler_47.dll
  File electron-quick-start-Chinese.exe
  File example2.nsi
  File ffmpeg.dll
  File icudtl.dat
  File libEGL.dll
  File libGLESv2.dll
  File LICENSE
  File LICENSES.chromium.html
  File resources.pak
  File snapshot_blob.bin
  File v8_context_snapshot.bin
  File version
  File vk_swiftshader.dll
  File vk_swiftshader_icd.json
  File vulkan-1.dll
  File /oname=$INSTDIR\locales\af.pak locales\af.pak
  File /oname=$INSTDIR\locales\am.pak locales\am.pak
  File /oname=$INSTDIR\locales\ar.pak locales\ar.pak
  File /oname=$INSTDIR\locales\bg.pak locales\bg.pak
  File /oname=$INSTDIR\locales\bn.pak locales\bn.pak
  File /oname=$INSTDIR\locales\ca.pak locales\ca.pak
  File /oname=$INSTDIR\locales\cs.pak locales\cs.pak
  File /oname=$INSTDIR\locales\da.pak locales\da.pak
  File /oname=$INSTDIR\locales\de.pak locales\de.pak
  File /oname=$INSTDIR\locales\el.pak locales\el.pak
  File /oname=$INSTDIR\locales\en-GB.pak locales\en-GB.pak
  File /oname=$INSTDIR\locales\en-US.pak locales\en-US.pak
  File /oname=$INSTDIR\locales\es-419.pak locales\es-419.pak
  File /oname=$INSTDIR\locales\es.pak locales\es.pak
  File /oname=$INSTDIR\locales\et.pak locales\et.pak
  File /oname=$INSTDIR\locales\fa.pak locales\fa.pak
  File /oname=$INSTDIR\locales\fi.pak locales\fi.pak
  File /oname=$INSTDIR\locales\fil.pak locales\fil.pak
  File /oname=$INSTDIR\locales\fr.pak locales\fr.pak
  File /oname=$INSTDIR\locales\gu.pak locales\gu.pak
  File /oname=$INSTDIR\locales\he.pak locales\he.pak
  File /oname=$INSTDIR\locales\hi.pak locales\hi.pak
  File /oname=$INSTDIR\locales\hr.pak locales\hr.pak
  File /oname=$INSTDIR\locales\hu.pak locales\hu.pak
  File /oname=$INSTDIR\locales\id.pak locales\id.pak
  File /oname=$INSTDIR\locales\it.pak locales\it.pak
  File /oname=$INSTDIR\locales\ja.pak locales\ja.pak
  File /oname=$INSTDIR\locales\kn.pak locales\kn.pak
  File /oname=$INSTDIR\locales\ko.pak locales\ko.pak
  File /oname=$INSTDIR\locales\lt.pak locales\lt.pak
  File /oname=$INSTDIR\locales\lv.pak locales\lv.pak
  File /oname=$INSTDIR\locales\ml.pak locales\ml.pak
  File /oname=$INSTDIR\locales\mr.pak locales\mr.pak
  File /oname=$INSTDIR\locales\ms.pak locales\ms.pak
  File /oname=$INSTDIR\locales\nb.pak locales\nb.pak
  File /oname=$INSTDIR\locales\nl.pak locales\nl.pak
  File /oname=$INSTDIR\locales\pl.pak locales\pl.pak
  File /oname=$INSTDIR\locales\pt-BR.pak locales\pt-BR.pak
  File /oname=$INSTDIR\locales\pt-PT.pak locales\pt-PT.pak
  File /oname=$INSTDIR\locales\ro.pak locales\ro.pak
  File /oname=$INSTDIR\locales\ru.pak locales\ru.pak
  File /oname=$INSTDIR\locales\sk.pak locales\sk.pak
  File /oname=$INSTDIR\locales\sl.pak locales\sl.pak
  File /oname=$INSTDIR\locales\sr.pak locales\sr.pak
  File /oname=$INSTDIR\locales\sv.pak locales\sv.pak
  File /oname=$INSTDIR\locales\sw.pak locales\sw.pak
  File /oname=$INSTDIR\locales\ta.pak locales\ta.pak
  File /oname=$INSTDIR\locales\te.pak locales\te.pak
  File /oname=$INSTDIR\locales\th.pak locales\th.pak
  File /oname=$INSTDIR\locales\tr.pak locales\tr.pak
  File /oname=$INSTDIR\locales\uk.pak locales\uk.pak
  File /oname=$INSTDIR\locales\ur.pak locales\ur.pak
  File /oname=$INSTDIR\locales\vi.pak locales\vi.pak
  File /oname=$INSTDIR\locales\zh-CN.pak locales\zh-CN.pak
  File /oname=$INSTDIR\locales\zh-TW.pak locales\zh-TW.pak
  File /oname=$INSTDIR\resources\app\index.html resources\app\index.html
  File /oname=$INSTDIR\resources\app\LICENSE.md resources\app\LICENSE.md
  File /oname=$INSTDIR\resources\app\main.js resources\app\main.js
  File /oname=$INSTDIR\resources\app\package.json resources\app\package.json
  File /oname=$INSTDIR\resources\app\preload.js resources\app\preload.js
  File /oname=$INSTDIR\resources\app\renderer.js resources\app\renderer.js
  File /oname=$INSTDIR\resources\app\styles.css resources\app\styles.css
  File /oname=$INSTDIR\resources\app\assets\app-icon\mac\b.icns resources\app\assets\app-icon\mac\b.icns
  File /oname=$INSTDIR\resources\app\assets\app-icon\win\b.ico resources\app\assets\app-icon\win\b.ico

同理再修改Delete语句，编辑example2.nsi，找到Delete $INSTDIR\uninstall.exe，把处理好的文件名复制进去
Delete $INSTDIR\locales\zh-CN.pak
谨慎使用RMDir /r，该操作会无情地删除文件夹

  ; 删除文件和卸载程序
  Delete $INSTDIR\example2.nsi
  Delete $INSTDIR\uninstall.exe
  Delete $INSTDIR\chrome_100_percent.pak
  Delete $INSTDIR\chrome_200_percent.pak
  Delete $INSTDIR\d3dcompiler_47.dll
  Delete $INSTDIR\electron-quick-start-Chinese.exe
  Delete $INSTDIR\example2.nsi
  Delete $INSTDIR\ffmpeg.dll
  Delete $INSTDIR\icudtl.dat
  Delete $INSTDIR\libEGL.dll
  Delete $INSTDIR\libGLESv2.dll
  Delete $INSTDIR\LICENSE
  Delete $INSTDIR\LICENSES.chromium.html
  Delete $INSTDIR\resources.pak
  Delete $INSTDIR\snapshot_blob.bin
  Delete $INSTDIR\v8_context_snapshot.bin
  Delete $INSTDIR\version
  Delete $INSTDIR\vk_swiftshader.dll
  Delete $INSTDIR\vk_swiftshader_icd.json
  Delete $INSTDIR\vulkan-1.dll
  Delete $INSTDIR\locales\af.pak
  Delete $INSTDIR\locales\am.pak
  Delete $INSTDIR\locales\ar.pak
  Delete $INSTDIR\locales\bg.pak
  Delete $INSTDIR\locales\bn.pak
  Delete $INSTDIR\locales\ca.pak
  Delete $INSTDIR\locales\cs.pak
  Delete $INSTDIR\locales\da.pak
  Delete $INSTDIR\locales\de.pak
  Delete $INSTDIR\locales\el.pak
  Delete $INSTDIR\locales\en-GB.pak
  Delete $INSTDIR\locales\en-US.pak
  Delete $INSTDIR\locales\es-419.pak
  Delete $INSTDIR\locales\es.pak
  Delete $INSTDIR\locales\et.pak
  Delete $INSTDIR\locales\fa.pak
  Delete $INSTDIR\locales\fi.pak
  Delete $INSTDIR\locales\fil.pak
  Delete $INSTDIR\locales\fr.pak
  Delete $INSTDIR\locales\gu.pak
  Delete $INSTDIR\locales\he.pak
  Delete $INSTDIR\locales\hi.pak
  Delete $INSTDIR\locales\hr.pak
  Delete $INSTDIR\locales\hu.pak
  Delete $INSTDIR\locales\id.pak
  Delete $INSTDIR\locales\it.pak
  Delete $INSTDIR\locales\ja.pak
  Delete $INSTDIR\locales\kn.pak
  Delete $INSTDIR\locales\ko.pak
  Delete $INSTDIR\locales\lt.pak
  Delete $INSTDIR\locales\lv.pak
  Delete $INSTDIR\locales\ml.pak
  Delete $INSTDIR\locales\mr.pak
  Delete $INSTDIR\locales\ms.pak
  Delete $INSTDIR\locales\nb.pak
  Delete $INSTDIR\locales\nl.pak
  Delete $INSTDIR\locales\pl.pak
  Delete $INSTDIR\locales\pt-BR.pak
  Delete $INSTDIR\locales\pt-PT.pak
  Delete $INSTDIR\locales\ro.pak
  Delete $INSTDIR\locales\ru.pak
  Delete $INSTDIR\locales\sk.pak
  Delete $INSTDIR\locales\sl.pak
  Delete $INSTDIR\locales\sr.pak
  Delete $INSTDIR\locales\sv.pak
  Delete $INSTDIR\locales\sw.pak
  Delete $INSTDIR\locales\ta.pak
  Delete $INSTDIR\locales\te.pak
  Delete $INSTDIR\locales\th.pak
  Delete $INSTDIR\locales\tr.pak
  Delete $INSTDIR\locales\uk.pak
  Delete $INSTDIR\locales\ur.pak
  Delete $INSTDIR\locales\vi.pak
  Delete $INSTDIR\locales\zh-CN.pak
  Delete $INSTDIR\locales\zh-TW.pak
  Delete $INSTDIR\resources\app\index.html
  Delete $INSTDIR\resources\app\LICENSE.md
  Delete $INSTDIR\resources\app\main.js
  Delete $INSTDIR\resources\app\package.json
  Delete $INSTDIR\resources\app\preload.js
  Delete $INSTDIR\resources\app\renderer.js
  Delete $INSTDIR\resources\app\styles.css
  Delete $INSTDIR\resources\app\assets\app-icon\mac\b.icns
  Delete $INSTDIR\resources\app\assets\app-icon\win\b.ico
  RMDir "$INSTDIR\locales"
  RMDir "$INSTDIR\resources\app\assets\app-icon\mac"
  RMDir "$INSTDIR\resources\app\assets\app-icon\win"
  RMDir "$INSTDIR\resources\app\assets\app-icon"
  RMDir "$INSTDIR\resources\app\assets"
  RMDir "$INSTDIR\resources\app"

点击实心闪电图标编译脚本(Ctrl+Shift+B)，生成安装包(文件较多，多等一会)

8.安装卸载一下做好的安装包

安装包生成完毕后，直接运行，点击 Next>，点击Install，点击Close
然后我们会在设置-应用-应用和功能-应用和功能-搜索"Example2"，找到安装完的应用
在这里插入图片描述
或者运行命令打开"appwiz.cpl"(控制面板)，搜索"Example2"，找到安装完的应用

选中"NSIS Example2"，点击"卸载按钮"即可卸载

请添加图片描述