electron-vite新一代electron开发构建工具

目录
  • 前言
  • electron-vite 是什么
  • 特性
  • 安装
  • 开发&编译
  • 推荐项目目录
  • 开始学习
  • 配置
    • 配置文件
    • 配置智能提示
    • 预设配置
      • 基于主进程的编译项预设:
      • 基于preload脚本的编译项预设:
      • 基于渲染进程的编译项预设:
    • 配置问题
      • 如果 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 文件需要通过 <script type="module"> 引用脚本。

推荐项目目录

├──src
|  ├──main
|  |  ├──index.js
|  |  └──...
|  ├──preload
|  |  ├──index.js
|  |  └──...
|  └──renderer
|     ├──src
|     ├──index.html
|     └──...
├──electron.vite.config.js
└──package.json

开始学习

npm init @quick-start/electron

配置

配置文件

当以命令行方式运行 electron-vite 时, 将会自动尝试解析项目根目录中名为 electron.vite.config.js 的配置文件。最基本的配置文件如下所示:

// electron.vite.config.js
export default {
  main: {
    // vite config options
  },
  preload: {
    // vite config options
  },
  renderer: {
    // vite config options
  }
}

你可以显式地通过 --config 命令行选项指定一个配置文件(相对于 cwd 路径进行解析):

electron-vite --config my-config.js

提示: electron-vite 也支持 ts 或者 mjs 的配置文件.

配置智能提示

因为 electron-vite 本身附带 Typescript 类型,所以你可以通过 IDE 和 jsdoc 的配合来实现智能提示:

/**
 * @type {import('electron-vite').UserConfig}
 */
const config = {
  // ...
}

export default config

你还可以使用 defineConfig and defineViteConfig 工具函数,这样不用 jsdoc 注解也可以获取类型提示:

import { defineConfig, defineViteConfig } from 'electron-vite'

export default defineConfig({
  main: {
    // ...
  },
  preload: {
    // ...
  },
  renderer: defineViteConfig(({ command, mode }) => {
    // conditional config use defineViteConfig
    // ...
  })
})

提示: defineViteConfigVite 中导出.

预设配置

基于主进程的编译项预设:

  • outDir: out\main(相对于根目录)
  • target: node*, 自动匹配 Electronnode 构建目标, 如 Electron 17 为 node16.13
  • lib.entry: src\main{index|main}.{js|ts|mjs|cjs}(相对于根目录), 找不到则为空
  • lib.formats: cjs
  • rollupOptions.external: electron和所有内置node模块(如果用户配置了外部模块ID,将自动合并)

基于preload脚本的编译项预设:

  • outDir: out\preload(相对于根目录)
  • target: 同主进程
  • lib.entry: src\preload{index|preload}.{js|ts|mjs|cjs}(相对于根目录), 找不到则为空
  • lib.formats: cjs
  • rollupOptions.external: 同主进程

基于渲染进程的编译项预设:

  • root: src\renderer(相对于根目录)
  • outDir: out\renderer(相对于根目录)
  • target: chrome*, 自动匹配 Electronchrome 构建目标. 如 Electron 17 为 chrome98
  • lib.entry: src\renderer\index.html(相对于根目录), 找不到则为空
  • polyfillModulePreload: false, 不需要为渲染进程 polyfill Module Preload
  • rollupOptions.external: 同主进程

提示:如果你想在已有的项目中使用这些预设配置,可以使用 Vite 的插件 vite-plugin-electron-config (github.com/alex8088/vi…)

配置问题

如果 Electron 具有多窗口应该如何配置?

当 Electron 应用程序具有多窗口时,就意味着可能有多个 html 页面和 preload 脚本,你可以像下面一样修改你的配置文件:

export default {
  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')
        }
      }
    }
  }
}

结语

项目现在已经开源,欢迎各位感兴趣的小伙伴参与贡献提交 PR 或反馈 issue,给予 star 支持。

https://github.com/alex8088/electron-vite

