今天小编给大家分享一下electron开发构建工具怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。前言得益于 Vite
今天小编给大家分享一下electron开发构建工具怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
得益于 Vite
卓越的前端开发体验,越来越多的 Electron
项目也开始应用它来构建开发。翻阅各种社区资源可以发现很多基于 Vite 搭建的 Electron 开发模板,但都存在着一些共同的问题:
配置相对复杂,繁琐(对 main,preload 和 renderer 分别配置)
需要辅助脚本来配合编译开发
面对这些问题,我们需要对 Electron 有了解。Electron 是一个基于 Chromium 和 node.js 的桌面应用框架,这意味着编译构建工具需要同时处理 node.js 和浏览器两种环境的代码。这是造成 Electron 开发构建工作复杂性的主因。
知识点
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.jsexport 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 的配合来实现智能提示:
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 // ... })})
提示:
defineViteConfig
从Vite
中导出.
outDir: out\main
(相对于根目录)
target: node*
, 自动匹配 Electron
的 node
构建目标, 如 Electron 17 为 node16.13
lib.entry: src\main{index|main}.{js|ts|mjs|cjs}
(相对于根目录), 找不到则为空
lib.formats: cjs
rollupOptions.external: electron
和所有内置node模块(如果用户配置了外部模块ID,将自动合并)
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*
, 自动匹配 Electron
的 chrome
构建目标. 如 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 应用程序具有多窗口时,就意味着可能有多个 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') } } } }}
以上就是“electron开发构建工具怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网精选频道。
--结束END--
本文标题: electron开发构建工具怎么用
本文链接: https://www.lsjlt.com/news/326757.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
2024-04-30
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0