运用webpack + electron + reactJs开辟windows桌面运用

2019年8月31日 266次阅读 来源: aaron_lawliet

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目次下
目次大抵以下

《运用webpack + electron + reactJs开辟windows桌面运用》

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的代码

    原文作者：aaron_lawliet
    原文地址: https://segmentfault.com/a/1190000018080660
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