到此这篇关于electron-vite新一代electron开发构建工具的文章就介绍到这了,更多相关electron-vite构建工具内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vite+Electron快速构建VUE3桌面应用的实现

    目录 一. 简介 二. 创建一个Vite项目 1. 安装 vite 2. 创建项目 3. 进入且运行 三. 配置Electron 1. 官方文档 2. 安装 3. 配置文件 四. 运行 五. 最后 一. 简介 首先,介绍下vite和Electron. Vite是一种新型前端构建工具,能够显著提升前端开发体验.由尤大推出,其发动态表示"再也回不去webpack了..." Electron是一个使用 JavaScript.HTML 和 CSS 构建桌面应用程序的框架. 嵌入Chromium

  • electron-vite新一代electron开发构建工具

    目录 前言 electron-vite 是什么 特性 安装 开发&编译 推荐项目目录 开始学习 配置 配置文件 配置智能提示 预设配置 基于主进程的编译项预设: 基于preload脚本的编译项预设: 基于渲染进程的编译项预设: 配置问题 如果 Electron 具有多窗口应该如何配置? 结语 前言 得益于 Vite 卓越的前端开发体验,越来越多的 Electron 项目也开始应用它来构建开发.翻阅各种社区资源可以发现很多基于 Vite 搭建的 Electron 开发模板,但都存在着一些共同的问题

  • Vite+React搭建开发构建环境实践记录

    目录 前言 使用 create-vite 脚手架生成基础模板 eslint prettier react-router antd 别名 Less 与 CSS Module 总结 前言 使用 Vite 已经有两年了,期间使用它开发过单页面应用,也开发过浏览器扩展插件,对比日常工作中用到的 webpack 构建速度大幅提升,开发体验也好很多.虽然相比于 webpack 来说简单了很多,但是仍然有一些配置需要记录一下,以便之后可以快速搭建一个本地开发构建的环境. 使用 create-vite 脚手架生

  • 从零开始用electron手撸一个截屏工具的示例代码

    最近在尝试利用 electron 将一个 web 版的聊天工具包装成一个桌面 APP.作为一个聊天工具,截屏可以说是一个必备功能了.不过遗憾的是没有找到很成熟的库来用,也可能是打开方式不对,总之呢没看到现成的,于是就想从头撸一个简单的截图工具.下面就进入正题吧! 思路 electron 提供了截取屏幕的 API,可以轻松的获取每个屏幕(存在外接显示器的情况)和每个窗口的图像信息. 把图片截取出来,然后创建一个全屏的窗口盖住整个屏幕,将截取的图片绘制在窗口上,然后再覆盖一层黑色半透明的元素,看起来

  • 使用Jenkins自动化构建工具进行敏捷开发

    目录 一.序言 二.安装与使用 (一)安装 1.查看初始密码 2.修改默认工作空间 (二)使用 1.构建配置 2.添加项目 (三)免密登录 三.触发策略 (一)定时触发 (二)URL 触发 (三)钩子触发 附录.工具使用 1.语言设置 2.构建环境清单 3.环境配置 4.任务配置 一.序言 Jenkins 是一款自动化构建工具,能够基于 Maven 构建后端 Java 项目,也能够基于 nodejs 构建前端 vue 项目,并且有可视化 web 界面. 所谓自动化构建是按照一定的策略执行打包脚本

  • 如何用Vite构建工具快速创建Vue项目

    目录 和Webpack相比,Vite具有以下特点 Vite构建Vue项目 构建过程可能会发生的一些问题 总结 和Webpack相比,Vite具有以下特点 1.快速的冷启动,不需要等待打包 2.即时的热模块更新,真正的按需编译,不用等待整个项目编译完成 Vite构建Vue项目 前提:安装Node.js和Vite 第一步通过npm创建Vite项目 npm init vite-app 项目名称 # 例如 npm init vite-app HelloVue 第二步当项目创建成功后,cd到项目目录 cd

  • JavaScript前端构建工具原理的理解

    目录 前言 构建工具的前世今生 YUI Tool + Ant Grunt / Gulp Webpack / Rollup / Parcel Vite / Esbuild js 模块化的发展史和构建工具的变化 青铜时代 白银时代 黄金时代 结束语 前言 最近有幸在前端团队里面做了一次关于 webpack 的技术分享.在分享的准备过程中,为了能让大家更好的理解 webpack,特意对市面上以前和现在流行的构建工具做了一个梳理总结.在整理和分享的过程中,获益匪浅,对前端构建工具有了新的认识.在这里,将

  • Java Maven构建工具中mvnd和Gradle谁更快

    目录 1.mvnd 简介 2.Gradle 简介 2.1 Gradle 优点简述 3.Gradle 使用 3.1 更换 Gradle 为国内源 3.2 项目依赖文件对比 3.3 settings.gradle VS build.gradle 3.4 打包项目 4.mvnd 5.性能对比 5.1 Maven 打包性能 5.2 mvnd 打包性能 5.3 Gradle 打包性能 6.扩展:Gradle 打包文件存放目录 总结 前言; Maven 作为经典的项目构建工具相信很多人已经用很久了,但如果体

  • python的构建工具setup.py的方法使用示例

    本文介绍了python的构建工具setup.py,分享个大家,具体如下: 一.构建工具setup.py的应用场景 在安装python的相关模块和库时,我们一般使用"pip install  模块名"或者"python setup.py install",前者是在线安装,会安装该包的相关依赖包:后者是下载源码包然后在本地安装,不会安装该包的相关依赖包.所以在安装普通的python包时,利用pip工具相当简单.但是在如下场景下,使用python setup.py ins

  • 基于Node.js的JavaScript项目构建工具gulp的使用教程

    npm install gulp --save-dev 什么是gulp? gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习. gulp 使用 stream 方式处理内容.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等. gulp和grunt的异同点 易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变

  • 使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目

    Grunt 简介 Grunt是一款基于js和node.js的构建工具,由于这段时间node.js越来越火爆,grunt拥有丰富的开源社区支持,产生了很多插件.还有一些插件散落在node社区.构建是一个和宽泛的表述,传统理解就是编译.打包.复制,而今,随着技术越来越丰富,构建还包括对前端组件的预处理,比如sass.less预处理成css,css和js的压缩和合并.grunt的插件可以很好的支持这些新的构建概念,而且更为适合用开源技术堆砌的项目. 虽然Grunt更多的用于程序构建,但是本质上Grun

随机推荐