共计 1467 个字符，预计需要花费 4 分钟才能阅读完成。
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 官方文档
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 的代码