1

#yyds干货盘点# 不联网的情况下，使用 electron-builder 快速打包全平台应用

 2 years ago
source link: https://blog.51cto.com/bianchengsanmei/5071240
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

#yyds干货盘点# 不联网的情况下，使用 electron-builder 快速打包全平台应用

原创

编程三昧 2022-03-03 21:16:11 博主文章分类：Electron ©著作权

文章标签 linux electron 文章分类 其他 前端开发 阅读数1083

#yyds干货盘点# 不联网的情况下，使用 electron-builder 快速打包全平台应用_electron

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

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

首先，使用我前面介绍的 提效小技巧，设置：

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

然后依次执行以下指令：

mkdir my-electron
cd my-electron
npm init -y
npm install [email protected] -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 缓存中后，就不需要再去联网拉去了。

我使用的 [email protected] 镜像的下载地址为：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 x64 和 Linux arm64 对应的 electron 镜像是不同的，

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

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

想要解决，只需执行以下指令：

node ./node_modules/electron/cli.js

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

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

~ 本文完，感谢阅读！

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

大家好，我是〖 编程三昧〗的作者 隐逸王，我的公众号是『 编程三昧』，欢迎关注，希望大家多多指教！

  • 打赏
  • 赞
  • 收藏
  • 评论
  • 分享
  • 举报

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK