electron-builder 的使用

所有 electron-builder 生成的文件都可以在 build 文件夹中找到。

构建

  1. npm run build

构建未打包的目录

生成简单的可执行文件,没有完整的安装程序。用于快速测试。

  1. npm run build:dir

默认的构建配置

可以在 package.json 中使用基于 electron-builder各种选项 进行进一步定制。

  1. "build": {
  2. "productName": "ElectronVue",
  3. "appId": "org.simulatedgreg.electron-vue",
  4. "dmg": {
  5. "contents": [
  6. {
  7. "x": 410,
  8. "y": 150,
  9. "type": "link",
  10. "path": "/Applications"
  11. },
  12. {
  13. "x": 130,
  14. "y": 150,
  15. "type": "file"
  16. }
  17. ]
  18. },
  19. "directories": {
  20. "output": "build"
  21. },
  22. "files": [
  23. "dist/electron",
  24. "node_modules/",
  25. "package.json"
  26. ],
  27. "mac": {
  28. "icon": "build/icons/icon.icns"
  29. },
  30. "win": {
  31. "icon": "build/icons/icon.ico"
  32. },
  33. "linux": {
  34. "icon": "build/icons"
  35. }
  36. }

使用 CI 的自动化部署

当使用 electron-vue 的 electron-builder 配置时,本项目还提供了用于自动部署的 appveyor.yml.travis.yml。两个配置文件都被设置好了用于构建你的 electron 应用,并将生成的程序推送到 GitHub 的发布页面、Bintray 等。Travis CI 用于构建 linuxdarwin (macOS),而 AppVeyor 用于构建 win32。这两项服务都是免费的 OSS 项目。

设置 Travis CI 和 AppVeyor

  1. Travis CIAppVeyor 上创建一个帐户
  2. 链接到你 electron-vue 项目的 GitHub 仓库
  3. 访问 https://github.com/settings/tokens 并点击 生成新令牌 (Generate new token) (同样的令牌可用于 Travis CI 和 AppVeyor 二者)
    1. 设置一个 令牌描述 (Token description)
    2. 检查 public_repo 的范围
    3. 点击 生成令牌 (Generate token)
  4. 复制你的新令牌并保存以备以后使用
  5. 打开 Travis CI 或 AppVeyor 上的仓库设置选项,添加一个新的 环境变量 (Environment Variable)
    1. 将变量的名称设置为 GH_TOKEN
    2. 将变量的值设置为刚刚创建的 GitHub 的访问令牌
    3. 保存 (Save) 新变量并确保加密措施已启用

现在,所有的事情应该都配置完毕了。Travis CI / AppVeyor 在默认情况下会监测到任何到你的 master 分支的推送。推送完毕后,Travis CI / AppVeyor 将克隆你的仓库到其服务器并开始构建过程。在最后阶段,electron-builder 可以看到环境变量 GH_TOKEN,并创建一个发布草稿,并将生成的程序上传到你公共的 GitHub 仓库上。现在,你可以编辑发布草稿,然后发布出去。发布了发行版后,通过更新你的 package.json,你可以确保将来的版本标上新版本号。

自动更新

启用你应用程序自动更新的接收选项是一个超级好用的功能,但要知道你必须要有 代码签名 (Code Signing)。你可以根据 这里 描述的 electron-builder 需求来添加更多的环境变量用于设置代码签名。安装证书后,你可以安装 electron-updater 并注释掉 src/main/index.js 底部的代码以启用自动更新。

如果你像大多数人一样,并且没有花哨的代码签名证书,那么你可以随时使用 GitHub API 来检查新的软件发布。当检测到新版本时,你的应用程序会提供一条通知,导向用户可以下载并安装新版本的下载页面。由于 electron-builder 提供的了不起的安装程序,用户无需卸载当前版本,新的安装将替代旧的版本,同时仍然保留任何 Web 存储或 userData 文件。