【译】Electron 打包完全指南

原文链接

打包Electron的应用程序意味着创建一个桌面安装程序（dmg，exe，deb等）。现在，如果你决定动手打包你的应用程序，你大概会有一段糟糕的经历。

幸运的是有一些模块，特别是下面提到的两个模块，使得任务变得简单。

electron-builder

electron-packager

接下来我们选用electron-builder，因为它具有对代码签名/自动更新等的内置支持。

用electron-builder的方式配置你的应用：

• 在项目的根目录下创建一个build文件夹，将作为MacOS的背景的background.png、MacOS图标的icon.icns以及Windows图标的icon.ico存到其中，Linux图标集将根据macOS自动生成。

  一个栗子：zulip-electron/build

• 通过npm命令将electron-builder作为项目的开发依赖：

npm install electron-builder --save-dev
复制代码

在electron-builder中，您可以使用两个或者一个package.json的结构。我们将使用单个package.json结构，因为它更易于维护。

一个 package.json 的示例

{
  "name": "yourappname",
  "version": "0.0.1",
  "license": "MIT",
  "description": "your app description",
  "author": "xyz <xyz@gmail.com>",
  "main": "./app/index.js",
  "scripts": {
    "postinstall": "install-app-deps",
    "start": "npm install && electron ./app",
    "pack": "build --dir",
    "dist": "build"
  },
  "build": {
    "appId": "yourappid",
    "category": "your.app.category.type",
    "dmg": {
      "contents": [
        {
          "x": 110,
          "y": 150
        },
        {
          "x": 240,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        }
      ]
    },
    "linux": {
      "target": [
        "AppImage",
        "deb"
      ]
    },
    "win": {
      "target": "squirrel",
      "icon": "build/icon.ico"
    }
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "latest",
    "electron-builder": "latest"
  }
}
复制代码

在Windows上，你也可以使用默认和electron-builder所推荐的NSIS作为目标。

"win": {
   "target": "NSIS"
}
复制代码

就这样，您已成功配置electron-builder。现在我们来构建安装程序。使用以下命令来打包你的应用：

npm run dist
复制代码

它将在**./dist**文件夹中创建一个安装程序。默认情况下，build命令只会生成当前平台和当前架构的安装程序。

• 在OSX上运行它将创建 -

$ npm run dist 
    |  -  mac 
    | |  -  appname-version-mac.zip 
    | |  -  appname-version.dmg 
    | |  -  appname.app
复制代码

• 在Windows上 -

# 使用Squirrel作为目标
$ npm run dist
    |-- win
    |   |-- REALESES
    |   |-- appnameSetupversion.exe
    |   |-- appname-version-full.nupkg
    |-- win-unpacked
# 使用NSIS作为目标
$ npm run dist
    |-- win
    |   |-- appnameSetupversion.exe
    |-- win-unpacked
复制代码

• 在Linux上 -

$ npm run dist 
    |  -  appname-version.AppImage 
    |  -  appname-version.deb 
    |  -  linux-unpacked
复制代码

electron-builder是高度可配置的。完整的用法请查看它的wiki。

zulip-electron（单个package.json）和onshape-desktop-shell（多个package.json）是一些使用electron-builder进行打包的真实项目。