Electron-vite中ELECTRON_RENDERER_URL环境变量如何被设置的

近期我专注于前端技术栈 Electron 与 Vue3 的学习实践,依照教程网站 快速开始 | electron-vite 的快速入门指引,搭建了一个示例项目。成功完成项目下载,并通过 npm run dev 命令启动项目后,在研读项目 main 目录下的 index.ts 文件时,发现 mainWindow.loadURL 方法中使用的 ELECTRON_RENDERER_URL 环境变量来源不明。查阅 GitHub 上的相关 Issue,得知该变量与 Vite 的 Server 配置有关,但关于其默认值设置方式及端口修改方法却鲜有说明,由此开启了深入探究之旅。

通过分析 npm run dev 命令的执行逻辑,发现其会读取 package.json 文件中 scripts 字段下的 dev 属性,并执行对应的命令 electron-vite dev 完成项目启动。显然,electron-vite 是关键执行指令,于是我在 node_modules 目录中找到 electron-vite/bin/electron-vite.js 文件。进一步追踪发现,该文件导入了 ../dist/cli.mjs 代码。在 cli.mjs 中定位到 dev 命令的解析逻辑,发现其通过配置项创建了一个 Server。为深入了解该过程,我继续跟进到 lib-RSvVeUu6.mjs 文件中的 createServer 方法,试图从中找到 ELECTRON_RENDERER_URL 环境变量的相关线索 。

由于端口关联着渲染进程,所以我直接定位到解析渲染选项的位置。

至此,我们已经找到了设置 ELECTRON_RENDERER_URL 环境变量的位置。接下来,只需找出 port 参数的设置之处。 往上查看代码可知,port 存在于 conf 之中,而 conf 又处于 server.config.server 里。所以,接下来的重点在于探究 server 的创建过程。 点击 createServer$1 后,跳转至该方法的声明处,却未找到具体实现。既然如此,我们就通过调试模式,以单步调试的方式来探寻具体实现。

找到了具体的实现代码,进去一探究竟。

server通过config来的,我们去看上一步的resolveConfig函数

此处的 config 内容实际上对应着 electron.vite.config.ts 文件中的内容,具体来说就是 renderer 里的对象内容。不过,这个对象里并没有 server 属性。因此,接下来我们要进一步探究 resolveServerOptions 函数是如何对其进行解析的。

通过对解析代码的查看,我们发现虽然构建了一个 server 对象,然而其中并未包含与 port 相关的内容。由此可见,createServer 方法并未设置默认端口。接下来,我们只能进一步查看在创建完 server 之后所调用的 listen 函数了。

进入到startServer函数中。

我们可以看到,当 port 属性未进行配置时,采用了默认值 5173。 至此,ELECTRON_RENDERER_URL 环境变量的设置流程就全部梳理完毕了。

相关推荐
LFly_ice14 小时前
学习React-9-useSyncExternalStore
javascript·学习·react.js
gnip14 小时前
js上下文
前端·javascript
中草药z14 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)15 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休15 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel15 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组15 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽15 小时前
threejs入门学习日记
前端·javascript·three.js
朝阳58115 小时前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust