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

原文鏈接：https://segmentfault.com/a/1190000018080660

 

這篇文章主要介紹了詳解使用webpack+electron+reactJs開發windows桌面應用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

 

electron是一兩年前挺火的一個框架

本質上是一個瀏覽器，但是集成了很多windows系統的功能，讓前端開發也可以直接操作windows的窗體，做成一個實打實的桌面軟件

（當然聽說mac上也可以用electron，不過沒試過）

（沒錯我還在用windows，不是mac也不是linux，我是個lowB）

團隊主要的技術棧是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官方文檔

?

1 2 3 4

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

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

網頁項目部分發送指令

?

1 2 3

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

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

?

1 2 3 4 5 6

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

窗體部分也可以使用webContent模塊與網頁項目部分通信

比如用戶點擊關閉窗體，可以使用event.preventDefault();阻塞關閉，然後通知網頁項目部分，做退出登錄的行爲，退登完成之後再關閉窗體

?

1 2 3

// main.js   mainWnd.webContents.send('mainWnd-close');

網頁項目部分做對應的行爲

比如退出登錄，退出登錄完成後，也使用ipc通知窗體部分，窗體接收到'logout-succ'後，執行關閉窗體的行爲。

?

1 2 3 4 5 6

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

·在開發項目時，可以先用網頁的形式開發項目，等到網頁項目部分差不多完成後，再注入electron中，開發網頁項目部分和窗體部分的交互

·在webpack中使用target: "electron-main"後，webpack將不會打包有關eletron的代碼