Electron折騰筆記

背景

部門的項目每次開發都須要手動開啓三個服務：server、webpack、grunt，每一個服務都要輸入一些東西（端口號，項目命，項目類型，啓動器名）。並且，在推送調試的時候，這三項服務很是容易被終止掉，而後又得一個個開起來，總之天天都要來上那麼10幾遍吧。看圖：

<!-- more -->

思考

若是能夠一鍵啓動三個服務，又能夠免去手動輸入參數豈不又多了點偷懶的時間？

功能

• 一鍵啓動、關閉項目開發過程當中須要開啓的三項服務

• 自動解析出服務運行所需的三個不一樣目錄，免去一個個手動輸入的麻煩

• 能夠保存配置，下次免配置

開工

由於想作成小軟件的形式，因此選用了Electron。如下是一些主要的思路和功能代碼記錄。

工具窗口

工具窗口部分，基本上用官網guide裏的代碼就足夠了

const electron = require("electron");
const {app, BrowserWindow, shell, ipcMain} = electron;
let win;
function createWdindow() {
    win = new BrowserWindow({ width: 400, height: 680,resizable:true,title: 'prensterTool',})
    win.loadURL(`file://${__dirname}/index.html`)
    win.on("close", () => {       
        win = null;
    });
}
app.on("ready", createWdindow);
// 當所有窗口關閉時退出
app.on('window-all-closed', () => {    
    // 在 macOS 上，除非用戶用 Cmd + Q 肯定地退出，
    // 不然絕大部分應用及其菜單欄會保持激活。
    if (process.platform !== 'darwin') {
        app.quit();
    }
});
app.on('activate', () => {
    // 在 macOS 上，當點擊 dock 圖標而且該應用沒有打開的窗口時，
    // 絕大部分應用會從新建立一個窗口。
    if (mainWindow === null) {
        createWindow();
    }
});

自定義菜單

const remote = require('electron').remote;
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;

var template = [
  {
    label: '配置',
    submenu: [
      { label: '從新配置', accelerator: 'CmdOrCtrl+shift+alt+r', click: function () { reset(); } },
      { label: '保存配置', accelerator: 'CmdOrCtrl+shift+alt+s', click: function () { saveSetting(); } }
    ]
  }
  // ……
];
var menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

保存配置信息

在工做目錄拖拽小工具上時，讀取文件目錄，本寫入配置文件，供後面的功能使用。
讀取文件路徑：

var file = e.dataTransfer.files[0];
presenterPath = file.path;
showInfo(presenterPath);

寫入配置文件

var data = `module.exports =` {projectName:"${projectName}",presenterId:"${presenterId}"}`;
  fs.writeFile("./resources/app/project_config.js", data, function (err) {
    if (err) {
      showInfo(err.toString());
      return;
    }

調用服務

調用服務部分，主要用到nodejs的子進程exec。

functon startServices(){
// webpack  
var processWebpack = childProcess.exec('webpack --watch', { 'cwd': `${__path}/presenters/SubjectToolSolution/${presenterId}/src` });
showLog('Webpack', processWebpack);
pids.push(processWebpack.pid);
// server
var processServices = childProcess.exec('node services', { 'cwd': __path });
showLog('Server', processServices);
pids.push(processServices.pid);
// grunt
var processGrunt = childProcess.exec('node gruntTask', { 'cwd': __dirname });
showLog('Grunt', processGrunt);
pids.push(processGrunt.pid);
}

踩坑

• Electron關閉的時候不會關閉node的子進程，因此，要手動關閉。
  開始作的時候，服務老是偶爾開啓成功，後面就不行了，非常詭異，查了一下午都無果，直到我無心中開了任務管理器，看到那一堆的node服務...

思路：開啓服務的時候把子進程的pid存起來，待後面kill.

var platform = process.platform;
function killTask() {
  try {
    if (platform === 'win32') {
      for (let pid of pids) {
        childProcess.exec('taskkill /pid ' + pid + ' /T /F');
      }
      pids = [];
    } else {
      for (let pid of pids) {
        process.kill(processServices.pid);
      }
      pids = [];
    }
  } catch (e) {
    showInfo('pid not found');
  }
  domLog.innerHTML = "";
  showInfo("服務已中止!");
  clearInterval(timerId);
}

• Electron打包完以後，代碼裏的path變了，要手動處理下，不知道是否是姿式不對？

ELectron打包

關於打包的問題，官網的文檔看的我真是一臉懵逼，知乎專欄的這篇文章不錯，能夠參考下https://zhuanlan.zhihu.com/p/...

• 步驟

1. 安裝electron-packager：

   ```npm install --save-dev electron-packager```

2. package.json裏添加打包命令：

   "scripts": {
    "start": "electron .",
    "package": "electron-packager ./ app --win --out presenterTool --arch=x64 --version 1.3.4 --overwrite --ignore=node_modules" 
     }

3. 執行：
   npm run-script package

• 參數

  electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

  location of project:應用目錄;

name of project:應用名稱;
platform:要打包的平臺;
architecture: x86 or x64架構;
electron version:electron 版本(不是應用版本);
optional options:其它選項;
​

• 第一次打包會下載相應的包，時間比較久

• 記得打包參數裏寫上overwrite，否則後面打包時不會從新構建。

最後，上一張初步完成以後的運行圖：

[博客原文] http://yohnz.github.io/2016/0...