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

开发环境 Vite 插件主进程的代码写好之后，只有编译过之后才能被 Electron 加载，我们是通过 Vite 插件的形式来完成这个编译工作和加载工作的，如下代码所示：
//plugins\devPlugin.tsimport { ViteDevServer } from "vite";export let devPlugin = () => {return {name: "dev-plugin",configureServer(server: ViteDevServer) {require("esbuild").buildSync({entryPoints: ["./src/main/mainEntry.ts"],bundle: true,platform: "node",outfile: "./dist/mainEntry.js",external: ["electron"],});server.httpServer.once("listening", () => {let { spawn } = require("child_process");let addressInfo = server.httpServer.address();let httpAddress = `http://${addressInfo.address}:${addressInfo.port}`;let electronProcess = spawn(require("electron").toString(), ["./dist/mainEntry.js", httpAddress], {cwd: process.cwd(),stdio: "inherit",});electronProcess.on("close", () => {server.close();process.exit();});});},};};这是一个简单的 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 插件的代码编写好后，在