如何使用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