electron vite,Electron 开发
摘要：本文主要介绍了新一代电子开发建设工具e-vite，并通过实例代码进行了详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
电子邀请函的特点是什么？安装，开发，编译，推荐项目目录？开始学习，配置配置文件，配置智能提示，基于主进程的编译项预置配置：基于预加载脚本的编译项预置：基于渲染进程的编译项预置：配置问题。如果电子有多个窗口，应该如何配置？标签
目录
得益于Vite优秀的前端开发经验，越来越多的电子项目开始应用它进行构建开发。翻看各种社区资源，可以找到很多基于Vite的电子开发模板，但是有一些共性问题：
配置相对复杂繁琐(main、preload、renderer分别配置)。要求辅助脚本配合编译开发是无法举一反三的。面对这些问题，我们需要对电子有所了解。电子是一个基于Chromium和node.js的桌面应用框架，这意味着编译和构建工具需要处理Node.js和浏览器环境的代码。这是电子开发和构建复杂的主要原因。
知识点
主流程和预加载脚本需要基于cjs模块化标准构建，运行在节点环境的渲染过程中，通常集成vue.js、react等现代前端框架。基于iife模块化标准构建，在浏览器中运行，在电子中启动节点集成，全程基于cjs模块化标准编写代码即可，虽然不需要编译。但不利于现代前端框架的使用，还会面临严重的性能和安全问题。它不是基于esm标准编译和构建的。虽然node本身支持，但Electron不支持，这也是Electron后续版本的作品。
前言
电子vite是一个集成了Vite的电子构建工具。开发者不需要过多关注配置，无论选择哪种前端框架，都可以轻松完成搭建，从而提高了电子的开发建设效率。
electron-vite 是什么
和Vite一样，主进程/渲染进程/预加载脚本都是用Vite来构建和统一所有的配置，合并成一个文件来预置构建配置，不关注配置。支持渲染进程(HMR)的热更新
特性
电子邀请D
安装
在安装了electron-vite的项目中，可以使用npx electron-vite直接运行它，也可以在package.json文件中添加npm脚本：
{
脚本:{
start :电子邀请预览，//启动电子应用程序以预览生产版本
dev :电子邀请开发，//启动开发服务器和电子应用程序
预构建:电子邀请构建//为生产构建
}
}
为了使用热更新(HMR)，您需要使用环境变量(ELECTRON_RENDERER_URL)来决定电子窗口是加载本地页面还是远程页面。
函数createWindow() {
//创建浏览器窗口
const main window=new browser window({
宽度：800，
身高：600，
web首选项：{
preload: path.join(__dirname，./preload/index.js )
}
})
//加载用于开发的远程URL或用于生产的本地html文件
如果(！app . is packaged process . env[ ELECTRON _ RENDERER _ URL ]){
main window . loadurl(process . env[ ELECTRON _ RENDERER _ URL ])
}否则{
main window . loadfile(path . join(_ _ dirname，./renderer/index.html ))
}
}
注意:在开发中，脚本需要被脚本类型=模块引用，以呈现流程index.html文件。
开发编译
src
main
index.js
.
preload
index.js
.
renderer
src
index.html
.
electron.vite.config.js
package.json
推荐项目目录
克隆电子-vite-锅炉板(https://github.com/alex8088/electron-vite-boilerplate)项目学习构建项目学习NPM init @ quick-start/electronic通过创建电子支架
开始学习
配置
当您从命令行运行electron-vite时，您将自动尝试解析项目根目录中名为electron.vite.config.js的配置文件。最基本的配置文件如下：
//electron.vite.config.js
导出默认值{
主要：{
//vite配置选项
},
预载：{
//vite配置选项
},
渲染器：{
//vite配置选项
}
}
您可以通过- config命令行选项显式指定配置文件(相对于cwd路径进行解析):
electron-vite-config my-config . js
提示:electronic-Vite还支持ts或mjs配置文件。
配置文件
因为electronic-vite本身自带Typescript类型，所以通过IDE和jsdoc的配合可以实现智能提示：
/**
* @type {import(electron-vite )。用户配置}
*/
常量配置={
//.
}
导出默认配置
您还可以使用define config和define eviteconfig工具函数，这样您就可以在没有jsdoc注释的情况下获得类型提示：
从“电子邀请”导入{ defineConfig，defineViteConfig }
导出默认定义配置({
主要：{
//.
},
预载：{
//.
},
renderer:defineViteConfig(({ command，mode })={
//条件配置使用defineViteConfig
//.
})
})
提示: defineViteConfig是从Vite导出的。
配置智能提示
预设配置
outDir: out \ main(相对于根目录)target: node*，自动匹配电子的节点构建目标，例如电子17是node 16.13lib.entry:src \ Main { index Main }。{js ts mjs cJS}(相对于根目录)，如果找不到，则为空lib.formats: cJSrollupOptions.external:电子和所有内置节点模块(如果用户配置了外部模块ID，则自动合并)
基于主进程的编译项预设：
outDir: out \ preload(相对于根目录)target:同主进程lib.entry:src \ preload { index preload }。{js ts mjs cjs}(相对于根目录)，否则为空010-5900。
基于preload脚本的编译项预设：
lib.formats: src \ renderer(相对于根目录)rollupOptions.external: out\renderer(相对于根目录)root: chrome*，匹配自动电子的chrome构建目标。比如电子17是Chrome 98outDir:src \ renderer \ index.html(相对于根目录)，找不到就空target: false，渲染过程不需要预加载polyfill模块lib.entry:与主进程polyfillModulePreload相同：如果要在现有项目中使用这些预置配置，可以使用插件Vite-plugin-Electron-config(github.com/alex8088/vi…)
基于渲染进程的编译项预设：
配置问题
当电子应用程序有多个窗口时，意味着可能有多个html页面和预加载脚本。您可以按如下方式修改配置文件：
导出默认值{
主要：{}，
预载：{
构建：{
汇总选项：{
输入：{
浏览器：resolve(__dirname， src/preload/browser.ts )，
webview: resolve(__dirname， src/preload/webview.ts )
}
}
}
},
渲染器：{
构建：{
汇总选项：{
输入：{
浏览器：resolve(__dirname， src/renderer/browser.html )，
webview: resolve(__dirname， src/renderer/webview.html )
}
}
}
}
}
如果 Electron 具有多窗口应该如何配置？
该项目现已开放源代码，欢迎您参与为公共关系做出贡献或对问题提供反馈，以支持star。
https://github.com/alex8088/electron-vite
这就是这篇关于新一代电子邀请开发和构建工具的文章。要了解更多关于e-Vite构建工具的信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。