electron-利用node開發桌面應用

簡介

web前端語言的發展有目共睹, 從原來的pc web, 到后來的mobile SAP, 再到 nodejs,全站工程師應運而生. js快速而且穩健的發展讓人不得不重視, 相應的前端開發人員的地位也越來越高, 越來越多的人願意投入到前端的陣營里去. 而桌面app向來是web前端開發開發人員下意識的避開方向. 但是依然不乏有憧憬的人.於是借助於webkit內核和nodejs,出現了web移動app解決方案和web桌面app的解決方案. 而我們需要做的就是利用熟悉的前端語言借助大拿們的工具,愉悅的開發就好了.

Electron的前身是atom-shell, 是github目前比較出名的Atom編輯器的一個兄弟項目,它是一個借助nodejs和Chromium, 利用HTML/CSS/JavaScript語言創建桌面應用的一個工具. 與之類似的還有一個微軟的工程師搞的NW.js, 原理基本相同. 但是個人感覺可能Electron更新更好一些,社區發展也更熱鬧些.

具體的說明,大家可以去參考官方的中文文檔

下面邊操作邊摘一些環境安裝以及打包的基礎:

運行環境

一旦你創建了最初的 main.js， index.html 和 package.json 這幾個文件，你可能會想嘗試在本地運行並測試，看看是不是和期望的那樣正常運行。

electron-prebuilt

electron-prebuilt 是一個 npm 模塊，包含所使用的 Electron 預編譯版本。首先全局安裝：

npm install -g electron
//npm官方安裝electron我老遇到問題,建議使用cnpm安裝(后面所有的安裝的時候如果出現問題就盡量使用cnpm)，首先要安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g electron

然后你只需要按照如下方式直接運行你的應用：

electron .

如果你是局部安裝，那運行：

./node_modules/.bin/electron .

如果你手工下載了 Electron 的二進制文件，你也可以直接使用其中的二進制文件直接運行你的應用。

Windows

$ .\electron\electron.exe your-app\

Linux

$ ./electron/electron your-app/

macOS

$ ./Electron.app/Contents/MacOS/Electron your-app/

Electron.app 里面是 Electron 發布包，你可以在這里下載到。

web應用結構

大體上，一個 Electron 應用的目錄結構如下：

your-app/
    ├── package.json
    ├── main.js
    └── index.html

package.json的格式和 Node 的完全一致，並且那個被 main 字段聲明的腳本文件是你的應用的啟動腳本，它運行在主進程上。你應用里的 package.json 看起來應該像：

{
"name"    : "your-app",
"version" : "0.1.0",
"main"    : "main.js"
}

注意：如果 main 字段沒有在 package.json 聲明，Electron會優先加載 index.js。由於環境基於node,所以你的js可以使用任何node模塊.

main.js 應該用於創建窗口和處理系統事件,具體請參考官方的demo或者文檔.

應用部署(官方版本)

方法一替換已有應用的資源文件

為了使用 Electron 部署你的應用程序，你存放應用程序的文件夾需要叫做 app 並且需要放在 Electron 的資源文件夾下（在 macOS 中是指 Electron.app/Contents/Resources/，在 Linux 和 Windows 中是指 resources/）就像這樣：

在 macOS 中:

electron/Electron.app/Contents/Resources/app/
    ├── package.json
    ├── main.js
    └── index.html

在 Windows 和 Linux 中:

electron/resources/app
    ├── package.json
    ├── main.js
    └── index.html

然后運行 Electron.app （或者 Linux 中的 electron，Windows 中的 electron.exe）, 接着 Electron 就會以你的應用程序的方式啟動。electron 文件夾將被部署並可以分發給最終的使用者。

方法二 asar打包

除了通過拷貝所有的資源文件來分發你的應用程序之外，你可以通過打包你的應用程序為一個 asar 庫文件以避免暴露你的源代碼。

為了使用一個 asar 庫文件代替 app 文件夾，你需要修改這個庫文件的名字為 app.asar ，然后將其放到 Electron 的資源文件夾下，然后 Electron 就會試圖讀取這個庫文件並從中啟動.

在 macOS 中:

electron/Electron.app/Contents/Resources/
    └── app.asar

在 Windows 和 Linux 中:

electron/resources/
    └── app.asar

如何打包呢?

官方提供的打包原理是將web目錄打包成一個asar,Electron 可以無需解壓，即從其中讀取任意文件內容。asar 包中的內容不可更改，所以 Node APIs 里那些可以用來修改文件的方法在對待 asar 包時都無法正常工作。

安裝 asar

$ npm install -g asar

用 asar pack 打包

$ asar pack your-app app.asar

使用 asar 包

在 Electron 中有兩類 APIs：Node.js 提供的 Node API 和 Chromium 提供的 Web API。這兩種 API 都支持從 asar 包中讀取文件。

#nodejs 從 asar 包讀取一個文件：
const fs = require('fs')
fs.readFileSync('/path/to/example.asar/file.txt')

#nodejs 使用 asar 包中的一個模塊：
require('/path/to/example.asar/dir/module.js')

#webapi
<script>
var $ = require('./jquery.min.js');
$.get('file:///path/to/example.asar/file.txt', function(data) {
console.log(data);
});
</script>

更詳細的說明,請參考官方文檔

更換名稱與下載二進制文件

在使用 Electron 打包你的應用程序之后，你可能需要在分發給用戶之前修改打包的名字。

Windows

你可以將 electron.exe 改成任意你喜歡的名字，然后可以使用像 rcedit 編輯它的 icon 和其他信息。

macOS

你可以將 Electron.app 改成任意你喜歡的名字，然后你也需要修改這些文件中的 CFBundleDisplayName， CFBundleIdentifier 以及 CFBundleName 字段。這些文件如下：

