Electron
使用 JavaScript, HTML 和 CSS 構(gòu)建跨平臺的桌面應(yīng)用。Electron通過將Chromium和Node.js合并到同一個運行時環(huán)境中并將其打包為Mac，Windows和Linux系統(tǒng)下的應(yīng)用來實現(xiàn)這一目的。
Chromium
Chromium是由Google主導(dǎo)開發(fā)的網(wǎng)頁瀏覽器。以BSD許可證等多重自由版權(quán)發(fā)行并開放源代碼，Chromium的開發(fā)可能早自2006年即開始。Chromium 是 Google 的Chrome瀏覽器背后的引擎，其目的是為了創(chuàng)建一個安全、穩(wěn)定和快速的通用瀏覽器。
如何搭建？
electron-forge
Electron Forge 是一個用來構(gòu)建現(xiàn)代化Electron應(yīng)用的完善的工具。 Electron Forge將多個現(xiàn)有的（ 且有穩(wěn)定維護的 ）Electron構(gòu)建工具整合為一個簡單易用的工具包，所有人都可以用它來快速地搭建Electron開發(fā)環(huán)境。
Forge 將一些流行框架整合為“開箱即用”的模板，比如：React、Vue、Angular等。 Forge 的一些核心模塊來自于上層的Electron社區(qū)（比如electron-packager），因而Electron主要維護人員（比如說Slack）提交的Electron更新也會使Forge的用戶受益。
關(guān)于Forge的更多信息，請查閱electronforge.io。
electron-react-boilerplate
如果你不希望任何工具，而想要簡單地從一個模板開始構(gòu)建，CT Lin的 electron-react-boilerplate 可能值得一看。 它在社區(qū)中很受歡迎，并在內(nèi)部使用了 electron-builder。
搭建的方式有很多，以下為我個人做法：
搭建一個electron結(jié)合react、Webpack的項目,首先搭建一個react+Webpack的項目，配置好webpack.config.js，確保可以正確運行調(diào)試。（這里省略如何搭建react+Webpack項目）
在項目中安裝electron
npm install electron -save-dev
安裝完成后，在項目根目錄下新建main.js，為electron的啟動文件。(可直接從https://github.com/electron/electron-quick-start中復(fù)制過來)
Electron 運行 package.json 的 main 腳本的進程被稱為主進程。 在主進程中運行的腳本通過創(chuàng)建web頁面來展示用戶界面。 一個 Electron 應(yīng)用總是有且只有一個主進程。
修改main.js文件，修改mainWindow.loadURL ，這里為了方便調(diào)試，直接將路徑修改為localhost服務(wù)地址。
mainWindow = new BrowserWindow(windowOptions)
// mainWindow.loadURL(path.join('file://', __dirname, '/index.html'))
mainWindow.loadURL("http://localhost:8060/dashboard/dashboardForMaster")
修改package.json文件，在其中修改main指定main.js作為electron的入口文件，start-electron執(zhí)行命令，用以啟動electron。
"main": "main.js",
"start-electron": "electron .",
運行
完成上述步驟后，即可啟動應(yīng)用。首先啟動原react項目 執(zhí)行命令,在執(zhí)行electron命令，用以運行electron
npm start
npm run start-electron
啟動成功后，將自動彈出electron應(yīng)用窗口。
如何調(diào)試
渲染進程
最廣泛使用來調(diào)試指定渲染進程的工具是Chromium的開發(fā)者工具集。 它可以獲取到所有的渲染進程，包括BrowserWindow的實例，BrowserView以及WebView。 您可以通過編程的方式在BrowserWindow的webContents中調(diào)用openDevTool()API來打開它們：
const { BrowserWindow } = require('electron')
let win = new BrowserWindow()
win.webContents.openDevTools()
主進程
調(diào)試主進程有點棘手, 因為您不能簡單地打開開發(fā)者工具來調(diào)試它們。 多虧了谷歌和Node.js的緊密合作，Chromium開發(fā)者工具可以被用來調(diào)試Electron的主進程，否則你也許會遇到許多怪事就像require不能再控制臺中顯示。
打包
使用electron-packager進行打包，安裝electron-packager
npm install electron-packager -save-dev
在package.json中添加命令，"packager": "electron-packager . --platform=darwin --electron-version=1.0.1 --overwrite",執(zhí)行打包命令,
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
執(zhí)行后完成打包，生成本地應(yīng)用文件，可直接雙擊啟動應(yīng)用程序。
注:如項目為單頁面應(yīng)用，man.js需要添加如下代碼。
const shouldQuit = app.makeSingleInstance(
(commandLine, workingDirectory) => {
if (mainWindow) {
if (mainWindow.isMinimized()) {
mainWindow.restore();
}
mainWindow.focus();
}
}
);
if (shouldQuit) {
app.quit();
return;//沒有這句話，會報錯！
};
