使用electron開發桌面級小程式自動部署系統

2022-07-04 08:18:14 字數 2279 閱讀 2238

那一天我二十一歲,在我一生的**時代,我有好多奢望。我想愛,想吃,還想在一瞬間變成天上半明半暗的雲,後來我才知道,生活就是個緩慢受錘的過程,人一天天老下去,奢望也一天天消逝,最後變得像挨了錘的牛一樣。可是我過二十一歲生日時沒有預見到這一點。我覺得自己會永遠生猛下去,什麼也錘不了我。

現在是凌晨一點,可能是在夜裡的時候人會變得比較感性,所以突然想到了王小波在**時代中寫下的這段話,沒有理由的在這篇技術文章中將它作為引言。希望大家在自己的**時代永遠的生猛下去,什麼也錘不了你。

老賈是唐尼的智慧型管家,專案啟動的時候正值復聯四熱映,主要是為了紀念一下唐尼吧,在星期五和jarvis兩個名字中猶豫了好久,最後還是覺得jarvis比較酷一點,嗯,就是這麼隨意。

配置打包構建

切換分支

配置完基礎資訊後呼叫gitlabapi拉取該項目的分支和tag資訊,渲染到下拉列表選擇切換本地分支,同時在面板展示分支的基礎資訊,專案名稱、當前分支名稱、提交時間、提交描述、提交成員、提交id......

專案編譯

接下來需要填寫本次上傳的版本號和版本描述並選擇打包環境,然後進行專案構建。這裡選擇環境選擇的是需要打包專案的根目錄中的構建命令,比如我的小程式專案使用gulp構建,gulpfile中定義了四種打包命令,那麼在點選開始專案構建後,程式會自動切換到黑盒中的專案根目錄下執行對應命令並打包為dist檔案。

上傳整體使用vue-electron框架,分為五個大模組

.electron-vue——webpack配置目錄

此目錄下儲存著不同的webpack配置檔案,使用vue-loader、babel-loader、url-loader、vue-html-loader、post-css等外掛程式使專案成為支援解析.vue檔案,可使用高階js語法的現代化工程,並且會將開發目錄打包為標準的electron專案。

dist electron輸出目錄

通過webpack將專案打包為乙個electron的標準專案,輸出到dist目錄下,package.json將會以此目錄下的mian.js作為入口檔案進行執行。

src——開發目錄

src作為核心內容,包含三大部分main(electron主程序檔案目錄)、render(前端渲染層頁面——vue+element)、service(後端提供服務介面——express)。

main作為乙個橋梁的存在,鏈結著渲染層和服務端程序。其中service-main.js作為service中express的的啟動檔案匯出,並在main/index.js中與electron同時啟動,index.js為啟動electron的核心檔案,最後會被webpack編譯輸出到輸出目錄下——dist/electron/main.js

示例(關閉、放大、縮小)

這是vue定義的點選事件,通過傳送不同的引數與electron的mian進行互動。

main.js負責監聽通訊並執行動作

示例(解決打包後無法複製貼上的問題)

示例(實現分環境打包介面)

這裡需要注意一下,這個介面的實現是非常靈活的,需要根據你當前專案的編譯檔案進行配置,比如我的專案開發時使用gulp打包編譯環境到dist,其編譯命令分別為:

那麼同理,配置好dist輸出檔案目錄,收到請求後執行事先實現好的shell命令即可完成打包這一步,如果你不太了解環境編譯打包這塊內容,可以參考我之前的一篇文章"《武裝你的小程式——開發流程指南》";

**實現

1.解決辦法就是統一改成es6的方式編寫即可.import from './a'; export default a;

2.引入外掛程式transform-es2015-modules-commonjsyarn add babel-plugin-transform-es2015-modules-commonjs然後在 babelrc中配置

即可解決

腳手架的pacage.json有三個字段

你可以在這裡配置你的專案圖示。

當前專案已經可以在公司內部的生產環境中使用,但與內部專案耦合嚴重,不夠靈活,同時還有一些未知的問題和不足,我會在後續慢慢完善和優化,待解耦完成**足夠健壯的情況下我會選擇將專案**開源出來,下面列出我後續將要實現的功能。

專案管理器功能,可配置多個不同專案分別進行打包上傳。

高度自定義的配置資訊:gitlab的token、釘釘機械人的token、不同專案的打包執行指令碼、不同的環境配置。

支援自定義分支列表而不是一次全部拉取出來,這對一些擁有超多的分支大型專案來說是不靈活的。

除了介面的shell指令碼執行結果外打包後的驗證功能,可以通過讀取部分差異化檔案進行比對打包結果。

Electron初體驗 前端桌面應用開發

首先全域性安裝electron npm install electron g git clone cd electron quick start npm install npm start 這個倉庫給我們初始化了乙個electron專案,結構非常純淨,轉殖下來你就可以直接改造成自己的專案。將自己的專...

Electron開發入門

首先需要安裝nodejs。設定npm,npm config set registry 安裝electron可以有多種方式。第二種方式 通過npm安裝electron 官方入門指南 cd e mkdir electron git clone cd electron quick start npm in...

使用Electron開發PC客戶端

最近公司要求開發乙個pc客戶端,要求不能使用.net開發 為了不讓使用者安裝.net framework 所以就選擇了electron 隨口聽別人說了一句,之前從來沒有接觸過 目前專案要完畢了,所以就想記錄一下在開發過程中遇到的一些問題和開發過程中的一些思路。1.electron的介紹 3.pc客戶...