网络编程
位置:首页>> 网络编程>> JavaScript>> electron-vite新一代electron开发构建工具

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

作者:Alex114  发布时间:2023-07-02 17:03:57 

标签:electron-vite

前言

得益于 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

开始学习

  • 克隆 electron-vite-boilerplate (https://github.com/alex8088/electron-vite-boilerplate) 项目学习

  • 通过 create-electron 脚手架来搭建项目学习

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&hellip;)

配置问题

如果 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')
       }
     }
   }
 }
}

来源:https://juejin.cn/post/7084126780390375461

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com