为了账号安全,请及时绑定邮箱和手机立即绑定

不联网的情况下,使用 electron-builder 快速打包全平台应用

标签:
前端工具

electron-builder打包.001

前言

Electron 之所以能够日益风靡,是因为其简单易用且对各个操作平台具有良好的支持。

今天我就来分享一下怎么使用一套代码,快速打包生成各主流平台安装包的经验。

项目安装

首先,使用我前面介绍的[提效小技巧],设置:

  • NPM 源为淘宝镜像源;
  • Electron 源为中国镜像网站中的 Electron 源地址。

然后依次执行以下指令:

mkdir my-electron
cd my-electron
npm init -y
npm install electron@14.2.6 -D
npm install @electron/remote --save
npm install electron-builder -D

打包配置

在 my-electron 目录下的 package.json 中,添加打包配置:

{
  "name": "my-electron",
  "version": "0.1.0",
  "author": "编程三昧",
  "build": {  // electron-builder配置
    "productName":"myFirstApp",//项目名 这也是生成的exe文件的前缀名
    "appId": "xxxxx", 
    "copyright":"xxxx",//版权信息
    "directories": {
        "output": "build" // 输出文件夹
    }, 
    "extraResources":  [{ // 需要读写的配置文件
        "from": "./config/config.json",
        "to": "../config/config.json"
    }],
    "win": {  
        "icon": "xxx/icon.ico"//图标路径,
        "target":[
        	{
        		"target": "nsis",
        		"arch": ["x64"]
        	}
        ]
    },
    "dmg": {
    	"contents": [
    		{
    			"x": 0,
    			"y": 0,
    			"path": "/Application"
    		}
    	]
    },
    "linux": {
    	"icon": "xxx/icon.ico"
    },
    "mac": {
    	"icon": "xxx/icon.ico"
    },
    "nsis": {
        "oneClick": false, // 一键安装
        "guid": "xxxx", //注册表名字,不推荐修改
        "perMachine": true, // 是否开启安装时权限限制(此电脑或当前用户)
        "allowElevation": true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
        "allowToChangeInstallationDirectory": true, // 允许修改安装目录
        "installerIcon": "./build/icons/aaa.ico", // 安装图标
        "uninstallerIcon": "./build/icons/bbb.ico", //卸载图标
        "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
        "createDesktopShortcut": true, // 创建桌面图标
        "createStartMenuShortcut": true, // 创建开始菜单图标
        "shortcutName": "xxxx" // 图标名称
    }
  }
}

配置打包脚本

在 package.json 中,添加对应的打包脚本:

{"scripts": {
		"dev": "electron . --enable-loggin --no-sandbox",
		"build-64": "electron-builder --win --x64",
		"build-linux": "electron-builder --linux",
		"build-mac": "electron-builder --mac"
	}}

在 my-electron 目录下打开终端,运行 npm run dev 即可进入开发模式。

关于各平台 Electron 镜像

在有网络的情况下,由于我们设置了 NPM 镜像和 Electron 源,速度还是很快的。

但我这边是内网打包,没法联网,所以,需要取个巧,在打包开始之前就将对应平台的 Electron 源下载下来放到各自的 NPM 缓存中去。

electron-builder 在打包的时候,会根据系统的不同去各自的 NPM 缓存目录下查找对应版本的 Electron 源,当我们将下载好的源放在 NPM 缓存中后,就不需要再去联网拉去了。

我使用的 electron@14.2.6 镜像的下载地址为:https://registry.npmmirror.com/binary.html?path=electron/14.2.6/

这是 @electron/get 中获取 electron 镜像缓存的示例:

import { downloadArtifact } from '@electron/get';
const zipFilePath = await downloadArtifact({
  version: '14.2.6',
  platform: 'darwin',
  artifactName: 'electron',
  artifactSuffix: 'symbols',
  arch: 'x64',
});

各操作系统对应的 NPM 缓存路径分别为:

  • Linux: $XDG_CACHE_HOME or ~/.cache/electron/
  • MacOS: ~/Library/Caches/electron/
  • Windows: %LOCALAPPDATA%/electron/Cache or ~/AppData/Local/electron/Cache/

注意:Linux x64Linux arm64 对应的 electron 镜像是不同的,

关于开发模式启动不了的问题

开发模式可能启动不了,其原因或许是 my-electron、node_modules 下的 electron 未执行安装,缺少 Electron 源。

想要解决,只需执行以下指令:

node ./node_modules/electron/cli.js

等待 electron 镜像拉取完成后,即可正常进入开始模式。

总结

以上就是在不联网的情况下使用 electron-builder 打包全平台桌面应用的记录。

~
本文完,感谢阅读!

~

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
28
获赞与收藏
84

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消