Javascript + Electron 开发桌面应用

一切能用 js 写的应用,最终都会用 js 来写。 – stack overflow 联合创始人 Jeff Atwood

伴随着蓬勃发展的 web 开发生态,原生桌面开发日渐凋零,混合了 web 技术栈与原生能力的 electron 应运而生,目前,大量跨平台客户端采用了这一解决方案,java 一次开发,到处运行的口号终于得以实现。

与原生 app 类似,electron 需要经历一个编译(将代码转换为可执行文件)的过程。使用 CODING 的持续集成,可以在代码更新的时候自动编译出安装包,方便测试与部署。

环境准备

与 web 开发不同,对于原生的可执行文件,需要经过操作系统的合法性验证才能安装。譬如分发至 macOS 的应用程序,只能在 mac 下进行签名,而 Windows 平台则无此限制,可在任意平台构建。由此考虑,选择在 macOS 下面一次性编译两个平台是效率最高的。

CODING 的 CI 支持第三方执行机功能,因此我们可以使用自己的 mac 电脑作为构建节点。

  • 一台运行 macOS 的电脑
  • Xcode
  • node
  • yarn

创建项目

图片

图片

使用脚手架工具初始化仓库代码

Electron 官方提供了一系列的脚手架及 CLI 工具帮助我们完成编译及开发的步骤,这篇文章就以官方提供的 electron-webpack-quick-start 脚手架演示持续集成的过程。

直接 clone 此仓库到本地:

git clone https://github.com/electron-userland/electron-webpack-quick-start.git

将本地仓库与远端的项目相关联,并推送代码到远端仓库。

git remote add origin git@e.coding.net:coding-public/electron-ci-demo.git
git push -u origin master

手工编译出二进制安装包并上传到制品库

我们首先来手工的完成一个一般软件工程的开发流程:开发 -> 部署 -> 测试。
由于原生应用给到测试团队的不能像 web 一样仅仅是一个链接,我们需要把打包好的安装包交付给测试部门,CODING 提供的制品库功能可以很方便的帮助我们做到这点,开发上传制品以后,测试只需要去项目中下载最新版本即可。

切换到此项目的根目录下, 使用 yarn 安装相关依赖。

图片

这个脚手架默认只编译出对应平台的安装包,为此我们需要修改 package.json 文件,让它编译的时候同时构建出 Windows 和 Mac 平台的安装包。

图片

修改完后,使用 yarn build 执行构建过程。

构建成功后,我们会看到多了一个 dist 文件,里面包含的 .dmg() 及 .exe(windows) 就是我们最终需要部署给客户的安装包。

图片

双击其中的 dmg 及(在 Windows 下)的 exe 文件,确保可以正常打开及安装。

图片

图片

图片

最后,我们可以将构建出来的安装包上传到团队的制品库里,方便测试及产品验收。

图片

图片

创建制品库之后,点击手工上传,上传 exe 文件及 dmg 文件。

图片

至此,我们的交叉编译过程结束,虽然成功的构建了安装包,但如果每次有改动都要手工的运行构建过程,并把构建出的安装包手工上传到制品库,未免略显繁琐,如果可以实现根据代码变更的自动化构建并将每次的构建结果存储起来,则可以解放开发的部分劳动,并实现构建内容的回退及追溯功能。

使用 CODING 持续集成

使用 CODING 持续集成,可以帮助我们很好的自动化这些重复的工作。我们需要做的只是编写好一次编译、测试脚本,或者 Jenkinsfile,那么之后我们只需要提交代码至远端,即可自动触发构建,并及时编译、测试,如果在期间发现代码有问题,CODING 持续集成还能及时通过多种形式通知到你,让你及时发现错误、改正错误,而不是等合并进 master 分支后才发现问题。

图片

图片

CODING 使用了 jenkins 作为 CI 服务,我们需要编排 jenkins 文件,把上面手工构建上传的过程翻译成对应的步骤。

图片

pipeline {
  agent any
  stages {
    stage('检出') {
      steps {
        checkout([
          $class: 'GitSCM',
          branches: [[name: env.GIT_BUILD_REF]],
          userRemoteConfigs: [[
            url: env.GIT_REPO_URL,
            credentialsId: env.CREDENTIALS_ID
          ]]])
        }
      }
      stage('构建') {
        steps {
          echo '构建中...'
          sh 'yarn'
          sh 'yarn dist'
          echo '构建完成.'
          sh 'mv ./dist/*.dmg build.dmg'
          sh 'mv ./dist/*.exe build.exe'
        }
      }
      stage('上传') {
        steps {
          codingArtifactsGeneric(files: '*.dmg', repoName: 'electron-build', credentialsId: '${env.CODING_ARTIFACTS_CREDENTIALS_ID}', withBuildProps: true, version: '${env.GIT_BUILD_REF}')
          codingArtifactsGeneric(files: '*.exe', repoName: 'electron-build', credentialsId: '${env.CODING_ARTIFACTS_CREDENTIALS_ID}', withBuildProps: true, version: '${env.GIT_BUILD_REF}')
        }
      }
    }
  }

目前 CODING 目前提供的云主机仅支持 Linux 系统,而我们的构建需要跑在 Mac 上,所幸 CODING 最近上线了第三方执行机功能,我们可以将自己的电脑作为构建节点,让 CODING 调度我们的电脑并使用本地的环境进行构建。

点击侧边栏持续集成中的构建节点选项,接入新节点。注意不要勾选使用 docker 运行构建节点。

图片

复制生成的命令到命令行里,初始化构建节点。
成功后运行

./cci-agent up -d

将构建服务开启在后台。

图片

确保第三方执行机上线之后,我们打开设置,修改节点池配置, 随后即可开始构建。

图片
图片
图片

我们可以看到,构建成功后制品库出现了两个以 build + commit hash 为名字的制品,这就是我们构建出来的安装包。

总结

现在,你已经掌握如何用 CODING CI 持续构建出 electron 应用程序啦,有需要 demo 源码的童鞋可点击源码

上一篇Java + GWT 快速构建应用
文档是否对您有用?
感谢反馈有用
感谢反馈没用