摘要:讀取文件路徑寫入配置文件調(diào)用服務(wù)調(diào)用服務(wù)部分,主要用到的子進(jìn)程。最后,上一張初步完成之后的運(yùn)行圖博客原文
背景
部門的項(xiàng)目每次開發(fā)都需要手動(dòng)開啟三個(gè)服務(wù):server、webpack、grunt,每個(gè)服務(wù)都要輸入一些東西(端口號(hào),項(xiàng)目命,項(xiàng)目類型,啟動(dòng)器名)。而且,在推送調(diào)試的時(shí)候,這三項(xiàng)服務(wù)非常容易被終止掉,然后又得一個(gè)個(gè)開起來,總之每天都要來上那么10幾遍吧。看圖:
如果可以一鍵啟動(dòng)三個(gè)服務(wù),又可以免去手動(dòng)輸入?yún)?shù)豈不又多了點(diǎn)偷懶的時(shí)間?
功能一鍵啟動(dòng)、關(guān)閉項(xiàng)目開發(fā)過程中需要開啟的三項(xiàng)服務(wù)
自動(dòng)解析出服務(wù)運(yùn)行所需的三個(gè)不同目錄,免去一個(gè)個(gè)手動(dòng)輸入的麻煩
可以保存配置,下次免配置
開工因?yàn)橄胱龀尚≤浖男问?,所以選用了Electron。以下是一些主要的思路和功能代碼記錄。
工具窗口工具窗口部分,基本上用官網(wǎng)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); // 當(dāng)全部窗口關(guān)閉時(shí)退出 app.on("window-all-closed", () => { // 在 macOS 上,除非用戶用 Cmd + Q 確定地退出, // 否則絕大部分應(yīng)用及其菜單欄會(huì)保持激活。 if (process.platform !== "darwin") { app.quit(); } }); app.on("activate", () => { // 在 macOS 上,當(dāng)點(diǎn)擊 dock 圖標(biāo)并且該應(yīng)用沒有打開的窗口時(shí), // 絕大部分應(yīng)用會(huì)重新創(chuàng)建一個(gè)窗口。 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);保存配置信息
在工作目錄拖拽小工具上時(shí),讀取文件目錄,本寫入配置文件,供后面的功能使用。
讀取文件路徑:
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; }調(diào)用服務(wù)
調(diào)用服務(wù)部分,主要用到nodejs的子進(jìn)程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關(guān)閉的時(shí)候不會(huì)關(guān)閉node的子進(jìn)程,所以,要手動(dòng)關(guān)閉。
開始做的時(shí)候,服務(wù)總是偶爾開啟成功,后面就不行了,很是詭異,查了一下午都無果,直到我無意中開了任務(wù)管理器,看到那一堆的node服務(wù)...
思路:開啟服務(wù)的時(shí)候把子進(jìn)程的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("服務(wù)已停止!"); clearInterval(timerId); }
Electron打包完之后,代碼里的path變了,要手動(dòng)處理下,不知道是不是姿勢(shì)不對(duì)?
ELectron打包關(guān)于打包的問題,官網(wǎng)的文檔看的我真是一臉懵逼,知乎專欄的這篇文章不錯(cuò),可以參考下https://zhuanlan.zhihu.com/p/...
步驟
安裝electron-packager:
```npm install --save-dev electron-packager```
package.json里添加打包命令:
"scripts": { "start": "electron .", "package": "electron-packager ./ app --win --out presenterTool --arch=x64 --version 1.3.4 --overwrite --ignore=node_modules" }
執(zhí)行:
npm run-script package
參數(shù)
electron-packager
location of project:應(yīng)用目錄;
name of project:應(yīng)用名稱;
platform:要打包的平臺(tái);
architecture: x86 or x64架構(gòu);
electron version:electron 版本(不是應(yīng)用版本);
optional options:其它選項(xiàng);
?
第一次打包會(huì)下載相應(yīng)的包,時(shí)間比較久
記得打包參數(shù)里寫上overwrite,不然后面打包時(shí)不會(huì)重新構(gòu)建。
最后,上一張初步完成之后的運(yùn)行圖:
[博客原文] http://yohnz.github.io/2016/0...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/90961.html
摘要:場(chǎng)景目前公司的測(cè)試環(huán)境還是由開發(fā)來搭建和部署的。沒網(wǎng),我就做個(gè)離線版的工具唄。調(diào)研選型技術(shù)目前我了解到使用前端技術(shù)做桌面應(yīng)用有和以及著三種神器。好了,多說無用,來預(yù)覽一下我們的小工具吧默認(rèn),就是最新的要提測(cè)的包。更新于年月日已入手。 場(chǎng)景 目前公司的測(cè)試環(huán)境還是由開發(fā)來搭建和部署的。這種做法是極其不科學(xué)的。所以那種部署啊什么的重復(fù)性的操作還是做個(gè)工具讓測(cè)試自己去部署好了。先來預(yù)覽一下工...
前言 根據(jù)公司業(yè)務(wù)需求,使用 electron 開發(fā)桌面 BrowserWindow 應(yīng)用。 參考 API:Electron 文檔 安裝與配置 安裝工具 node(LTS版)git 命令行工具 搭建項(xiàng)目 初始化: $ npm init 安裝 electron: $ npm install electron --save-dev 軟件打包 安裝打包工具: $ npm install --save...
摘要:基于的跨平臺(tái)筆記軟件為什么自從工作之后我開始進(jìn)行筆記記錄這是一個(gè)很棒的習(xí)慣我曾經(jīng)使用過麥庫等都是一些不錯(cuò)的筆記軟件但是都有一些各式各樣的問題不能滿足我的使用年我用編寫了第一款筆記軟件支持和富文本編輯器但是沒有云同步功能年我用和編寫了一個(gè)編輯 GitNote 基于 Git 的跨平臺(tái)筆記軟件 為什么 自從工作之后,我開始進(jìn)行筆記記錄,這是一個(gè)很棒的習(xí)慣.我曾經(jīng)使用過 EDiary Ever...
摘要:有部分前端人員使用的是盜版的。非編程相關(guān)其它一些我使用的,但與編程關(guān)系不大的正版工具。尊重別人,更是尊重自己做為一個(gè)程序員,使用正版,我認(rèn)為這不是自做清高的事情,這是對(duì)自己職業(yè)的一種基本尊重。 ...
摘要:你們說能不能就用的開發(fā)模式來實(shí)現(xiàn)客戶端啊這樣版版版就都有了。有道云筆記可能就是最貼近我們想法的產(chǎn)品,有客戶端,有版。這個(gè)項(xiàng)目由發(fā)起和維護(hù)。 最近一個(gè)多月一直在用 AngularJS 做公司的一個(gè)項(xiàng)目(還沒有做完),我之前主要是用 PHP 開發(fā)服務(wù)端的,AngularJS 也是現(xiàn)學(xué)現(xiàn)賣,整個(gè)過程還是比較有意義的,覺得很有必要寫篇文章記錄一下。 緣起 事情是這樣的……我們團(tuán)隊(duì)的產(chǎn)品是一款 ...
閱讀 1200·2023-04-25 17:05
閱讀 3024·2021-11-19 09:40
閱讀 3579·2021-11-18 10:02
閱讀 1752·2021-09-23 11:45
閱讀 3035·2021-08-20 09:36
閱讀 2795·2021-08-13 15:07
閱讀 1145·2019-08-30 15:55
閱讀 2476·2019-08-30 14:11