Electron.app/Contents/Info.plist
Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist

你也可以重命名幫助應用程序以避免在應用程序監視器中顯示 Electron Helper，但是請確保你已經修改了幫助應用的可執行文件的名字。

一個改過名字的應用程序的構造可能是這樣的：

MyApp.app/Contents
    ├── Info.plist
    ├── MacOS/
    │   └── MyApp
    └── Frameworks/
        ├── MyApp Helper EH.app
        |   ├── Info.plist
        |   └── MacOS/
        |       └── MyApp Helper EH
        ├── MyApp Helper NP.app
        |   ├── Info.plist
        |   └── MacOS/
        |       └── MyApp Helper NP
        └── MyApp Helper.app
            ├── Info.plist
            └── MacOS/
                └── MyApp Helper

Linux

你可以將 electron 改成任意你喜歡的名字。

應用部署(插件版本-推薦)

除了使用官方提供的方法外,很多第三方的模塊也可以完成該打包過程.並直接生成各系統的安裝文件。比較常用的是 electron-packager 和 electron-builder. 通過npm安裝后直接可以使用命令生成安裝包和運行包, 簡直太方便了. 不過可能需要對package.json做一些簡單的配置.下面會分開說說.

electron-packager

electron-packager可以將項目打包成各平台可直接運行的程序，比如app,exe等。打包出來的程序至少100M,這是跨平台工具無法避免的通病。善用ignore參數，排除程序運行不必要的包。

安裝

cnpm install -g electron-packager

打包命令

electron-packager <sourcedir> <sourcedir> --platform= <platform> win32,darwin --arch=all --electronVersion=1.6.10 --out=dist/ --overwrite --ignore=node_modules/electron-* --ignore=node_modules/.bin --ignore=.git --ignore=dist --prune
#*<sourcedir> ： 項目的位置
#*<sourcedir> ： 應用名
#*--out <out> ： 指定輸出的目錄
#*--electronVersion=<version> ： 指定編譯的 electron-prebuilt 版本，可以使用前面prebuid安裝的版本，查看命令  electron -h 
#--platform=<platform> ： 打包的系統(darwin、win32、linux)
#--arch=<arch> ： 系統位數(ia32、x64)
# --icon=<icon> ： 指定應用的圖標(Mac 為 .icns 文件，Windows 為 .ico 或 .png)

下面是一個例子：

electron-packager . hello ../ --electronVersion 1.6.10 --overwrite

electron-builder

與electron-packager不同，electron-builder是直接將項目打包成安裝文件，比如，dmg,exe,msi.os系統，只能打包dmg文件，window系統才能打包exe，msi文件。打完包后基本不小於40兆。

安裝

npm install electron-builder
#或者
cnpm install electron-builder

安裝之后,全局的話則可以使用cli命令build(這名起的真讓人難受),局部安裝則使用node_modules/.bin/build來調用命令生成壓縮包,運行包和安裝包. 具體的參數可以參考官方文檔或者使用 build --help來查看

配置package.json

配置文件中必須的幾項為, name, description, version and author. 同時你要帶上electron-builder專用的配置鍵build,要求的鍵值appId和編譯針對的系統平台參數,具體配置詳情點擊這里,下面是一個簡單的示例:

{
"name": "helloworld",
"version": "0.1.0",
"author":"awen",
"description":"test",
"main": "main.js",
"build": {
    "appId": "com.electron.awen.hello",
    "copyright":"awen",
    "productName":"測試",
    "dmg":{
      "background":"build/background.png",
      "icon":"build/icon.icns",
      "window":{
        "x":100,
        "y":100,
        "width":500,
        "height":300
      }
    },
    "mac": {
     "category": "public.app-category.developer-tools",
     },
    "squirrelWindows":{
      "iconUrl":"https://github.com/favicon.ico"
     },
    "win": {
        "icon": "icon.ico"
    }
}
}

圖標和背景

在web根目錄下建一個build文件夾,里面來放圖標和背景圖片,當然也可以在package.json中自己配置(官方推薦使用目錄,但是個人傾向於配置文件),說明如下:

webRoot
    └──build
        ├──background.png  (mac的DMG安裝文件打開后的背景)
        ├──icon.icns  (mac的圖標文件)
        ├──icon.ico  (windows的圖標文件)
        └──icons (linux的圖標文件,也可以省略直接繼承mac的圖標文件)
            └──32x32.png

最后打包

弄好你的環境之后你可以執行以下build --help中的示例生成三平台的程序,初次執行會下載對應平台的electron包.

build -mwl

多平台打包依賴

編譯多平台的包時,你需要安裝一些依賴,當然還是希望在不同平台下打包。因為下面這種方式兼容性並沒有想象中的好:

MacOS

#MacOS上編譯windows:
brew install wine --without-x11
brew install mono
#MacOS上編譯linux:
brew install gnu-tar graphicsmagick xz
#如果需要生成rpm
brew install rpm.

Linux

sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils

#生成rpm: 
sudo apt-get install --no-install-recommends -y rpm

#生成pacman: 
sudo apt-get install --no-install-recommends -y bsdtar

#Linux上編譯windows:
##安裝(wine1.8+)
sudo add-apt-repository ppa:ubuntu-wine/ppa -y
sudo apt-get update
sudo apt-get install --no-install-recommends -y wine1.8
##安裝mono(4.2+)
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF
echo "deb http://download.mono-project.com/repo/debian wheezy main" | sudo tee /etc/apt/sources.list.d/mono-xamarin.list
sudo apt-get update
sudo apt-get install --no-install-recommends -y mono-devel ca-certificates-mono

#64位機器上編譯32位的包
sudo apt-get install --no-install-recommends -y gcc-multilib g++-multilib

Windows

使用 Docker