如何使用pnpm打包electron项目
最近手头有一个electron的项目,使用的是electron-builder这个包来对项目进行打包,打包过程很曲折,控制台哐哐报错,其中最主要的就是因为项目使用的包管理工具是pnpm,为了避免有人和我一样卡在了这里所以写了这篇文章
所需的材料
- 主要材料
- 一个electron的项目
- 包
- electron
- electron-builder
- 工具
- pnpm
- 还有一种不怕困难的精神,和保持热爱的心😆
开始
官方推荐的包管理工具是yarn,vscode也是用的yarn
第一步,创建所需的配置文件
在项目的根目录中创建一个.npmrc
的文件 内容:
1# 将pnpm变成扁平化架构
2node-linker=hoisted
3
4# 在国内使用pnpm安装electron需要配置一下electron的下载路径
5electron_mirror="https://npm.taobao.org/mirrors/electron/"
在配置好该文件后,把node_module
文件夹删了,重新执行一下pnpm install
原因: pnpm再对项目进行打包的时候,也许你会打包成功,但是在启动打包好的exe可执行文件的时候,就会报出有文件找不到
这其中最主要的一个原因是因为pnpm使用的是非扁平化架构,这个架构虽然可以让我们的node_modules小很多,且用的时候也很快,但是在electron中是找不到这些包的,第一层的包找得到,但是你安装的包中他们也有安装一些其他的包,这些包就找不到了
解决方法:将pnpm的架构变成扁平化
第二步,修改package.json文件
内容:
1{
2 "name": "项目名称",
3 "version": "0.0.0",
4 "description": "项目的解释", // 这个解释会在项目打包好后出现在exe可执行文件上,把鼠标停放到那个文件上就会出现
5 "main": "./electron/main.js", // electron的入口文件,electron启动的时候会优先找到这个文件
6 "author": { // 作者信息,如果是公司的项目,则这里写公司的信息
7 "name": "xxx",
8 "email": "xxx.com",
9 "url": "https://xxx"
10 },
11 "license": "MIT",
12 "private": true,
13 "scripts": {
14 // 项目的前端资源打包和electron-builder打包命令
15 "electron:build": "pnpm run build && electron-builder",
16 // electro-buildern的打包命令,这条命令的主要作用是因为前端资源已经打包好了,不需要再打包一次,直接打包electron
17 "electron:builder": "electron-builder",
18 },
19 "devDependencies": {
20 "electron": "18.2.3",
21 "electron-builder": "^23.0.3",
22 },
23
24 // 下面就是重点了,执行electron-builder命令时候,会找到package.json下面的build字段,这个字段里面存放的都是打包的配置信息
25 "build": {
26 // 应用名称,会出现在所有跟这个应用有关的地方,包括任务管理器,但不会出现在应用的安装目录,安装目录显示的名称是上面的name字段
27 "productName": "xxx",
28 // 应用的Id,这个好像没有什么要求,按下面格式写就行了
29 "appId": "com.xxx.app",
30 // 应用的版权信息,俩括号得去掉
31 "copyright": "Copyright © {{年份}} - {{年份 | present}} {{作者 | 公司}}",
32 // 应用的资源
33 "files": [
34 "dist/**/*",
35 "electron/**/*"
36 ],
37 "directories": {
38 // 打包应用时会涉及到的资源
39 "buildResources": "dist",
40 // 打包后的输出文件夹
41 "output": "electron_build"
42 },
43 // dmg MacOS系统用来打包应用的程序,就像打包electron需要electron-builder一样概念
44 "dmg": {
45 // 下面这些是安装应用程序的设置
46 "window": {
47 "x": 100,
48 "y": 100,
49 "width": 500,
50 "height": 300
51 }
52 },
53 // nsis 概念和上面的一样,不过是windows的
54 "nsis": {
55 // 是否一键安装
56 "oneClick": false,
57 // 安装包的图标,默认是win下面的icon图标
58 "installerIcon": "./dist/icon-install-256x256.ico",
59 // 卸载应用程序的程序名称
60 "uninstallDisplayName": "卸载xxx | xxx Uninstall",
61 // 卸载应用程序的程序图标,注意!!!这里需要在前面加个点变成相对路径,不然会找不到文件
62 "uninstallerIcon": "./dist/icon-uninstall-256x256.ico",
63 // 是否允许用户更改应用的安装目录
64 "allowToChangeInstallationDirectory": true
65 },
66 // 将应用打包至win系统的配置
67 "win": {
68 // 应用图标,这里不需要使用相对路径,但是所有涉及应用打包的图标必须是256x256或以上的,不然会报错,且图标的名称上需要写上图标的尺寸
69 "icon": "/dist/icon-256x256.ico",
70 "target": [
71 {
72 // 使用什么程序进行打包
73 "target": "nsis",
74 // 打包32位的还是64位的,可以俩个一起写进去
75 "arch": [ "ia32" ]
76 }
77 ]
78 },
79 // 打包打包至mac系统的配置
80 "mac": {
81 // mac系统上的应用图标后缀名为icns,这里要注意一下
82 "icon": "/dist/icons-256x256.icns",
83 "target": "dmg"
84 },
85 "linux": {
86 "icon": "/dist/icon-256x256.ico",
87 "target": "deb"
88 }
89 }
90}
第三步,打包
再项目执行pnpm run build
或者pnpm run builder
,等待一会就打包成功了,项目的根目录会生成一个electron_build
的文件夹,这个是我们刚刚上面写好的输出文件夹。 如果你在windows
系统上的话,内部会有一个应用程序的安装包,和一个win-i32-unpacked
的文件夹,里面存放着一个应用的可程序文件,
打包是可以打包多次的,并不是说配置好后一键打包就完成了,可以再打包后修改一下配置文件,再进行打包,生成多个不一样的安装包
electron-builder的构建命令参数等可以去看这篇文件 Electron-builder打包详解 里面说的很详细,这篇文件也有很多是参考那篇文件写的
个人笔记记录 2021 ~ 2025