electron-vite是一款全新的Electron开发构建工具，旨在为Electron提供更快速、更精简的开发体验。最初的设计意图和实际问题得益于Vite优秀的前端开发经验，越来越多的Electron项目开始使用它来构建开发。翻看各种社区资源，可以找到很多基于Vite的Electron开发模板，但是存在一些共同的问题：配置相对复杂，繁琐，需要辅助脚本配合编译开发，无法绘制一个例子的推论。自主选择前端框架（Vue、React、Svelte等）electron-vite旨在解决这些问题，为Electron提供更快更精简的开发体验。Electron特性要解决这些问题，我们需要先了解Electron。Electron是一个基于Chromium和Node.js构建跨平台桌面应用程序的框架，这意味着打包工具需要同时处理Node.js和浏览器环境。Vite有能力处理这两种环境。electron-vite会在运行时直接打包主进程并预加载脚本源码，但是对于渲染器，会启动一个devserver来使用Vite的HMR，这样会大大提高Electron的开发效率。最佳实践许多开发人员和社区模板都是在打开nodeIntegration并关闭contentIsolation的情况下开发的。虽然这样可以获得少量的开发效率，但是不推荐，非常不安全。在Electron中，不仅是浏览器，它还提供了许多强大的原生能力，例如文件系统访问、shell等。事实上，最流行的Electron应用程序（slack、visualstudiocode等）都没有做到这一点。因此，electron-vite的设计思路也会遵循这一点，包括推荐的项目结构、内置配置等。了解electron-viteelectron-vite是一个新的构建工具，旨在提供更快更精简的构建Electron的开发经验。它由三个主要部分组成：一组构建指令，将您的代码与Vite打包，以及它处理Electron独特环境（包括Node.js和浏览器环境）的能力。主进程、渲染器和预加载脚本的集中式Vite配置，针对Electron的独特环境进行了预配置。为渲染器提供快速热重载（HMR），大大提高开发效率。electron-vite快速、简单且易于学习和使用，旨在开箱即用。下面是electron-vitedev的运行示意图：如何安装npmielectron-vite-D命令行界面在安装了electron-vite的项目中，可以直接使用npxelectron-vite运行，或者你可以在package.json文件中添加npmscripts:{"scripts":{"start":"electron-vitepreview",//启动Electron程序预览productionbuild"dev":"electron-vitedev",//启动开发服务和Electron程序"prebuild":"electron-vitebuild"//构建生产代码}}配置electron-vite当从命令行运行electron-vite时，electron-vite会自动尝试解析项目根目录下名为electron.vite.config.js的配置文件。最基本的配置文件如下所示：//electron.vite.config.jsexportdefault{main:{//viteconfigoptions},preload:{//viteconfigoptions},renderer:{//viteconfigoptions}}注：对于一个简单的Electron项目，以上配置基本可以满足需求，因为electron-vite内置了很多Electron开发的配置，大大减轻了开发者的精神负担。Electron入口点在使用electron-vite打包代码时，Electron应用的入口点应该改为输出目录下的主进程入口文件。默认的输出目录outDir是out。您的package.json文件将如下所示：{"name":"electron-app","version":"1.0.0","main":"./out/main/index.js",}Electron工作目录将是输出目录，而不是您的源代码目录。因此在打包Electron应用程序时可以排除源代码。在渲染器进程中使用HMR为了在渲染器中使用热模块替换（HMR）功能，您需要使用一个环境变量来确定窗口浏览器加载的是本地html文件还是本地URL。functioncreateWindow(){//创建浏览器窗口constmainWindow=newBrowserWindow({width:800,height:600,webPreferences:{preload:path.join(__dirname,'../preload/index.js')}})//加载用于开发的本地URL或用于生产的本地//html文件{mainWindow.loadFile(path.join(__dirname,'../renderer/index.html'))}}热重载热重载是指当主进程或预加载的脚本模块更改程序时，快速重建并重启Electron。实际上，不是真正的热重载，而是类似的东西。为开发者带来了极佳的开发体验。有两种启用它的方法：使用CLI选项-w或--watch，例如electron-vitedev--watch。这是首选方式，更灵活。使用配置项build.watch，设置为{}。此外，可以配置更多观察者选项，请参阅WatcherOptions。使用electron-vite时，使用VSCode调试Electron非常简单。添加文件.vscode/launch.json，配置内容为：{"version":"0.2.0","configurations":[{"name":"DebugMainProcess","type":"node",“请求”：“启动”，“cwd”：“${workspaceRoot}”，“runtimeExecutable”：“${workspaceRoot}/node_modules/.bin/electron-vite”，“windows”：{“runtimeExecutable”：“${workspaceRoot}/node_modules/.bin/electron-vite.cmd"},"runtimeArgs":["--sourcemap"]}]}然后，在main.ts（源代码）和VSCode的调试视图中设置一些断点开始调试。注：--sourcemap是electron-vite的CLI选项，通过它生成源代码sourcemap文件，支持调试。快速构建一个electron-vite项目useNPMnpmcreate@quick-start/electronuseYarnyarncreate@quick-start/electronusePNPMpnpmcreate@quick-start/electron并按照提示操作！?项目名称：...
