使用electron構建跨平臺Node.js桌面應用

最近，把團隊內常用的一個基於Node.js製做的小工具給作成了可視化操做的桌面軟件，使用的是 electron，這裏簡單分享一下使用 electron的一些經驗和心得。

1、如何使用electron把基本的開發環境給跑起來？

我是這麼處理的，electron官方提供了一個名爲「electron-quick-start」的示例項目，地址爲：https://github.com/electron/electron-quick-start

而後把相關資源給弄下來，若是你是下載Zip包解壓的，則資源默認都會放在一個名爲「electron-quick-start-master」的文件夾中，把「electron-quick-start-master」改爲你項目的名字，固然你不改也不要緊，就怕過段時間忘記，而後小手一抖，當作普通資源給刪掉了，到時候就男默女淚了。

而後安裝：

npm install

因爲安裝包比較大，因此-\/要轉好幾分鐘才能裝好。若是安裝不順利，試試換成使用淘寶NPM鏡像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

而後再這麼安裝：

cnpm install

而後啓動：

npm start

而後就會出現這樣的框框：

環境就這麼跑起來了。

Ctrl + R就能夠刷新。

2、electron開發該怎麼入手？

一旦環境跑起來，接下來的工做就跟作一個網頁幾乎就沒什麼區別，加載點CSS，圖片啊，JS什麼的，就能夠了。由於本質上，electron就是給你搞了一個Chrome瀏覽器的殼子，只是比傳統網頁多了一個訪問桌面文件的功能。

固然，具體操做並不可能像嘴皮子動的那麼簡單，前期仍是須要了解一些基礎知識。

咱們能夠重點關注一下上一節安裝好的開發環境的一些資源文件，主要是index.html, main.js和renderer.js，以下圖：

 

在我看來，若是咱們要開發的桌面應用只要不像QQ軟件那樣複雜，其實能夠徹底不用管main.js，main.js的做用就是用來顯示npm start後出現的那個窗口的，而咱們的工做只是窗口裏面內容，所以，main.js無需關心。

index.html是打開的窗口加載的頁面，能夠當作是入口頁面，就是一個普通的靜態頁面啊，沒什麼特殊的。

renderer.js默認裏面就一堆註釋，用來放業務相關JS的，和網頁JS的區別在於，這裏的JS不只能夠訪問DOM，還能使用Node.js全部的API。能前能後，想怎麼玩都行。

因此，咱們的工做思路就很清晰了：

 

先把咱們桌面應用的可視窗口界面給弄出來，這個就須要使用CSS和HTML代碼了。相比網頁開發而言，開發桌面應用要更輕鬆，由於根本不要考慮兼容性的問題，並且不少最新的chrome特性，均可以也很愉快的玩起來。咱們的CSS代碼能夠外鏈線上的資源，也能夠放到本地，也能夠直接內聯在頁面中，很是自由，很是隨意啊，均可以。我我的建議是放在本地的，由於就算斷網了咱們的桌面應用也能正常使用。

假設一番折騰，咱們的界面弄好了，相似這樣：

 

 

 

1. 接下來就是折騰交互了。

2. 交互效果開發和傳統web網站同樣，很自由，你喜歡jQuery，就用jQuery，你喜歡Vue，也可使用Vue等等，沒有什麼顧慮，就是幹！

   例如我給團隊作的這個桌面應用就是用的jQuery，最後應用跑得很暢快。

3. 藉助Node.js API或者其餘第三方的npm工具或者electron API開發咱們的應用。

   例如，引入Node.js API：

   const fs = require('fs');
   stat = fs.stat;
   
   const path = require('path');
   const url = require('url');

   引入第三方庫：

   const minify = require('html-minifier').minify;

   等等。

   例如我作這個桌面應用有須要選擇本地文件夾的功能，這個時候就須要藉助electron API，因爲咱們的業務JS都是寫在renderer.js中的，並不是主線程，所以，調用的使用要使用remote，例如：

   const electron = require('electron');
   
   const dialog = electron.remote.dialog;

   此時，咱們想要點擊按鈕打開系統的選擇文件夾彈框就能夠這麼處理：

   dialog.showOpenDialog({
       properties: ['openDirectory', 'createDirectory']
   }, callback);

   具體可參考electron API文檔，有中文版。

