如何开发Vite3插件构建Electron开发环境( 二 ) _生活百科

这是一个简单的 Vite 插件，在这个插件中我们注册了一个名为 configureServer 的钩子，当 Vite 为我们启动 Http 服务的时候，configureServer钩子会被执行。
这个钩子的输入参数为一个类型为 ViteDevServer 的对象 server ，这个对象持有一个 http.Server 类型的属性 httpServer ，这个属性就代表着我们调试 Vue 页面的 http 服务，一般情况下地址为：http://127.0.0.1:5173/
我们可以通过监听 server.httpServer 的 listening 事件来判断 httpServer 是否已经成功启动，如果已经成功启动了，那么就启动 Electron 应用，并给它传递两个命令行参数，第一个参数是主进程代码编译后的文件路径，第二个参数是 Vue 页面的 http 地址，这里就是 http://127.0.0.1:5173/
为什么这里传递了两个命令行参数，而主进程的代码接收第三个参数（process.argv[2]）当做 http 页面的地址呢？因为默认情况下 electron.exe 的文件路径将作为第一个参数。也就是我们通过 require("electron") 获得的字符串。

这个路径一般是：node_modules\electron\dist\electron.exe，如果这个路径下没有对应的文件，说明你的 Electron 模块没有安装好。

我们是通过 Node.js child_process 模块的 spawn 方法启动 electron 子进程的，除了两个命令行参数外，还传递了一个配置对象。
这个对象的 cwd 属性用于设置当前的工作目录，process.cwd() 返回的值就是当前项目的根目录。stdio 用于设置 electron 进程的控制台输出，这里设置 inherit 可以让 electron 子进程的控制台输出数据同步到主进程的控制台。这样我们在主进程中 console.log 的内容就可以在 VSCode 的控制台上看到了。
当 electron 子进程退出的时候，我们要关闭 Vite 的 http 服务，并且控制父进程退出，准备下一次启动。
http 服务启动之前，我们使用 esbuild 模块完成了主进程 TypeScript 代码的编译工作，这个模块是 Vite 自带的，所以我们不需要额外安装，可以直接使用。
主进程的入口文件是通过 entryPoints 配置属性设置的，编译完成后的输出文件时通过 outfile 属性配置的。
编译平台 platform 设置为 node，排除的模块 external 设置为 electron，正是这两个设置使我们可以在主进程代码中可以通过 import 的方式导入 electron 内置的模块。非但如此，Node 的内置模块也可以通过 import 的方式引入。
这个 Vite 插件的代码编写好后，在 vite.config.ts 文件中引入一下就可以使用了，如下代码所示：

// vite.config.tsimport { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import { devPlugin } from "./plugins/devPlugin";import optimizer from "vite-plugin-optimizer";export default defineConfig({plugins: [devPlugin(), vue()],});

现在执行命令 npm run dev，你会看到 Electron 应用加载了 Vue 的首页，如下图所示：
关闭窗口，主进程和子进程也会跟着退出。修改一下 Vue 组件里的内容，窗口内显示的内容也会跟着变化，说明热更新机制在起作用。

文章插图
渲染进程集成内置模块现在主进程内可以自由的使用 Electron 和 Node.js 的内置模块了，但渲染进程还不行，接下去我们就为渲染进程集成这些内置模块。
首先我们修改一下主进程的代码，打开渲染进程的一些开关，允许渲染进程使用 Node.js 的内置模块，如下代码所示：

// src\main\mainEntry.tsimport { app, BrowserWindow } from "electron";process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = "true";let mainWindow: BrowserWindow;app.whenReady().then(() => {let config = {webPreferences: {nodeIntegration: true,webSecurity: false,allowRunningInsecureContent: true,contextIsolation: false,webviewTag: true,spellcheck: false,disableHtmlFullscreenWindowResize: true,},};mainWindow = new BrowserWindow(config);mainWindow.webContents.openDevTools({ mode: "undocked" });mainWindow.loadURL(process.argv[2]);});

在这段代码中，有以下几点需要注意：
1：ELECTRON_DISABLE_SECURITY_WARNINGS 用于设置渲染进程开发者调试工具的警告，这里设置为 true 就不会再显示任何警告了。