Electron Vue：被玩

前言

其實我應該要更早寫文章的……但我自己寫的靜態文章問題很多，反而累死自己。看來沒有一條輕鬆路啊。

不管了先講講最近的開發吧。

那個叫嘟嘟的公司

嘟嘟軟件（Archive）是個很久以前就倒掉的軟體公司。看來他們沒撐到中國的網路產業爆發期吧。其中一個他們寫的軟體，就是「嘟嘟美食菜谱」。

最近我在電腦裡，找到了「嘟嘟美食菜谱」這個軟體。這裡不得不說 Windows 很厲害，十幾年前的軟體，到了當年完全不存在的作業系統還能跑；但網站就不好了：嘟嘟軟件的網站早就荒廢十幾年了。

這時我無意發現，嘟嘟美食菜谱的菜單，是用 HTML 技術呈現的。再從 EXE 檔裡面抓東西看看，果然裡面有個 XML 檔案，裡面的內容都在那邊。我這時就在想：「乾脆用現代的 HTML 技術接接看吧？」

所以……就這樣現啦。

GUI & HTML

說起 HTML 技術呈現的軟體，怎麼能不提到 Electron 呢？加上我既然會寫 Vue，自然會考慮這款。

我有看過其他語言的圖形介面構建軟體：要寫圖形介面軟體的話，當然用該作業系統的語言最方便（如 Windows 就是 C#、macOS 則是 Swift）。不過……我不想在我的電腦裡面放 Visual Studio 那麼肥大的軟體（苦笑）、我也不是想在其他語言的 library 搞很多東西：像是我在 wxPython 折騰了大概半小時後，決定放棄。最後，我就選定 Electron 了。

NW.js 也是很有趣的軟體，但我之前開發過了，現在就給 Electron 機會吧。

Electron & Nightmare

但選好了 Electron 才是惡夢的開始……

vue init simulatedgreg/electron-vue gui-hw

我複製的是 simulatedgreg/electron-vue 專案。一句話：**不要複製這個模板！作者已經沒有更新了！**過程且聽我到來：

一開始就發現 procress：首先一啟動就是 ReferenceError: process is not defined 丟給我。後來才發現要改 src/index.ejs 那邊：

<!-- Before -->
<% if (!process.browser) { %>
    <script>
        if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    </script>
<% } %>

<!-- After -->
<% if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) { %>
    <script>
        window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    </script>
<% } %>

接下來我發現 Vue 的開發工具也有問題：好像一直會出現警告視窗，但我也找了很久、卻沒什麼好辦法。

Abandonware & Abandonware

查了一下 devDependencies 那邊，我驚恐地發現 electron 太老舊了：人家都到 v10 了，但這個版本卻還在 v2！所以，我決定用 ncu 來看看有哪些該更新：一看不得了，有 40~50 多個套件要更新！

「那就先更新關鍵的軟體吧……」我這麼想著，卻發現這麼多軟體，更新起來也是錯誤一堆：完全弄不懂哪些要更新、哪些問題出在哪裡、如何解決之類的問題。就在我漸漸厭倦解決問題時，發現 electron-vue 有些 issue 在討論軟體更新的問題：

#1027
#1026

我看了血吐上天：原來作者已經不更新好久了！幹！

但我能說什麼？

不仔細看更新狀態、又沒辦法更新軟體，然後就被玩活該啊。

唉，只好再試試 vue-cli-plugin-electron-builder 吧。

TL;DR

不要使用 simulatedgreg/electron-vue 這個模板！作者已經沒有更新了！
抓人家的軟體前，要檢查軟體的更新與開發狀態。除非你能明確限定它的用途、或是能搞定更新問題。
開發軟體還是要用順手的。
ncu 在偵測軟體更新上很好用。