详解Webpack实战之构建 Electron 应用

Electron 应用基础与架构

Electron 是由 GitHub 主导并开源的框架，允许开发者利用 Web 技术构建跨平台桌面应用程序。知名的 Atom 编辑器和 VSCode 编辑器均基于 Electron 开发。

Electron 本质上是 Node.js 与 Chromium 浏览器的组合。Chromium 负责渲染 Web 页面作为图形用户界面（GUI），而 Node.js 则负责与操作系统进行交互。在 Electron 应用中，用户操作的窗口实际上是一个网页，当需要执行操作系统层面的操作时，网页会通过 Node.js 接口与系统通信。

采用 Electron 开发桌面应用的优点包括：

1. 降低了开发门槛，开发者只需掌握网页开发技术和 Node.js 即可，大量现有的 Web 开发技术和库可以直接复用于 Electron 项目；
2. 由于 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 提供的 API。

使用 Webpack 构建 Electron 应用

接入 Webpack

接下来我们将构建一个简单的 Electron 应用，要求应用启动后显示一个主窗口，主窗口中包含一个按钮。点击该按钮后，将新显示一个窗口，且网页部分使用 React 进行开发。

由于 Electron 应用中的每一个窗口对应一个网页，所以需要开发2个网页，分别是主窗口的 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 (
   <div>
    <h1>Page Index</h1>
    <button onClick={this.handleBtnClick}>Open Page Login</button>
   </div>
  )
 }
}
render(<App/>, window.document.getElementById('app'));

其中最关键的部分在于，在按钮点击事件中通过 electron 库提供的 API 打开一个新窗口，并加载网页文件所在的地址。

Webpack 构建配置

页面部分的代码已经修改完成，接下来需要修改构建相关的代码。构建需要实现以下目标：

构建出两个可在浏览器中运行的网页，分别对应两个窗口的界面；

1. 由于网页的 JavaScript 代码中可能会调用 Node.js 原生模块或 electron 模块，即输出代码依赖这些模块。但由于这些模块在 Electron 中是内置支持的，构建出的代码不应将这些模块打包进去。
2. 要实现上述要求非常简单，因为 Webpack 内置了对 Electron 的支持。只需在 Webpack 配置文件中添加一行代码即可，如下所示：

target: 'electron-renderer',

该配置在“2-7其它配置项-Target”章节中曾提及，其含义是指让 Webpack 构建出用于 Electron 渲染进程的 JavaScript 代码，即这两个窗口所需的网页代码。

完成以上修改后，重新执行 Webpack 构建，对应的网页所需代码将输出到项目根目录下的 dist 目录中。

运行与依赖安装

为了以 Electron 应用的形式运行，还需要安装新的依赖：

# 安装 Electron 执行环境到项目中
npm i -D electron

安装成功后，在项目目录下执行 electron . 命令，即可成功看到启动的桌面应用，效果如图：

本实例提供项目完整代码

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