如何使用pnpm打包electron项目

最近手头有一个electron的项目，使用的是electron-builder这个包来对项目进行打包，打包过程很曲折，控制台哐哐报错，其中最主要的就是因为项目使用的包管理工具是pnpm，为了避免有人和我一样卡在了这里所以写了这篇文章

所需的材料

• 主要材料
  • 一个electron的项目
• 包
  • electron
  • electron-builder
• 工具
  • pnpm
• 还有一种不怕困难的精神，和保持热爱的心😆

开始

官方推荐的包管理工具是yarn，vscode也是用的yarn

第一步，创建所需的配置文件

在项目的根目录中创建一个.npmrc的文件 内容：

# 将pnpm变成扁平化架构
node-linker=hoisted

# 在国内使用pnpm安装electron需要配置一下electron的下载路径
electron_mirror="https://npm.taobao.org/mirrors/electron/"

在配置好该文件后，把node_module文件夹删了，重新执行一下pnpm install

原因： pnpm再对项目进行打包的时候，也许你会打包成功，但是在启动打包好的exe可执行文件的时候，就会报出有文件找不到

这其中最主要的一个原因是因为pnpm使用的是非扁平化架构，这个架构虽然可以让我们的node_modules小很多，且用的时候也很快，但是在electron中是找不到这些包的，第一层的包找得到，但是你安装的包中他们也有安装一些其他的包，这些包就找不到了

解决方法：将pnpm的架构变成扁平化

第二步，修改package.json文件

内容:

{
    "name": "项目名称",
    "version": "0.0.0",
    "description": "项目的解释", // 这个解释会在项目打包好后出现在exe可执行文件上，把鼠标停放到那个文件上就会出现
    "main": "./electron/main.js", // electron的入口文件，electron启动的时候会优先找到这个文件
    "author": { // 作者信息，如果是公司的项目，则这里写公司的信息
        "name": "xxx",
        "email": "xxx.com",
        "url": "https://xxx"
    },
    "license": "MIT",
    "private": true,
    "scripts": {
        // 项目的前端资源打包和electron-builder打包命令
        "electron:build": "pnpm run build && electron-builder",
        // electro-buildern的打包命令，这条命令的主要作用是因为前端资源已经打包好了，不需要再打包一次，直接打包electron
        "electron:builder": "electron-builder",
    },
    "devDependencies": {
        "electron": "18.2.3",
        "electron-builder": "^23.0.3",
    },

    // 下面就是重点了，执行electron-builder命令时候，会找到package.json下面的build字段，这个字段里面存放的都是打包的配置信息
    "build": {
        // 应用名称，会出现在所有跟这个应用有关的地方，包括任务管理器，但不会出现在应用的安装目录，安装目录显示的名称是上面的name字段
        "productName": "xxx",
        // 应用的Id，这个好像没有什么要求，按下面格式写就行了
        "appId": "com.xxx.app",
        // 应用的版权信息，俩括号得去掉
        "copyright": "Copyright © {{年份}} - {{年份 | present}} {{作者 | 公司}}",
        // 应用的资源
        "files": [
            "dist/**/*",
            "electron/**/*"
        ],
        "directories": {
            // 打包应用时会涉及到的资源
            "buildResources": "dist",
            // 打包后的输出文件夹
            "output": "electron_build"
        },
        // dmg MacOS系统用来打包应用的程序，就像打包electron需要electron-builder一样概念
        "dmg": {
            // 下面这些是安装应用程序的设置
            "window": {
                "x": 100,
                "y": 100,
                "width": 500,
                "height": 300
            }
        },
        // nsis 概念和上面的一样，不过是windows的
        "nsis": {
            // 是否一键安装
            "oneClick": false,
            // 安装包的图标，默认是win下面的icon图标
            "installerIcon": "./dist/icon-install-256x256.ico",
            // 卸载应用程序的程序名称
            "uninstallDisplayName": "卸载xxx | xxx Uninstall",
            // 卸载应用程序的程序图标，注意！！！这里需要在前面加个点变成相对路径，不然会找不到文件
            "uninstallerIcon": "./dist/icon-uninstall-256x256.ico",
            // 是否允许用户更改应用的安装目录
            "allowToChangeInstallationDirectory": true
        },
        // 将应用打包至win系统的配置
        "win": {
            // 应用图标，这里不需要使用相对路径，但是所有涉及应用打包的图标必须是256x256或以上的，不然会报错，且图标的名称上需要写上图标的尺寸
            "icon": "/dist/icon-256x256.ico",
            "target": [
                {
                    // 使用什么程序进行打包
                    "target": "nsis",
                    // 打包32位的还是64位的，可以俩个一起写进去
                    "arch": [ "ia32" ]
                }
            ]
        },
        // 打包打包至mac系统的配置
        "mac": {
            // mac系统上的应用图标后缀名为icns，这里要注意一下
            "icon": "/dist/icons-256x256.icns",
            "target": "dmg"
        },
        "linux": {
            "icon": "/dist/icon-256x256.ico",
            "target": "deb"
        }
    }
}

第三步，打包

再项目执行pnpm run build或者pnpm run builder，等待一会就打包成功了，项目的根目录会生成一个electron_build的文件夹，这个是我们刚刚上面写好的输出文件夹。 如果你在windows系统上的话，内部会有一个应用程序的安装包，和一个win-i32-unpacked的文件夹，里面存放着一个应用的可程序文件，

打包是可以打包多次的，并不是说配置好后一键打包就完成了，可以再打包后修改一下配置文件，再进行打包，生成多个不一样的安装包

electron-builder的构建命令参数等可以去看这篇文件 Electron-builder打包详解 里面说的很详细，这篇文件也有很多是参考那篇文件写的