從 1 到完美，用 js 和 electron 寫一個桌面應用

從 1 到完美，用 js 和 electron 寫一個桌面應用

目前用 js 和前端技術寫桌面軟件的方案主要有兩種：electron 和 nw.js。這二者在底層實現上有所不一樣，簡單的說，electron 是 node + chromium，nw.js 是 node + webkit。從使用上來講，electron 的使用更爲普遍，社區也更活躍，有一大批成熟的商用軟件，像 vscode, atom等。因此，如今通常推薦使用 electron 來寫桌面軟件。

1. 選擇合適的組件庫和工具庫

electron 社區多年的積累，已經有不少成熟的第三方組建庫和工具庫幫助你輕鬆的構建桌面應用，提升開發效率，避免重複造輪子。

組件庫是用來幫助你書寫程序的邏輯或者UI：

• electron-store: 保存應用數據，好比數據緩存，應用配置等
• electron-context-menu: 建立右鍵菜單功能
• menubar: 建立狀態欄視圖
• photon: 一套快捷的組件庫
• electron-log: 日誌記錄

工具庫是用來幫助你構建程序：

• electron-builder: 建立應用的安裝文件(win: exe, linux: deb, mac: dmg 等)
• devtron: 官方的 chromium DevTools 插件
• electron-packager: 把應用打包成一個可運行文件(win: exe, linux: deb, mac: dmg 等，非安裝文件)
• spectron: electron 應用的測試工具
• electron-devtools-installer: 確保 electron 開發相關的 chromium DevTools 插件的安裝

更多能夠參考 electron community.

2. 選擇合適的模板

社區有不少現成的模板，裏面封裝好了各類工具，打包成應用，建立安裝文件等一系列功能，使用者只須要關注怎麼編寫應用，而不須要關心工具及各個命令的實現及原理。

• electron-react-boilerplate: electron + react + redux
• electron-vue: electron + vue
• electron-boilerplate: electron

更多能夠參考 https://github.com/search?o=desc&q=electron+boilerplate&s=stars&type=Repositories.

若是你須要擴展功能，能夠更改相關的配置文件。

3. 開發應用與運行命令

以 electron-react-boilerplate 爲例。

web部分是以 react + redux + react-router + redux-thunk + react-redux，構建工具部分是以 webpack + babel + eslint + stylelint + prettier + flow + enzyme

另外，它封裝了開發工具主要爲如下幾個命令：

3.1 dev 開發調試命令

npm run dev

這個命令將會運行一個 electron 應用實例，而後在本地開啓一個本地 server 服務，當你編寫渲染進程代碼，本地 server 服務會自動刷新頁面，而不須要關閉應用從新運行命令。

3.2 start 以發佈模式啓動應用

npm run start

與開發調試命令不一樣的是，它不會開起本地 server 服務，也不會監聽文件變更，而是會像發佈的應用同樣運行。這個通常在發佈以前運行，查看應用的運行狀況。

3.3 package 打包應用爲安裝文件

# create installer for linux&win&mac.
npm run package-all

# create installer only for linux.
npm run package-linux

# create installer only for win.
npm run package-win

# create installer only for mac.
npm run package-mac

4. 應用實例

image-viewer 即是使用 electron-react-boilerplate 模板開發的一個圖片瀏覽器應用。

5. 後續

更多博客，查看 https://github.com/senntyou/blogs

做者：深予之 (@senntyou)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）