配置|electron+vue+ts+sqlite的配置方法

從編程模型的角度來說，使用聲明式語言聲明樣式和布局，使用功能完備的編程語言編寫業務邏輯，算是GUI程序的一種最好的實踐了。

最近要寫一個個人項目，于是我自然想到使用前端來寫界面。通過electron就能使用前端技術開發桌面端程序。它實際上就相當于內嵌了一個webkit瀏覽器核心，只是做了些裁剪和優化。

此外，前端框架使用我所熟悉的vue，無論是界面代碼還是核心代碼都采用typescript編寫，它的靜態類型系統很強大，綜合了靜態語言和動態語言的優點。

<!--more-->

初始化配置

初始化vue和typescrpt

npm install --global @vue/cli
# 2. 創建一個新工程，并選擇 "Manually select features (手動選擇特性)" 選項
vue create idocumentation

勾選上typescript，其它的按需勾選。

Vue CLI v3.0.0-rc.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, Linter
? Use class-style component syntax? No # 是否使用class風格的組件定義
? Use Babel alongside TypeScript for auto-detected polyfills? (Y/n)Yes
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files # 分離配置文件

這樣，vue腳手架就自動幫你初始化好typescript + vue項目的結構了，可以進去看一看。

TSLint會對代碼的格式和規范做檢查，幫你規范格式，同時也會幫助你避免不好的習慣帶來的bug。
不過默認的配置有點嚴格，這可以修改tslint.json來做到，下面是我的配置：

 "rules": {
 "quotemark": [false, "single"],
 "indent": [true, "spaces", 2],
 "interface-name": false,
 "ordered-imports": false,
 "object-literal-sort-keys": false,
 "no-consecutive-blank-lines": false,
 "eofline": false,
 "prefer-const": false,
 "no-console": false,
 "trailing-comma": false,
 "max-classes-per-file": false
 }

如果你覺得某個檢查太嚴了，可以關掉，具體的字段參考這里： https://palantir.github.io/ts...

安裝配置electron

首先安裝：

npm install -g electron # 全局安裝方式
npm install electron # 本地安裝方式 推薦

然后編寫electron主進程的入口代碼，這里有個參考，將它放在項目根目錄的main.js中：
https://github.com/electron/e...

注意到其中有一行：

mainWindow.loadFile('index.html')

這是electron啟動時加載的前端頁面文件，當然，也可以讓electron改為從url加載，就像用瀏覽器打開一樣：

mainWindow.loadURL('http://localhost:8080');

一般的工作流是，使用vue的開發服務器啟動vue的開發服務器，vue開發服務器會監聽在8080端口。
該服務器會監聽文件系統事件，當修改了項目代碼后，它會重新編譯、打包。

所以，開發時，讓electron從vue的開發服務器加載主頁面，則開發起來更方便。

最后在package.json下加入：

"main": "main.js",
// ...
 "scripts": {
 "electron": "node node_modules/electron/cli.js ."
 },

其中，main字段指定項目的入口文件，也就是剛才編寫的main.js。

scripts配置的含義是，當在終端運行 npm run electron時，會執行：

node node_modules/electron/cli.js .

這段代碼會

調試

首先，在終端里執行：

npm run serve

它會啟動vue的調試服務器，一般監聽的是8080端口。不過，這個服務器比較智能，如果發現8080被占用會主動換端口。如果和electron搭配使用時調試的時候要注意這一點。

如果這個時候在瀏覽器打開http://127.0.0.1:8080也能正常訪問，但是最好還是要在electron中調試。因為electron項目可能涉及到操作系統相關庫的調用如fs，使用瀏覽器是不支持的。

其次，終端再開一個tab，執行：

npm run electron

如果一切順利，electron的GUI就正常打開了！

打包配置

但是，上面的配置還有一些問題。我們來看vue項目的流程：

1. 首先你編寫的vue項目被vue的開發服務器檢測到

2. 開發服務器會將其編譯、打包

3. electron訪問vue開發服務器，拿到網頁和代碼，類似瀏覽器一樣

4. 網頁和代碼在electron環境里渲染、執行

那么，如果一個庫要想正常使用，需要滿足：

1. vue的開發服務器打包時需要將該庫打包進來

