electron开发构建工具怎么用-mile米乐体育

恰卡编辑 开发技术 2022年04月11日 21:20
0

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.load}else{mainwindow.loadfile(path.join(__dirname,'../renderer/index.html'))}}

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

    网站地图