因而，簡簡單單的三步曲，咱們的桌面應用功能就開發好了，邏輯仍是之前Node.js工具的邏輯，多的僅僅是可視化的界面，以及參數是從輸入框等表單控件獲取。

開發的過程要比以前預估的要輕鬆得多，那種隨便怎麼玩都支持的感受真的很美妙。

3、electron開發好的應用該如何發佈？

electron桌面在本身的開發環境下跑起來了，跑通了，如讓其餘小夥伴也能方便快捷地使用呢？咱們的目標是windows系統下直接點擊個.exe文件，Mac OS X直接點擊.app文件就能夠跑起來，咱們的小夥伴無需再麻煩安裝一堆node modules。

咱們須要使用專門的打包工具，我是使用的electron-packager，首先全局安裝一下：

npm install electron-packager -g

而後就能夠執行打包了，例如：

electron-packager . bobo --out ../electron

這段語句表示的意思是把當前文件目錄下的資源（.）命名爲bobo打包到父級的electron文件夾。

此時electron-packager就會自動判別當前的操做系統打包對應的文件，例如windows系統下就會打包成.exe格式。

若是你想一次性把全部的操做系統都打包一遍，能夠在上面打包語句後面加上-all。

因爲打包的時候會把瀏覽器內核完整打包進去，因此就算你的項目開發就幾百k的資源，但最終的打包文件估計有40到50M。

而後有一點須要特別注意一下，若是你開發的桌面要有第三方的npm模塊依賴，則你打包好的運行文件不管是跑不起來的，有打包的時候並不會把第三方的npm模塊依賴也打不進去，須要本身手動複製進去。個人作法是把第三方依賴的npm模塊打包成一個名爲require-node_modules.zip文件夾，此時這個文件會一塊兒被打包帶走，一同被放在app文件夾下，具體路徑爲：

windows：\resources\app
OS X：顯示包內容 → \Contents\Resources\app

此時，只要直接解壓就可使用了。

補充於翌日
感謝@小小瘦杜的糾正，實際上，是能夠直接打包第三方的npm模塊的，就是安裝依賴的時候不要--save-dev。

4、electron發佈好的桌面應用如何有效升級？

咱們日常的桌面軟件要升級的話，通常都須要下載完整的安裝包。electron做爲桌面應用，彷佛也逃脫不了這種宿命，但實際上，在絕大部分場景下，咱們根本就無須要下載完整的安裝包，由於electron-packager打包的實際上是瀏覽器內核和主線程控制腳本，具體的業務代碼所有都是獨立在app文件夾下的，也就是說，只要咱們的桌面應用主線程邏輯不變，什麼UI樣式調整，什麼交互效果改變，什麼業務邏輯變動，咱們都只要更新app文件夾下的這資源就能夠了：

windows：\resources\app
OS X：顯示包內容 → \Contents\Resources\app

例如，咱們的renderer.js作了一些升級改動，此時咱們的小夥伴想要更新怎麼辦，無需再從新發佈一個安裝包，直接把app文件夾下renderer.js切換一下就行了，很是簡單和快捷。

甚至若是有精力的話，咱們桌面應用能夠作成自動檢測是否有版本更新以及在線升級，升級的內容就是CSS，HTML，image或者JS這些靜態資源。

 

5、結束語

有了electron，理論上全部基於的Node.js的工具均可以桌面化，例如，小圖標合併啊，圖片壓縮呀等等。

並且從本文的描述來看，基本上沒什麼難度，其實你們均可以搞一搞，由於對於設計師和小白開發人員而言，他們仍是更喜歡使用可視化的東西，這其實對於提升團隊效率仍是頗有幫助的，好比那個設計師作了一個圖片壓縮或者合成的可視化工具，人家天然是非常歡喜的。

好了，就這些，之後再想到什麼遺漏的再補充上去。