electron打包：electron-packager及electron-builder两种方式实现（for Windows）

最新推荐文章于 2025-03-19 14:51:04 发布

xxc1605629895

最新推荐文章于 2025-03-19 14:51:04 发布

阅读量2.1w

点赞数 6

分类专栏： electron 文章标签： electron-packager

原文链接：https://segmentfault.com/a/1190000013924153

版权

electron 专栏收录该内容

2 篇文章

订阅专栏

前言

electron_desc_img

本文主要介绍如何通过electron-packager及electron-builder两种方式，将已有的electron应用打包成msi格式和exe可执行文件。打包是一个成熟的应用程序一个重要的环节，希望这篇文章可以给大家一些参考，最后会讲到打包时遇到的一些坑，与大家分享。

本文适用于有一些electron实践经验的小伙伴，知道如何创建一个简单的electron应用，并且知道electron主进程、渲染进程间如何通信。

electron-packager

使用命令 npm install electron-packager --save-dev 安装好之后会在package.json中的devDependencies生成代码:

"devDependencies": {
    "electron-packager": "^9.1.0"
}

注意：
1、打包时要分清devDependencies与dependencies的区别，文章后会讲。
2、package.json 的额外字段 —— productName、author 和 description，虽然这几个字段并不是打包必备的，但它们会在 Windows 的 Squirrel 安装包（用于自动更新）中使用到，所以请读者根据实际情况添加。

安装好模块之后，就可以对应用进行打包。electron-packager的打包基本命令是：

electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>

参数说明：

sourcedir：项目所在路径
appname：应用名称
platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
architecture：决定了使用 x86 还是 x64 还是两个架构都用
electron version：electron 的版本
optional options：可选选项

为了方便起见，在package.json中添加代码：

"scripts": {
    "package": "electron-packager ./ myapp --out ./OutApp --version 1.7.9 --arch=x64 --electron-version=6.0.4 --overwrite --icon=./app/img/icon/icon.ico"
  }

然后在命令行中执行npm run package

electron_packager_usage

打包成功后，会在OutApp目录（此处的目录是在参数中配置的）下生成.exe，运行该文件，并且没有报错，则说明本次打包成功。

electron_packager_result

特点：
1、支持平台有：Windows (32/64 bit)、OS X (also known as macOS)、Linux (x86/x86_64);
2、进行应用更新时，使用electron内置的autoUpdate进行更新
3、支持CLI和JS API两种使用方式；

electron-builder

首先来看看什么是electron-builder，来自官方的解释：

A complete solution to package and build a ready for distribution Electron, Proton Native or Muon app for macOS, Windows and Linux with “auto update” support out of the box.

简单的说，electron-builder就是有比electron-packager有更丰富的的功能，支持更多的平台，同时也支持了自动更新。除了这几点之外，由electron-builder打出的包更为轻量，并且可以打包出不暴露源码的setup安装程序。考虑到以上几点，我果断选择了electron-builder

首先，依旧是安装依赖。

（这里官方强烈推荐使用yarn安装依赖包，但我使用了npm安装的依赖也可以正常打包，所以至于为什么官方强烈推荐用yarn，我还没搞懂其原因，还请了解缘由的大佬们赐教）

yarn add electron-builder --save-dev

在package.json中做如下配置

"build": {
    "appId": "com.xxx.app",
    "mac": {
      "target": ["dmg","zip"]
    },
    "win": {
      "target": ["nsis","zip"]
    }
},
"scripts": {
    "dist": "electron-builder --win --x64"
},

在命令行中执行npm run dist ，执行结果如下：

electron_builder_usage

打包后在dist目录生成如下文件：

electron_builder_result

解压zip包或执行setup安装文件，应用启动后且没有报错，则说明本次打包成功。

特点：
1、electron-builder 可以打包成msi、exe、dmg文件，macOS系统，只能打包dmg文件，window系统才能打包exe，msi文件；
2、几乎支持了所有平台的所有格式；
3、支持Auto Update；
4、支持CLI和JS API两种使用方式；

坑

研究electron打包的过程中踩了不少坑，打包涉及到不少系统级别的问题，从最初的选型到最后的成功打包，看似是个简单的过程，但其中仍有一些需要注意到的地方，我在这里分两点说明：

devDependencies与dependencies的区别

