记录一次electron开发和持续集成

基于 electron-vue 的桌面应用打包应用
https://github.com/HuaRongSAO/electron-share

应用截图

app.png

持续集成

travis-ci
appveyor

---

实践

vol.1 最简单的 dome

官方实例： electron-quick-start

const { app, BrowserWindow } = require("electron");
let mainWindow;

function createWindow() {
  // 创建窗口
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  // 加载窗口html文件
  mainWindow.loadFile("index.html");
  mainWindow.on("closed", function() {
    mainWindow = null;
  });
}
app.on("ready", createWindow);

app.on("window-all-closed", function() {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", function() {
  if (mainWindow === null) {
    createWindow();
  }
});

只需把你的打包后的文件直接替换就行了，例如其他的 Vue,React，angular 打包后的文件，js mainWindow.loadFile("index.html");的 index.html 改成你的文件地址。

vol.2 electron-vue 基于 vue 的应用

electron-vue 充分利用 vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如 vue-router、vuex 等等。

文档： 官方文档

使用：

    # Install vue-cli and scaffold boilerplate
    npm install -g vue-cli
    vue init simulatedgreg/electron-vue my-project

    # Install dependencies and run your app
    cd my-project
    yarn # or npm install
    yarn run dev # or npm run dev

vol.3 electron-react-boilerplate 基于 react 的应用

A Foundation for Scalable Cross-Platform Apps

文档： 官方文档

使用：

    # git clone
    git clone --depth 1 --single-branch --branch master https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name

    cd your-project-name
    yarn
    yarn dev

vol.4 配置 github 的 releases 版本发布

• 进入项目仓库的releases 界面

• 创建草稿版本

• 

  p2.png
• 

  p3.png

• 版本号管理依赖于 package.json

vol.5 持续集成

用于提交代码后自动触发构建钩子，自动打包 mac，linux 和 window 应用程序，并且自动发布到 github 的 release

mac 和 linux 构建：travis
window 构建：travis

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

接下来讲讲具体配置的时候遇到的问题。

• 在 Travis CI 或 AppVeyor 上创建一个帐户
• 创建仓库关联
• 访问 https://github.com/settings/tokens 并点击 生成新令牌 (Generate new token)

• 勾选权限 repo 全部

  
  
  

  p.png
• 拿到 github 访问 token =》 3274aaedc4ca3614d897988d376da359dab38457
  ,请找个地方先保存下来，后面会用到多次

travis 配置 ( 构建 linux 和 mac 系统应用)

方案一：

• 登入 travis 在项目的设置里面配置 GH_TOKEN, GH_TOKEN 就是你上面的 token
• 

  p.png

方案二：

• 安装 travis 加密工具 travis.rb
• 加密 token ==> asdasdasdasdasdasdasdsadasdsadas23

    # 安装 Travis CI 命令行工具
    gem install travis
    # 加密 Personal Access Token
    travis encrypt -r iissnan/theme-next-docs GH_TOKEN=token

• 修改项目根目录下的.travis.yml
• 添加如下:

env:
  global:
    - secure: "asdasdasdasdasdasdasdsadasdsadas23"

还有一个小点，配置打包的钩子的运行次数和间隔

DeepinScrot-2912.png

appveyor 配置( 构建 window 系统应用)

方案一：

• 进入appveyor, 打开 setting=》environment=》添加 GH_TOKEN = token

a1.png

方案二：

• 进入AppVeyor Token 加密页面,加密你的 token
• 配置项目下的配置文件 appveyor.yml

environment:
    access_token:
        secure: # 自己的加密token

vol.6 配置 package.json 发布推送

• 打开 package.json
• 配置 electron-builder，详情请看

•   "postinstall": "electron-builder install-app-deps",
    "publish": "electron-builder --publish onTagOrDraft"
  

• 参数"--publish onTagOrDraft",onTagOrDraft：存在草稿或者 tag 替换，可选 onTag，onTagOrDraft，always，never
• 然后配置 .travis.yml和appveyor.yml的 build 脚本，

.travis.yml

    script:
    - yarn run build
    - npm run publish

appveyor.yml

    build_script:
    - yarn build
    - npm run publish

保存推送。

vol.7 后续发布

• 修改文件系统
• 创建 github 的 releases 草稿
• 修稿 package.json 的 version
• 提交

完成。
浅尝辄止。