從 1 到完美，用 js 和 electron 寫一個(gè)桌面應(yīng)用
目前用 js 和前端技術(shù)寫桌面軟件的方案主要有兩種：electron 和 nw.js。這兩者在底層實(shí)現(xiàn)上有所不同，簡單的說，electron 是 node + chromium，nw.js 是 node + webkit。從使用上來說，electron 的使用更為廣泛，社區(qū)也更活躍，有一大批成熟的商用軟件，像 vscode, atom等。所以，現(xiàn)在一般推薦使用 electron 來寫桌面軟件。
1. 選擇合適的組件庫和工具庫
electron 社區(qū)多年的積累，已經(jīng)有很多成熟的第三方組建庫和工具庫幫助你輕松的構(gòu)建桌面應(yīng)用，提高開發(fā)效率，避免重復(fù)造輪子。
組件庫是用來幫助你書寫程序的邏輯或者UI：
- electron-store: 保存應(yīng)用數(shù)據(jù)，比如數(shù)據(jù)緩存，應(yīng)用配置等
- electron-context-menu: 創(chuàng)建右鍵菜單功能
- menubar: 創(chuàng)建狀態(tài)欄視圖
- photon: 一套快捷的組件庫
- electron-log: 日志記錄
工具庫是用來幫助你構(gòu)建程序：
- electron-builder: 創(chuàng)建應(yīng)用的安裝文件(win: exe, linux: deb, mac: dmg 等)
- devtron: 官方的 chromium DevTools 插件
- electron-packager: 把應(yīng)用打包成一個(gè)可運(yùn)行文件(win: exe, linux: deb, mac: dmg 等，非安裝文件)
- spectron: electron 應(yīng)用的測試工具
- electron-devtools-installer: 確保 electron 開發(fā)相關(guān)的 chromium DevTools 插件的安裝
更多可以參考 electron community.
2. 選擇合適的模板
社區(qū)有很多現(xiàn)成的模板，里面封裝好了各種工具，打包成應(yīng)用，創(chuàng)建安裝文件等一系列功能，使用者只需要關(guān)注怎么編寫應(yīng)用，而不需要關(guān)心工具及各個(gè)命令的實(shí)現(xiàn)及原理。
- 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.
如果你需要擴(kuò)展功能，可以更改相關(guān)的配置文件。
3. 開發(fā)應(yīng)用與運(yùn)行命令
以 electron-react-boilerplate 為例。
web部分是以 react + redux + react-router + redux-thunk + react-redux，構(gòu)建工具部分是以 webpack + babel + eslint + stylelint + prettier + flow + enzyme
另外，它封裝了開發(fā)工具主要為以下幾個(gè)命令：
3.1 dev 開發(fā)調(diào)試命令
npm run dev
這個(gè)命令將會(huì)運(yùn)行一個(gè) electron 應(yīng)用實(shí)例，然后在本地開啟一個(gè)本地 server 服務(wù)，當(dāng)你編寫渲染進(jìn)程代碼，本地 server 服務(wù)會(huì)自動(dòng)刷新頁面，而不需要關(guān)閉應(yīng)用重新運(yùn)行命令。
3.2 start 以發(fā)布模式啟動(dòng)應(yīng)用
npm run start
與開發(fā)調(diào)試命令不同的是，它不會(huì)開起本地 server 服務(wù)，也不會(huì)監(jiān)聽文件變動(dòng)，而是會(huì)像發(fā)布的應(yīng)用一樣運(yùn)行。這個(gè)一般在發(fā)布之前運(yùn)行，查看應(yīng)用的運(yùn)行情況。
3.3 package 打包應(yīng)用為安裝文件
# 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. 應(yīng)用實(shí)例
image-viewer 便是使用 electron-react-boilerplate 模板開發(fā)的一個(gè)圖片瀏覽器應(yīng)用。
5. 后續(xù)
更多博客，查看 https://github.com/senntyou/blogs
版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）
