基于 electron-vue 的桌面應(yīng)用打包應(yīng)用
https://github.com/HuaRongSAO/electron-share

應(yīng)用截圖

app.png

持續(xù)集成

travis-ci
appveyor

實(shí)踐

vol.1 最簡(jiǎn)單的 dome

官方實(shí)例： electron-quick-start

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

function createWindow() {
  // 創(chuàng)建窗口
  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 的應(yīng)用

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 的應(yīng)用

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 版本發(fā)布

• 進(jìn)入項(xiàng)目倉(cāng)庫(kù)的releases 界面

• 創(chuàng)建草稿版本

• p2.png
• p3.png

• 版本號(hào)管理依賴于 package.json

vol.5 持續(xù)集成

用于提交代碼后自動(dòng)觸發(fā)構(gòu)建鉤子，自動(dòng)打包 mac，linux 和 window 應(yīng)用程序，并且自動(dòng)發(fā)布到 github 的 release

mac 和 linux 構(gòu)建：travis
window 構(gòu)建：travis

當(dāng)使用 electron-builder 配置時(shí)，項(xiàng)目還提供了用于自動(dòng)部署的 appveyor.yml 和 .travis.yml。兩個(gè)配置文件都被設(shè)置好了用于構(gòu)建你的 electron 應(yīng)用，并將生成的程序推送到 GitHub 的發(fā)布頁(yè)面、Bintray 等。Travis CI 用于構(gòu)建 linux 和 darwin (macOS)，而 AppVeyor 用于構(gòu)建 win32。

接下來(lái)講講具體配置的時(shí)候遇到的問(wèn)題。

• 在 Travis CI 或 AppVeyor 上創(chuàng)建一個(gè)帳戶
• 創(chuàng)建倉(cāng)庫(kù)關(guān)聯(lián)
• 訪問(wèn) https://github.com/settings/tokens 并點(diǎn)擊 生成新令牌 (Generate new token)

• 勾選權(quán)限 repo 全部

  
  
  p.png
• 拿到 github 訪問(wèn) token =》 3274aaedc4ca3614d897988d376da359dab38457
  ,請(qǐng)找個(gè)地方先保存下來(lái)，后面會(huì)用到多次

travis 配置 ( 構(gòu)建 linux 和 mac 系統(tǒng)應(yīng)用)

方案一：

• 登入 travis 在項(xiàng)目的設(shè)置里面配置 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

• 修改項(xiàng)目根目錄下的.travis.yml
• 添加如下:

env:
  global:
    - secure: "asdasdasdasdasdasdasdsadasdsadas23"

還有一個(gè)小點(diǎn)，配置打包的鉤子的運(yùn)行次數(shù)和間隔

DeepinScrot-2912.png

appveyor 配置( 構(gòu)建 window 系統(tǒng)應(yīng)用)

方案一：

• 進(jìn)入appveyor, 打開(kāi) setting=》environment=》添加 GH_TOKEN = token

a1.png

方案二：

• 進(jìn)入AppVeyor Token 加密頁(yè)面,加密你的 token
• 配置項(xiàng)目下的配置文件 appveyor.yml

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

vol.6 配置 package.json 發(fā)布推送

• 打開(kāi) package.json
• 配置 electron-builder，詳情請(qǐng)看

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

• 參數(shù)"--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 后續(xù)發(fā)布

• 修改文件系統(tǒng)
• 創(chuàng)建 github 的 releases 草稿
• 修稿 package.json 的 version
• 提交

完成。
淺嘗輒止。