【译】Electron 打包完全指南

7,341 阅读2分钟

原文链接

打包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进行打包的真实项目。