一：前世今生
Electron-----------------小名 Atom Shell
按照字面意思來說滤蝠，electron直譯為 “電子”揪漩，是 GitHub開發(fā) Atom 編輯器時(shí)配套開發(fā)的技術(shù)框架，現(xiàn)在已經(jīng)成為一款專業(yè)的利用 Web 前端技術(shù)去開發(fā)一個(gè)桌面的客戶端產(chǎn)品開發(fā)框架舵稠。
二：這個(gè)東西網(wǎng)站也可以為什么需要客戶端词渤？
既然 Electron 是用 Web 技術(shù)寫客戶端，那么看上去 Electron 要做的事瓷翻，可以搬到網(wǎng)站上，為什么還要搬到客戶端，這里有3個(gè)角度的回答：
- 用戶角度： 客戶端是一款獨(dú)立的軟件逻悠，其綜合體驗(yàn)一般都是比網(wǎng)站高的元践，尤其是涉及到「工具」范疇的應(yīng)用，此外童谒，特定的用戶群體也會(huì)有類似的使用習(xí)慣
- 發(fā)行方角度： 客戶端是另一種產(chǎn)品形式，是一種產(chǎn)品的分發(fā)方式和入口沪羔，客戶端可以實(shí)現(xiàn)很多 本地應(yīng)用獨(dú)有的需求去觸達(dá)用戶饥伊，也能提供更加可靠的服務(wù)
- 開發(fā)角度： 終于.......不用考慮瀏覽器兼容了，對(duì)于開發(fā)來說蔫饰，終于跳出了瀏覽器的沙盒琅豆，你可以自己去控制 Electron 中的「瀏覽器」，莫名的開心篓吁，開發(fā)麻煩小茫因，功能更強(qiáng)大，脫發(fā)少
三：背后的男人和女人
它是建立在「Chromium」和「Node」之上的杖剪，Chromium負(fù)責(zé)界面冻押，它能夠滿足你使用出先進(jìn)的css以及js特性，Node負(fù)責(zé)背后的邏輯盛嘿，Node 這個(gè)大生態(tài)下的模塊洛巢，Electron 也都可以用，這減少了很多造輪子的時(shí)間次兆，這就是典型的「你負(fù)責(zé)貌美如花稿茉，我負(fù)責(zé)賺錢養(yǎng)家」。
而對(duì)于前端開發(fā)來說芥炭，「不要和老夫說什么 C++漓库，Java，老夫行走江湖就一把 JS园蝠，遇到需求就是干」渺蒿。前端開發(fā)可以用自己熟悉的方式去寫應(yīng)用界面，邏輯部分也還是 JS砰琢，如果你精通 Node 后端蘸嘶，那后端也可以插一腳，「鳥槍換大炮」陪汽，你開發(fā)客戶端的能力有一種「忽如一夜春風(fēng)來」的感覺训唱。
四：技術(shù)實(shí)現(xiàn)
理解 Electron 最重要應(yīng)該就是理解主進(jìn)程（Main Process）和渲染進(jìn)程（Render Process）了。理解了這兩者挚冤，其他內(nèi)容花費(fèi)些時(shí)間查查API文檔即可况增。主進(jìn)程連接著操作系統(tǒng)和渲染進(jìn)程，可以把它看做頁面和計(jì)算機(jī)溝通的橋梁训挡。渲染進(jìn)程就是我們所熟悉前端環(huán)境了澳骤。只是載體改變了歧强，從瀏覽器變成了window。傳統(tǒng)的web環(huán)境我們是不能對(duì)用戶的系統(tǒng)就行操作的为肮。而electron相當(dāng)于node環(huán)境摊册，我們可以在項(xiàng)目里使用所有的node api 。官方地址颊艳，Electron 并不是很復(fù)雜茅特，在寫完不多的主進(jìn)程代碼后，其他的業(yè)務(wù)代碼幾乎和 Web 應(yīng)用沒什么區(qū)別棋枕。
簡單理解：
- web項(xiàng)目套上一個(gè)node環(huán)境的殼
- 相比web項(xiàng)目白修，桌面項(xiàng)目多了一個(gè)進(jìn)程
五：Electron的對(duì)手NW.js
NW和Electron框架的優(yōu)劣眾說紛紜，由于作者的水平有限重斑，不作說明兵睛。從開發(fā)角度來說，選擇用 nw.js 還是 election 窥浪，區(qū)別其實(shí)不是很大祖很。倆著的開發(fā)工作還是在自己的 前端交互邏輯上面。倆著的APP都會(huì)跑兩部分的js runtime寒矿，分別是node-runtime和chromium-runtime突琳。
NW.js（node-webkit）* : NW比electron生的早，誕生于微軟符相，有很多的知名桌面應(yīng)用都是基于NW拆融，比如微信的開發(fā)者工具，釘釘桌面版啊终，微信小程序IDE等等镜豹。基于NW的應(yīng)用入口是index.html蓝牲，NW.js將自己的功能都整合進(jìn)了chromium-runtime趟脂，因此更接近一個(gè)前端的應(yīng)用開發(fā)方式，像一個(gè)跑在node-platform上的瀏覽器例衍。
其實(shí)NW的electron和NW.js主要代碼貢獻(xiàn)者和維護(hù)者都是同一個(gè)人昔期，他在微軟實(shí)習(xí)的時(shí)候的對(duì)NW做出的代碼貢獻(xiàn)，而后來轉(zhuǎn)職進(jìn)入GitHub之后對(duì)electron做出代碼貢獻(xiàn)佛玄。我們拋去關(guān)于NW這部分插曲不說硼一，NW和electron之間的相互聯(lián)系其實(shí)還是很緊密，畢竟主要維護(hù)者都是同一人梦抢。
六：快速開始electron
七：搭一個(gè)架子
這個(gè)架子主要包括加入技術(shù)React+Redux+Antd般贼，然后自定義標(biāo)題欄，
1.React創(chuàng)建一個(gè)項(xiàng)目其實(shí)很繁瑣，因?yàn)樗昧薐SX哼蛆，所以需要配置Babel蕊梧、webpack or Browserify
不過好在官方提供了一個(gè)工具 Create React App，可以非常簡單快速的創(chuàng)建React 項(xiàng)目腮介，并且提供了熱調(diào)試環(huán)境肥矢。詳細(xì)參考官方文檔
簡單的來說，Create React App 創(chuàng)建了一個(gè)React的項(xiàng)目模版叠洗、配置橄抹，并且提供了一些很方便的腳本命令用于調(diào)試和部署React前端程序。
整合Electron和React
Create React App創(chuàng)建的項(xiàng)目是一個(gè)純前端項(xiàng)目惕味，整合React項(xiàng)目和Electron并且保留熱調(diào)試和本地包引用需要以下幾個(gè)簡單的操作
需要在React項(xiàng)目的根目錄（不是src目錄）創(chuàng)建Electron的啟動(dòng)文件main.js（前文中有詳細(xì)內(nèi)容）
在React項(xiàng)目中的package.json文件中增加main字段，值為 "./main.js"
修改main.js 中的win.loadURL玉锌，改為
win.loadURL(url.format({
pathname: path.join(__dirname, './build/index.html'),
protocol: 'file:',
slashes: true
}))
到目前為止名挥，在根目錄下運(yùn)行 electron .就可以啟動(dòng)React創(chuàng)建的桌面應(yīng)用了。
但是還有幾個(gè)問題
資源文件顯示不出來主守，在調(diào)試面板出現(xiàn)找不到文件的錯(cuò)誤提示
每次都要 npm run build 后才能看到修改項(xiàng)
無法獲得系統(tǒng)包禀倔，例如用 os.cpus()無法得到系統(tǒng)cpus信息。
注意的幾點(diǎn)
默認(rèn)情況下参淫，homepage是 http://localhost:3000 ,build后救湖，所有資源文件路徑都是／static，而Electron調(diào)用的入口是以file：協(xié)議涎才，/staitc就會(huì)定位到系統(tǒng)的根目錄去鞋既，所以找不到靜態(tài)文件。在package.json文件中添加homepage字段并設(shè)置為"."后耍铜，靜態(tài)文件的路徑就變成了相對(duì)路徑邑闺，就能正確的找到了。
