electron开发构建工具怎么用
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)
安装
npmielectron-vite-D
开发&编译
在安装了 electron-vite 的项目中，可以直接使用 npx electron-vite 运行， 也可以在 package.json 文件中添加 npm scripts：
{"scripts":{"start":"electron-vitepreview",//startelectronapptopreviewproductionbuild"dev":"electron-vitedev",//startdevserverandelectronapp"prebuild":"electron-vitebuild"//buildforproduction}}
为了使用热更新(HMR)，需要使用环境变量（ELECTRON_RENDERER_URL）来决定 Electron 窗口加载本地页面还是远程页面。
functioncreateWindow(){//CreatethebrowserwindowconstmainWindow=newBrowserWindow({width:800,height:600,webPreferences:{preload:path.join(__dirname,'../preload/index.js')}})//LoadtheremoteURLfordevelopmentorthelocalhtmlfileforproductionif(!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文件需要通过<script type="module">引用脚本。
推荐项目目录
├──src|├──main||├──index.js||└──...|├──preload||├──index.js||└──...|└──renderer|├──src|├──index.html|└──...├──electron.vite.config.js└──package.json
开始学习
克隆
electron-vite-boilerplate(https://github.com/alex8088/electron-vite-boilerplate) 项目学习通过
create-electron脚手架来搭建项目学习
npminit@quick-start/electron
配置
配置文件
当以命令行方式运行 electron-vite 时， 将会自动尝试解析项目根目录中名为 electron.vite.config.js 的配置文件。最基本的配置文件如下所示：
//electron.vite.config.jsexportdefault{main:{//viteconfigoptions},preload:{//viteconfigoptions},renderer:{//viteconfigoptions}}
你可以显式地通过 --config 命令行选项指定一个配置文件（相对于 cwd 路径进行解析）:
electron-vite--configmy-config.js
提示:
electron-vite也支持ts或者mjs的配置文件.
配置智能提示
因为 electron-vite 本身附带 Typescript 类型，所以你可以通过 IDE 和 jsdoc 的配合来实现智能提示：
/***@type{import('electron-vite').UserConfig}*/constconfig={//...}exportdefaultconfig
你还可以使用 defineConfig and defineViteConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示：
import{defineConfig,defineViteConfig}from'electron-vite'exportdefaultdefineConfig({main:{//...},preload:{//...},renderer:defineViteConfig(({command,mode})=>{//conditionalconfigusedefineViteConfig//...})})
提示:
defineViteConfig从Vite中导出.
预设配置
基于主进程的编译项预设:
outDir:
out\main(相对于根目录)target:
node*, 自动匹配Electron的node构建目标， 如 Electron 17 为node16.13lib.entry:
src\main{index|main}.{js|ts|mjs|cjs}(相对于根目录), 找不到则为空lib.formats:
cjsrollupOptions.external:
electron和所有内置node模块(如果用户配置了外部模块ID，将自动合并)
基于preload脚本的编译项预设:
outDir:
out\preload(相对于根目录)target: 同主进程
lib.entry:
src\preload{index|preload}.{js|ts|mjs|cjs}(相对于根目录), 找不到则为空lib.formats:
cjsrollupOptions.external: 同主进程
基于渲染进程的编译项预设:
root:
src\renderer(相对于根目录)outDir:
out\renderer(相对于根目录)target:
chrome*, 自动匹配Electron的chrome构建目标. 如 Electron 17 为chrome98lib.entry:
src\renderer\index.html(相对于根目录), 找不到则为空polyfillModulePreload:
false, 不需要为渲染进程 polyfillModule PreloadrollupOptions.external: 同主进程
提示：如果你想在已有的项目中使用这些预设配置，可以使用 Vite 的插件
vite-plugin-electron-config(github.com/alex8088/vi…)
配置问题
如果 Electron 具有多窗口应该如何配置?
当 Electron 应用程序具有多窗口时，就意味着可能有多个 html 页面和 preload 脚本，你可以像下面一样修改你的配置文件：
exportdefault{main:{},preload:{build:{rollupOptions:{input:{browser:resolve(__dirname,'src/preload/browser.ts'),webview:resolve(__dirname,'src/preload/webview.ts')}}}},renderer:{build:{rollupOptions:{input:{browser:resolve(__dirname,'src/renderer/browser.html'),webview:resolve(__dirname,'src/renderer/webview.html')}}}}}
以上就是“electron开发构建工具怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注恰卡编程网行业资讯频道。
