前言

在本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.”

接下来是安装的代码:

# 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版本的时候是不需要手动添加的,仅需在项目目录下输入下述命令:

npm install --save-dev electron

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

{
"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生成打包的可执行软件。

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

MacOS软件示意

Windows

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

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

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文件如下格式:

{
"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"
}
}

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

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

生成安装文件

参见下一篇博文(尚未发布)

参考文章

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