简单介绍
electron 是一个使用
JavaScript
、
HTML
和
CSS
构建桌面应用程序的框架,很多桌面端程序都是通过 electron 开发的,比如说咱们程序员最熟悉的 VSCode。
当你开发完成了一个 electron 应用,就需要将它打包成应用程序,以后可以直接运行。
electron 的核心模块中没有配置打包或者分发文件的工具,需要借助额外的打包工具来实现,目前主流的两种打包工具是:
electron-forge
和
electron-builder
。这两个项目都是 Electron 官方团队维护的。
在官方教程文档是推荐使用 electron-forge,electron -forge 工具底层,将许多现有的 Electron 工具 (如
electron-packager
、
@electron/osx-sign
、
electron-winstaller
等) 组合到一起,但在我的项目经验中,使用 electron-builder 作为打包工具的人更多。
electron-builder VS electron-packager
因为
electron-builder
内置自动升级机制,把打包的文件随意丢到 Web 服务器上即可完成自动升级。
electron-packager
需要自己手动搭建服务器。
除此之外,使用
electron-packager
好处是配置简单,但有个痛处让开发者望而生畏,就是只能打你当前计算机环境的包,比如在 mac 下无法打 win 的包,非常痛苦,而且只能打包 dmg 和 exe。而使用
elctron-builder
可以一步到位。
说说使用
electron-builder
打包的几个好处:
可以打包 web 内容为 asar
可以生成 windows 下的 nsis(安装程序),mac 下 dmg
mac 下也可以打包 windows,打包机一台 mac 搞定
打包程序可以生成
latest.yml
,用于自动更新,不需要多次打包
支持
autoupdate
介绍完打包工具,接下来说一下使用
electron builder
简单打包流程。
第一步:安装依赖
yarn add electron --dev
yarn add electron-builder --dev
npm install electron -D
npm install electron-builder -D
第二步:builder配置
builder 的配置也很简洁,主要有两种方式
package.json
中直接配置使用,比较常用也方便
新建 electron-builder.yml
文件配置
在 package.json
中简单的配置
"main": "main.js",
"script": {
"start": "electron .",
"build": "electron-builder"
"build": {
"productName":"xxxx",
"appId": "com.xxx.xxxxx",
"copyright":"xxxx",
"directories": {
"output": "releases"
"win": {
"icon": "xxx/icon.ico"
加上这些基础配置后就可以打包出来简单的文件,有可执行程序 exe,点击也能正常运行。但这并不是我们想要的,我们目的是打包成安装程序。
打包成安装程序有两种方式:
使用 nsis 工具对上一步打包出来的文件夹再次进行打包
在 build 配置 nsis 直接打包成 exe
我们按照第2种方式进行配置 nsis,nsis 配置是指安装过程的配置,比如安装目录指定,是很重要的配置之一。如果不配置 nsis 应用程序会自动安装在 C 盘,没有用户选择的空间。
下面是部分 nsis 的配置:
"nsis": {
"oneClick": false, // 是否一键安装
"allowElevation": true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, // 允许修改安装目录
"installerIcon": "./build/aaa.ico",// 安装图标
"uninstallerIcon": "./build/bbb.ico",//卸载图标
"installerHeaderIcon": "./build/aaa.ico", // 安装时头部图标
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true,// 创建开始菜单图标
"shortcutName": "xxxx", // 图标名称
"include": "build/installer.nsh", // 包含的自定义nsis脚本 这个对于构建需求严格得安装过程相当有用。
installer.nsh
的配置如下:
; Script generated by the HM NIS Edit Script Wizard.
; HM NIS Edit Wizard helper defines custom install default dir
!macro preInit
SetRegView 64
WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\electron-builder-start-exe"
WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\electron-builder-start-exe"
SetRegView 32
WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\electron-builder-start-exe"
WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\electron-builder-start-exe"
!macroend
第三步:打包开始
以上配置完成后,我们执行打包命令:yarn run build
打包成功,然后我们进入打包输出的目录,双击 Setup 文件,会显示系统弹窗:
在这里,我们可以指定安装目录,进行安装
运行我们开发的程序
至此,一个 electron 应用程序就打包成功了~
demo地址
今天分享就到这儿了,jys,如果这篇文章对你有帮助的话,请给小弟一个赞哦!!!谢谢啦!
github.com/QDMarkMan/C…
www.jianshu.com/p/51a1f4f9d…
github.com/leon776/not…
www.electronjs.org/