找回 Electron 回來學習

對於一個已經發展有一段時間的專案,越來越沒有能夠簡單測試的項目。所以謂的簡單測試,指的是單純使用重整或是 API 要求就能夠驗證的東西。用程式開發的角度來說,就是要測試的東西「並非純函數」,總是會相依一些東西或操作。

因為使用帳號的不同,或是服務選項的改變,回傳的結果也會有相應的改變。這是再正常不過的事情,麻煩的地方是在驗證的時候,常常要進行一連串包含登入在內的操作,才能讓服務中,帳號當下的「狀態」變成測試需要的樣子。一旦修改服務的程式,服務重啟後,同樣的行為又要再來一次。

不複雜的流程下還能接受,只是在調整不熟悉程式的過程中,隨著需要不斷的微調 – 重啟測試 – 定位問題 – 再微調 的過程中。那些與測試目標無關的行為(包函登入),就會吃掉許多工作時間。影響到開發時間是一回事,容易讓開發者不耐煩造成許多 bug 出現的狀況更需要避免。所以想要作個簡單測試工具,把一些常見的流程自動化,所以想了一想,把早期曾經用過一小陣子的 electron 技術出來重新學習。

學習了一兩天,就雖然說不上是滿滿的挫折,但是還是讓人覺得筋疲力竭。會懷疑自己是不是真的算是用過 Node.js 開發過東西,以它維生的人。一切的東西都讓人覺𠊚很漠生,不知道該從何下手,怎麼找到解決問題最短的路徑。

首先是語法上的選擇,一開始本來只想開發一個可以在 command line 環境使用的程式,所以使用 node.js 直接能夠使用的語法,跳過 babel 轉譯讓單元測試比較不需額外的設定,這個選擇在當時是沒有什麼問題的。只不過當加入 electron 之後,GUI 的顯示是網頁,網頁 js 開發的主流是靠 webpack 進行打包,能夠直接轉譯 node.js 不直接支援的 import, export 語法。

加上目前工作上使用的是 Vue.js 框架,對於 *.vue 的編譯是跑不掉的。雖然自己多少會一點直接使用純 js 來定義 vue 元件,不過那太花時間了。無論是自己刻介面,是以純 js 定義 vue 元件都是我不想作的(太花費時間)。最後再加上打算使用 Vuex 來管理資料,進行 electron 前後端資料的串接,所以拿別人框架來搭功能,成為不得不作的事情。

webpack 是一個滿神奇的東西,曾經花費了的我許多的時間在學習,卻總是讓我感到模糊,有許多未知的機制後背後神奇的運作。有許多我不知道的好用(或難用)外掛被開發出來。設定檔案的格式每一代都有些不同,許多舊時間的經驗變得不可用,得花上許多時間才能找到對的資源解決問題。(因為得先排除掉許多舊版本的資源)

使用樣板(template)會好一點嗎?也不見得,使用 vue-cli 協助我的建立一個 electron + vue 環境,結果發現程式跑不起來。查了一查的發現 copyWebpackPlugin 的設定格式變了,造成設定參數檢查不通過,中斷後續的流程。花了好一陣子找到新格式並進行改寫,才把一個簡單的 hello world 程式執行起來。

但是測試發佈程式的時候又出了問題,花了一些時間才發現原因,既有的 node.js 模組只能支援 32位元的 mac app ,而之前 mac OS 已經要求全系統都該改採 64 位元了,因些再一次中斷了流程。這次提心吊膽的把 electron-builder 模組升到最新版本,好險沒有出現和既有模組不相容的問題(因為次版號前進 2 版,怕流程大改),算是順利發佈出 mac app 。

還沒開始開發商業邏輯的部分,開發環境也造成了我一些困擾。使用 vue-cli 建立專案的時候,想試著練習寫出「好看」的程式碼,所以選擇 eslint 的標準規則,但是它的設定與目前在使用 vs code 自動格式化程式碼的外掛不一致。導致要是我不注意按到了格式化後沒有即時改成,編譯就會跳出一大堆格式錯誤,同樣中斷後面的流程。只是單單因為行尾被多加了「;」、「,」或是空白的數量多了 2 個,或多一層縮進。

因為框架和模組的發展快速,一些作者認為更好的作法也被引入。累積起來就讓我這種曾經用過,但好一陣子沒有追踪改變的開發者很不適應,感覺好像每一個環節都有可能出錯,都有可能得停下來花大量的時間精力去排除不相容的問題,或是一些必要的程式及設定升級工作。這種得不斷中斷開發思緒的狀況一再發生,煩燥的情緒一直累積。

還不用說 npm 現在會檢查 module 是否有版本過舊,或不安全的狀況。一次「npm i」執行完,看到一些不認得的模組有問題,會擔心一處理下去,又是一連串相容情的問題得面對。一整個沒完沒了。

最後說回來,程式還是得開發,新東西還是得學。只能再投入更多的時間去了解,掌握到多一點其中的開發想法、原則。讓自己能夠在這些停不下來的變動中,能夠用更少一點的時間脫離相容困境,把多一點時間發展自己的程式。