使用webpack + electron + reactJs開發windows桌面應用

electron是一兩年前挺火的一個框架
本質上是一個瀏覽器，可是集成了不少windows系統的功能，讓前端開發也能夠直接操做windows的窗體，作成一個實打實的桌面軟件

團隊主要的技術棧是react，因此考慮用react開發，方便維護。

PS.因爲項目是大半年前作的，因此一些細節可能記憶有誤請見諒

幾個重點：
1.想要能調試必須使用webpack打包，不能用react那些經常使用的打包腳手架，由於webpack打包有target: "electron-main"
2.對於不使用electron模塊的項目，electron能夠直接跑任何網頁；對於用到electron模塊的項目，若是不設置target: "electron-main"，而直接用webpack打包（或者其餘的打包工具），打包工具會直接默認把electron模塊一塊兒打包進去。而electron模塊裏會用到node的好比fs模塊，這些模塊都不容許在網頁上調用，由於須要直接訪問電腦文件

下面開始

咱們知道electron實際上是有兩個部分的，一個是窗體部分，一個是窗體裏運行的網頁項目
窗體部分一般放在根目錄下，只使用main.js一個文件來控制
網頁項目部分通常放在src目錄下，打包出來的文件放到dist目錄下
目錄大體以下

main.js文件裏會對窗體部分作不少配置
具體能夠參見electron的官方文檔：electron官方文檔

mainWnd = new BrowserWindow({
    // 窗體配置參數
});
mainWnd.loadURL(`file://${__dirname}/dist/index.html`); //這句話是用於配置窗體加載的網頁項目的，配置爲打包後的目錄

網頁項目部分使用ipc模塊與electron的窗體部分的ipcMain模塊進行通訊，網頁項目部分能夠發送以某個指令給窗體部分

網頁項目部分發送指令

// src/MyComponent.js
const ipc = require('electron').ipcRenderer;
ipc.send('logout');

窗體部分接收到指令後作相應的行爲

//main.js

ipcMain.on('logout', function (event, arg) {
    // do something
    console.log('logint');
});

窗體部分也可使用webContent模塊與網頁項目部分通訊
好比用戶點擊關閉窗體，可使用event.preventDefault();阻塞關閉，而後通知網頁項目部分，作退出登陸的行爲，退登完成以後再關閉窗體

// main.js 

mainWnd.webContents.send('mainWnd-close');

網頁項目部分作對應的行爲
好比退出登陸，退出登陸完成後，也使用ipc通知窗體部分，窗體接收到'logout-succ'後，執行關閉窗體的行爲。

// src/MyComponent.js

ipc.on('mainWnd-close', () => {
    // do something
    ipc.send('logout-succ');
})

·在開發項目時，能夠先用網頁的形式開發項目，等到網頁項目部分差很少完成後，再注入electron中，開發網頁項目部分和窗體部分的交互·在webpack中使用target: "electron-main"後，webpack將不會打包有關eletron的代碼