详细解释使用webpack electron reactJs开发windows桌面应用程序

一两年前，电子是一个非常流行的框架

本质上是一个浏览器，但是集成了windows系统的很多功能，让前端开发也可以直接操作windows窗体，做一个真正的桌面软件

(当然听说mac上可以用电子，但是没试过。)

是的，我还在用windows，既不是mac也不是linux。我是lowB。

团队的主要技术栈是react，因此考虑使用react来开发和方便维护。

PS。由于这个项目是半年前做的，有些细节可能记错了。请原谅我

几个关键点：

1.如果你想能够调试，你必须使用webpack来打包它，但是你不能使用react常用的打包支架，因为webpack是用target : ' electronic-main '打包的

2.对于不使用电子模块的项目，电子可以直接运行任何网页；对于使用电子模块的项目，如果不设置target : ' electronic-main '，直接用webpack(或其他打包工具)打包，默认情况下打包工具会直接将电子模块打包在一起。电子模块将使用fs模块等节点，这些模块不允许在网页上调用，因为它们需要直接访问计算机文件

从下面开始

我们知道电子实际上有两个部分，一个是表单部分，另一个是在表单中运行的网页项目

表单部分通常放在根目录中，只有一个文件main.js用来控制它

网页项目一般放在src目录下，打包文件放在dist目录下

目录大致如下

main.js文件将为表单部分进行大量配置

详见电子公文：电子公文

MainWnd=new BrowserWindow({ //表单配置参数})；mainwnd . LoadURl(` file :/$ { _ _ dirname }/dist/index . html `)；//此句用于配置表单加载的网页项。配置为打包的目录网页项通过使用ipc模块与电子表格部件的ipc Main模块进行通信，网页项可以向表格部件发送一定的指令。

发送网页项目部分的说明

//src/my component . jsconst IPC=require(' electronic ')。ipcRendereripc.send('注销')；收到指令后，表单部件会相应地进行操作

//main.jsipcMain.on('logout '，function (event，arg) { //do某物console . log(' logint ')；});表单部件还可以使用网络内容模块与网页项目部件进行通信

例如，如果用户单击关闭表单，可以使用event . preventdefault()；阻止并关闭，然后通知网页项部分，做注销的行为，然后在注销完成后关闭表单

//main . js main wnd . webcontents . send(' main wnd-close ')；网页项目部分执行相应的行为

例如，注销后，ipc还用于通知表单部分，表单收到“注销-成功”后，表单关闭。

//src/my component . jsipc . on(' mainWnd-close '，()={ //做点什么ipc.send('注销-成功')；})开发项目时，可以先以网页的形式开发项目，待网页项目部分差不多完成后再注入电子，开发网页项目部分与表单部分的交互

在网络包中使用target: 'electron-main '后，网络包将不会打包关于electron的代码

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。