2. electron環境中需要支持該庫的運行

然而，默認的vue打包配置是針對瀏覽器的，不會也沒有必要把操作系統相關的庫給打包進來，如果這時直接調用fs等庫，會出錯。
解決方案是修改webpack的配置，編輯vue.config.js，內容為：

module.exports = {
 configureWebpack: {
 target: "electron-renderer"
 }
}

sqlite配置方案

electron項目中引入sqlite真的是一種折磨！啊啊啊啊！配置出了問題，代碼都沒法寫，寫了也沒法運行。
搞了我一下午的時間，目前我還沒有完全解決這個問題，如果誰有好的方案請告訴我，謝謝！

問題一

目前引入sqlite會遇到兩個問題。
第一個問題則是sqlite由于是C編寫的，安裝時會遇上編譯、鏈接的問題。
如果直接：

npm i --save sqlite

那么你引入sqlite包時，肯定會報錯。因為electron無法調用sqlite的native二進制庫。

問題二

即使你解決的了問題一，這還沒完，還有一個更大的問題。

前面說過vue程序代碼是需要被webpack編譯、打包的，然而webpack打包并不能打包native模塊，像sqlite這種的。

這里提到，這不是bug，這是feature：https://github.com/mapbox/nod...

可能的解決方案

方案一

是不行的！你還需要將sqlite的二進制庫文件鏈接到electron的二進制文件上去，對的，就像你配置C或C++程序那樣恐怖。好在有現成的工具，執行：

npm i --save-dev electron-rebuild
./node_modules/.bin/electron-rebuild

它會重新編譯鏈接electron。至于能不能成功，看運氣吧。
我在Windows下嘗試了下，一會說需要python環境，一會網絡鏈接又不行要下什么預編譯包，總之事情很多。

后來在linux環境下嘗試了，成功了。之后在electron的主進程里，也就是前面說的main.js入口文件中，嘗試了下發現可以使用。

方案二

方案一解決了問題一。那么還有問題二沒有解決。
我們梳理下現在手上的問題：

1. sqlite庫能夠在electron主進程運行。

2. sqlite庫由于webapck的原因無法在渲染進程中運行。

那么，一種很自然而然的想法是，讓實際的sqlite調用在主進程執行，渲染進程通過IPC方式和主進程通信。
如果把這種過程封裝起來，即渲染進程中調用某個包裝類來調用sqlite3，而包裝類會將對應的調用信息通過IPC發送給主進程，主進程真正調用sqlite3模塊來完成操作。
這種方式封裝了就是遠程過程調用（RMI）了，如果需求不高也可以不封裝。

方案三

方案三則是用其它的替代思路了。有一個叫做sql.js的庫，也能夠操作sqlite。
這個庫很有意思，它純粹用js實現的。怎么做到的？性能能好嗎？
準確的說不是js。這個庫不是手寫的代碼，它是使用Emscripten將sqlite的C語言實現編譯成asm.js。
而asm.js是一個js的嚴格子集，模型上和C更能對應上去，一旦js引擎發現運行的是asm.js，就跳過語法分析直接轉為匯編語言。

但是它有幾個缺點：

1. 只能操作內存中的數據庫，無法操作文件系統

2. 性能和原生實現的sqlite相比，很顯然，不高

如果在electorn中要拿它暫時用一用，則需要把數據庫完全讀入到內存中操作。處理不好，內存會爆炸的。

好在我這里需要用的sqlite只是存存元數據，幾十k大小，還是能勉強用用到。先臨時用這個頂上，封裝一層，寫后續的代碼。前端和node發展很快，等以后有人弄出easy的解決方案了，再切換回sqlite模塊。

方案四

方案四則是看看能不能改下項目的技術選型，要不換個其它的嵌入式數據庫？

最后

electron的優點在于大大降低了開發成本，本身前端的方式開發界面就是一種良好的實踐的，而前端蓬勃發展的今天又有大量的框架和組件庫可供直接調用。
記得大學里寫過GTK和Qt的圖形界面，對比之下，傳統的Qt寫界面非常麻煩費事，而且也遠遠沒有前端漂亮，動態性也差一大截。

不過electron的缺點在于打包后體積太大，而且運行性能不高。不過一般的場景中，這點缺點問題不大。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com