• electron-builder 的使用
    • 构建
    • 构建未打包的目录
  • 默认的构建配置
  • 使用 CI 的自动化部署
    • 设置 Travis CI 和 AppVeyor
    • 自动更新

    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 CI 或 AppVeyor 上创建一个帐户
    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 文件。