前言

在本electron应用打包教程中，我们将介绍如何使用应用程序图标创建MacOS，Windows和Linux可执行文件。这也是Electron应用程序图标发布的延续，因此，如果您还没有读过，请从此处开始（很简短，我保证）。

我将此代码添加到github上的Electron教程应用程序中。如果您想查看所有代码，只需查看该仓库即可。

在本教程中，我将应用程序打包在Windows，macOS和Ubuntu Linux上。在Electron Packager自述文件中，有一些有关从非Windows平台构建Windows应用程序的信息。

第一步：安装electron packager

electron packager是由 electron-userland提供的，也正如他们所说：

“Electron Packager is a command line tool and Node.js library that bundles Electron-based application source code with a renamed Electron executable and supporting files into folders ready for distribution.”

接下来是安装的代码：

1
2
3
4
5
# for use in npm scripts
npm install electron-packager --save-dev

# for use from cli
npm install electron-packager -g

第二步：设置产品的名字和electron的版本

electron packager需要用户在package.json文件中提供产品名字，所以我们在这里加一个名字，同时我们需要把electron的版本写在这里，方便打包的时候识别。

首先，当我们添加electron版本的时候是不需要手动添加的，仅需在项目目录下输入下述命令：

1
npm install --save-dev electron

ok,当我们做完了上述的步骤，打开package.json对产品的名字进行编辑，样例模板如下：

1
2
3
4
5
6
7
8
9
10
{
 "name": "electron-tutorial-app",
 "productName": "Electron tutorial app",
 "version": "0.1.0",
 "main": "main.js",
 "devDependencies": {
 	"electron": "^1.4.3",
 	"electron-packager": "^8.1.0"
 }
}

第三步：在命令行中构建Windows，MacOS和Linux的打包文件

如果想知道下面提供的一些参数是怎么使用的，或者想要了解更多的参数，可以阅读

electron-packager api

MacOS

现在你可以在命令行种使用下述命令为MacOS生成打包的可执行软件。

1
electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds

MacOS软件示意

Windows

在git-bash命令行下使用下述命令行即可生成为Windows打包的文件：

1
electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Electron Tutorial App"

Windows软件示意

Linux

1
electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds

Linux软件示意

简单的说明一下各个参数的作用

  • overwrite：这个参数会让产生的文件覆盖原来存在的或是更早版本的打包文件
  • platform：目标的运行平台
  • arch：这个软件的架构
  • icon：这个软件的图标
  • prune：在打包之前会自动运行npm prune –production来移除不需要的包
  • out：规定了打包文件产生的目录名称

快捷方法

为了更简单的对软件进行打包，我们可以调整package.json文件如下格式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
 "name": "electron-tutorial-app",
 "productName": "Electron tutorial app",
 "version": "0.1.0",
 "main": "main.js",
 "devDependencies": {
 	"electron": "^1.4.3",
 	"electron-packager": "^8.1.0"
 },
 "scripts": {
 "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
"package-win": "electron-packager . electron-tutorial-app --overwrite --asar --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\"",    
"package-linux": "electron-packager . electron-tutorial-app --overwrite --asar --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"
 }
}

请根据自己的需要自行调整，这时候只需要执行：

1
npm run package-mac
1
npm run package-win
1
npm run package-linux

生成安装文件

参见下一篇博文（尚未发布）

参考文章

本文是一篇翻译文章，并且对原文的错误进行了更正，原文是全英文，详见https://www.christianengvall.se/electron-packager-tutorial/