Electron

使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用。Electron通過將Chromium和Node.js合并到同一個運行時環(huán)境中并將其打包為Mac，Windows和Linux系統(tǒng)下的應用來實現(xiàn)這一目的。

Chromium

Chromium是由Google主導開發(fā)的網(wǎng)頁瀏覽器。以BSD許可證等多重自由版權發(fā)行并開放源代碼，Chromium的開發(fā)可能早自2006年即開始。Chromium 是 Google 的Chrome瀏覽器背后的引擎，其目的是為了創(chuàng)建一個安全、穩(wěn)定和快速的通用瀏覽器。

如何搭建？

electron-forge

Electron Forge 是一個用來構建現(xiàn)代化Electron應用的完善的工具。 Electron Forge將多個現(xiàn)有的（ 且有穩(wěn)定維護的 ）Electron構建工具整合為一個簡單易用的工具包，所有人都可以用它來快速地搭建Electron開發(fā)環(huán)境。

Forge 將一些流行框架整合為“開箱即用”的模板，比如：React、Vue、Angular等。 Forge 的一些核心模塊來自于上層的Electron社區(qū)（比如electron-packager），因而Electron主要維護人員（比如說Slack）提交的Electron更新也會使Forge的用戶受益。

關于Forge的更多信息，請查閱electronforge.io。

electron-react-boilerplate

如果你不希望任何工具，而想要簡單地從一個模板開始構建，CT Lin的 electron-react-boilerplate 可能值得一看。 它在社區(qū)中很受歡迎，并在內(nèi)部使用了 electron-builder。

搭建的方式有很多，以下為我個人做法：
搭建一個electron結合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中復制過來)
Electron 運行 package.json 的 main 腳本的進程被稱為主進程。 在主進程中運行的腳本通過創(chuàng)建web頁面來展示用戶界面。 一個 Electron 應用總是有且只有一個主進程。

image.png

修改main.js文件，修改mainWindow.loadURL ，這里為了方便調(diào)試，直接將路徑修改為localhost服務地址。

    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 .",

image.png

運行

完成上述步驟后，即可啟動應用。首先啟動原react項目 執(zhí)行命令,在執(zhí)行electron命令，用以運行electron

npm start
npm run start-electron

啟動成功后，將自動彈出electron應用窗口。

image.png

如何調(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()

image.png

主進程

調(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í)行后完成打包，生成本地應用文件，可直接雙擊啟動應用程序。

image.png

注:如項目為單頁面應用，man.js需要添加如下代碼。

const shouldQuit = app.makeSingleInstance(
  (commandLine, workingDirectory) => {
    if (mainWindow) {
      if (mainWindow.isMinimized()) {
        mainWindow.restore();
      }
      mainWindow.focus();
    }
  }
);

if (shouldQuit) {
  app.quit();
  return;//沒有這句話，會報錯！
};