electron开发构建工具怎么用

今天小编给大家分享一下electron开发构建工具怎么用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

前言

得益于 Vite 卓越的前端开发体验，越来越多的 Electron 项目也开始应用它来构建开发。翻阅各种社区资源可以发现很多基于 Vite 搭建的 Electron 开发模板，但都存在着一些共同的问题：

• 配置相对复杂，繁琐（对 main，preload 和 renderer 分别配置）

• 需要辅助脚本来配合编译开发

• 无法举一反三，自主选择前端框架（vue，react，svelte，……）

面对这些问题，我们需要对 Electron 有了解。Electron 是一个基于 Chromium 和 Node.js 的桌面应用框架，这意味着编译构建工具需要同时处理 node.js 和浏览器两种环境的代码。这是造成 Electron 开发构建工作复杂性的主因。

知识点

• 主进程和预加载脚本，需基于 cjs 模块化标准构建，运行在 node 环境

• 渲染进程，通常融合现代前端框架如 vue.js，react 等基于 iife 模块化标准构建，运行在浏览器

• 在 Electron 中开启 node 集成，可全程基于 cjs 模块化标准编写代码，尽管不需要编译构建，但不利于利用现代前端框架，还会面临严重的性能和安全问题

• 基于 esm 标准不编译构建，尽管 node 本身已支持，但 Electron 并不支持，这也是 Electron 后续版本的一项工作

electron-vite 是什么

electron-vite 是一个与 Vite 集成的 Electron 构建工具。开发者无需过多关注配置，无论选择哪种前端框架都能轻松完成构建，提高 Electron 的开发构建效率。

特性

• ⚡️使用方式与 Vite 相同

• ????主进程/渲染进程/preload脚本都使用 Vite 构建

• ????统一所有配置，合并到一个文件中

• ????预设构建配置，无需关注配置

• ????支持渲染进程热更新(HMR)

安装

npm i electron-vite -D

开发&编译

在安装了 electron-vite 的项目中，可以直接使用 npx electron-vite 运行， 也可以在 package.json 文件中添加 npm scripts：

{  "scripts": {    "start": "electron-vite preview", // start electron app to preview production build    "dev": "electron-vite dev", // start dev server and electron app    "prebuild": "electron-vite build" // build for production  }}

为了使用热更新(HMR)，需要使用环境变量（ELECTRON_RENDERER_URL）来决定 Electron 窗口加载本地页面还是远程页面。

function createWindow() {  // Create the browser window  const mainWindow = new BrowserWindow({    width: 800,    height: 600,    webPreferences: {      preload: path.join(__dirname, '../preload/index.js')    }  })  // Load the remote URL for development or the local html file for production  if (!app.isPackaged && process.env['ELECTRON_RENDERER_URL']) {    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])  } else {    mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'))  }}

注意: 在开发中, 渲染进程 index.html 文件需要通过