dependencies 表示我们要在生产环境下使用该依赖，devDependencies 则表示我们仅在开发环境使用该依赖。在打包时，一定要分清哪些包属于生产依赖，哪些属于开发依赖，尤其是在项目较大，依赖包较多的情况下。若在生产环境下错应或者少引依赖包，即便是成功打包，但在使用应用程序期间也会报错，导致打包好的程序无法正常运行。

npm与cnpm的区别

说到npm与cnpm的区别，可能大家都知道，但大家容易忽视的一点，是cnpm装的各种node_module，这种方式下所有的包都是扁平化的安装。一下子node_modules展开后有非常多的文件。导致了在打包的过程中非常慢。但是如果改用npm来安装node_modules的话，所有的包都是树状结构的，层级变深。

由于这个不同，对一些项目比较大的应用，很容易出现打包过程慢且node内存溢出的问题（这也是在解决electron打包过程中困扰我比较久的问题，最后想到了npm与cnpm的这点不同，解决了node打包内存溢出的问题，从打包一次一小时优化到打包一次一分钟，极大的提高了效率）。

所以建议大家在打包前，将使用cnpm安装的依赖包删除，替换成npm安装的依赖包。

asar 生成报错

在使用 electron-builder 打包的过程中，遇到了一个生成的 asar 包中找不到 main.js 的错误，如下：

Error: Application entry file "main.js" in the ".../Contents/Resources/app.asar" does not exist. Seems like a wrong configuration.

查询资料后发现，需要在 package.json 的 build 下的 files 里添加要打包到 asar 中的文件。添加到 files 下后，重新使用 electron-builder 打包后，错误消失。

"build": {
    "productName": "autoupdater-demo",
    "appId": "**",
    "directories": {
      "output": "build"
    },
    "files": [
      "./index.html",
      "./main.js",
      "./package.json",
      "dist/electron/**/*"
    ],   
    "win": {
      "icon": "build/icons/icon.ico",
      "artifactName": "${productName}_setup_${version}.${ext}"
    }
  }

使用 asar list 文件路径可以看到 asar 中包含的文件列表。

....>asar list app.asar
\index.html
\main.js
\package.json

electron-builder 依赖

win 平台下，关于electron-builder打包可以有两种方案：

打包成文件夹及绿色免安装：

electron-builder --dir（依赖winCodeSign）

打包成exe的安装包

electron-builder （依赖winCodeSign和nsis）

electron-builder有一些依赖包如【winCodeSign】、【nsis】；在科学上网的情况下，直接执行命令就会自动处理相关依赖，但天朝基本不科学上网，所以会出现包安装超时等的一些情况，这个时候就需要手动安装：

1.第一步：下载wincodesign包链接: https://github.com/electron-userland/electron-builder-binaries/releases

2.第二步：选择Source code (zip)下载并解压，里面已经包含nsis

3.第三步：在%LOCALAPPDATA%（C:\Users\Administrator\AppData\Local）目录下新建electron-builder\cache\

4.第四步：将Source code (zip)解压到第三步的目录下，根据错误提示的版本在对于的包下面新建对于的版本，并把文件移动到目录下，便可正常打包，如图：

electron_builder_dependencies

electron-builder 打包应用开机启动

可以通过在 package.json 中配置 nsis 来在程序安装时写入配合到注册表，来实现程序开机启动。具体如下。

package.json 中增加配置

package.json中electron-builder相关配置，在nsis中添加include属性，值为nsis脚本文件路径。

 "build": {
    "productName": "autoupdater-demo",
    "appId": "**",
    "directories": {
      "output": "build"
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://**.**.**.**:3002/download/"
      }
    ],
    "files": [
      "./index.html",
      "./main.js",
      "./package.json",
      "dist/electron/**/*"
    ],    
    "win": {
      "icon": "build/icons/icon.ico",
      "artifactName": "${productName}_setup_${version}.${ext}"
    },    
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "runAfterFinish": true,
      "installerIcon": "./build/icon.ico",
      "uninstallerIcon": "./build/icon.ico",
      "include": "installer.nsh"
    }
  }

编写 nsis 脚本 installer.nsh

!macro customInstall
  WriteRegStr HKCU "Software\Microsoft\Windows\CurrentVersion\Run" "AutoupdaterDemoKey" "$INSTDIR\autoupdater-demo.exe"
!macroend

!macro customUnInstall
  DeleteRegValue HKCU "Software\Microsoft\Windows\CurrentVersion\Run" "AutoupdaterDemoKey"
!macroend

简单解释脚本的含义，具体了解详情请看下方参考资料：