Electron 允许您使用 Web 开发技术来开发跨平台的桌面应用程序。 它由 Github 主导并开源。 熟悉的 Atom 和 VSCode 编辑器都是使用 Electron 开发的。 本文主要介绍Webpack构建Electron应用的实际使用。 小编觉得还是蛮不错的。 现在我就分享给大家，给大家一个参考。 下面就跟随小编来看看吧，希望能够对您有所帮助。
Electron 是 Node.js 和 Chromium 浏览器的组合。 它使用Chromium浏览器显示的Web页面作为应用程序的GUI，并通过Node.js与操作系统交互。 当你在 Electron 应用程序的窗口中进行操作时，你实际上是在操作一个网页。 当你的操作需要通过操作系统来完成时，网页会通过Node.js与操作系统进行交互。
使用这些方法开发桌面应用程序的优点是：
降低开发门槛，只需要掌握Web开发技术和Node.js即可。 大量的Web开发技术和现成的库可以在Electron中复用；
由于 Chromium 浏览器和 Node.js 都是跨平台的，Electron 可以编写在不同操作系统上运行的代码。
当运行 Electron 应用程序时，它首先启动一个主进程。 主流程是通过 Node.js 执行入口 JavaScript 文件来启动的。 该入口文件main.js内容如下：
const { app, BrowserWindow } = require('electron')
// 保持一个对于 window 对象的全局引用，如果你不这样做，
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭
let win
// 打开主窗口
function createWindow() {
// 创建浏览器窗口
win = new BrowserWindow({ width: 800, height: 600 })
// 加载应用的 index.html
const indexPageURL = `file://${__dirname}/dist/index.html`;
win.loadURL(indexPageURL);
// 当 window 被关闭，这个事件会被触发
win.on('closed', () => {
// 取消引用 window 对象
win = null
})
}
// Electron 会在创建浏览器窗口时调用这个函数。
app.on('ready', createWindow)
// 当全部窗口关闭时退出
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出
// 否则绝大部分应用会保持激活
if (process.platform !== 'darwin') {
app.quit()
}
})
登录后复制
主进程启动后，仍会在后台运行。 你能看到和操作的窗口并不是主进程，而是主进程新启动的窗口子进程。
应用程序从启动到退出经历了一系列的生命周期风暴。 使用 Electron.app.on() 函数来监听生命周期风暴并在特定时刻做出反应。 例如，在app.on('ready')事件中，通过BrowserWindow显示应用程序的主窗口。
虽然启动的窗口是网页，但是启动时会加载loadURL中传入的网页地址。 每个窗口都是一个独立的网页进程，窗口之间的通信需要使用主进程来传递消息。
一般来说，开发 Electron 应用程序与开发 Web 应用程序非常相似。 不同的是，Electron 运行环境既有外部浏览器，又有 Node.js API。 开发网页时，不仅可以使用浏览器提供的API，还可以使用Node.js。 .js 提供的 API。
连接到 Webpack
接下来，制作一个简单的 Electron 应用程序。 应用程序启动后需要显示主窗口。 主窗口中有一个按钮。 单击此按钮将显示一个新窗口，并使用React开发网页。
由于Electron应用中的每个窗口都对应一个网页，因此需要开发两个网页，分别是主窗口的index.html和新打开的窗口login.html。 也就是说，该项目由2个单页应用组成，与3-10管理多个单页应用中的项目非常相似。 让我们将其转换为 Electron 应用程序。
需要修改的地方如下：
在项目根目录下新建主流程入口文件main.js。 内容与上述相同；
主窗口网页代码如下：
import React, { Component } from 'react';
import { render } from 'react-dom';
import { remote } from 'electron';
import path from 'path';
import './index.css';
class App extends Component {
// 在按钮被点击时
handleBtnClick() {
// 新窗口对应的页面的 URI 地址
const modalPath = path.join('file://', remote.app.getAppPath(), 'dist/login.html');
// 新窗口的大小
let win = new remote.BrowserWindow({ width: 400, height: 320 })
win.on('close', function () {
// 窗口被关闭时清空资源
win = null
})
// 加载网页
win.loadURL(modalPath)
// 显示窗口
win.show()
}
render() {
return (
Page Index
)
}
}
render(, window.document.getElementById('app'));
登录后复制
最关键的部分是利用Electron库提供的API在按钮点击风暴期间打开新窗口并加载网页文件的地址。
17b3ffa5fd9c4e407dcee4689a0f9fe5
该页面的代码已更改。 接下来，更改创建代码。 这里需要进行以下操作来创建：
构造两个可以在浏览器中运行的网页，分别对应两个窗口的界面；
因为网页的JavaScript代码可能会调用Node.js原生模块或Electron模块，即输出代码依赖于该模块。 但由于此类模块是外部支持的webpack进程回收，因此构建的代码无法封装此类模块。
完成上述需求非常简单，因为Webpack内置了对Electron的支持。 只需在Webpack配置文件中添加一行代码即可，如下：
target: 'electron-renderer',
登录后复制
这个配置在2-7其他配置项-Target中提到过，意思是让Webpack构建Electron渲染过程的JavaScript代码，也就是这两个窗口需要的网页代码。
上述修改完成后webpack进程回收，重新执行Webpack构建，相应网页所需的代码就会输出到项目根目录下的dist目录中。
为了作为 Electron 应用程序运行，您还需要安装新的依赖项：
# 安装 Electron 执行环境到项目中 npm i -D electron
登录后复制
安装成功后，在项目目录下执行Electron。 可以成功看到启动的桌面应用，如图：
