electron-vite新一代electron開(kāi)發(fā)構(gòu)建工具
前言
得益于 Vite
卓越的前端開(kāi)發(fā)體驗(yàn),越來(lái)越多的 Electron
項(xiàng)目也開(kāi)始應(yīng)用它來(lái)構(gòu)建開(kāi)發(fā)。翻閱各種社區(qū)資源可以發(fā)現(xiàn)很多基于 Vite 搭建的 Electron 開(kāi)發(fā)模板,但都存在著一些共同的問(wèn)題:
- 配置相對(duì)復(fù)雜,繁瑣(對(duì) main,preload 和 renderer 分別配置)
- 需要輔助腳本來(lái)配合編譯開(kāi)發(fā)
- 無(wú)法舉一反三,自主選擇前端框架(vue,react,svelte,……)
面對(duì)這些問(wèn)題,我們需要對(duì) Electron 有了解。Electron 是一個(gè)基于 Chromium 和 Node.js 的桌面應(yīng)用框架,這意味著編譯構(gòu)建工具需要同時(shí)處理 node.js 和瀏覽器兩種環(huán)境的代碼。這是造成 Electron 開(kāi)發(fā)構(gòu)建工作復(fù)雜性的主因。
知識(shí)點(diǎn)
- 主進(jìn)程和預(yù)加載腳本,需基于 cjs 模塊化標(biāo)準(zhǔn)構(gòu)建,運(yùn)行在 node 環(huán)境
- 渲染進(jìn)程,通常融合現(xiàn)代前端框架如 vue.js,react 等基于 iife 模塊化標(biāo)準(zhǔn)構(gòu)建,運(yùn)行在瀏覽器
- 在 Electron 中開(kāi)啟 node 集成,可全程基于 cjs 模塊化標(biāo)準(zhǔn)編寫代碼,盡管不需要編譯構(gòu)建,但不利于利用現(xiàn)代前端框架,還會(huì)面臨嚴(yán)重的性能和安全問(wèn)題
- 基于 esm 標(biāo)準(zhǔn)不編譯構(gòu)建,盡管 node 本身已支持,但 Electron 并不支持,這也是 Electron 后續(xù)版本的一項(xiàng)工作
electron-vite 是什么
electron-vite
是一個(gè)與 Vite
集成的 Electron
構(gòu)建工具。開(kāi)發(fā)者無(wú)需過(guò)多關(guān)注配置,無(wú)論選擇哪種前端框架都能輕松完成構(gòu)建,提高 Electron 的開(kāi)發(fā)構(gòu)建效率。
特性
- ??使用方式與 Vite 相同
- ??主進(jìn)程/渲染進(jìn)程/preload腳本都使用 Vite 構(gòu)建
- ??統(tǒng)一所有配置,合并到一個(gè)文件中
- ??預(yù)設(shè)構(gòu)建配置,無(wú)需關(guān)注配置
- ??支持渲染進(jìn)程熱更新(HMR)
安裝
npm i electron-vite -D
開(kāi)發(fā)&編譯
在安裝了 electron-vite
的項(xiàng)目中,可以直接使用 npx electron-vite
運(yùn)行, 也可以在 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),需要使用環(huán)境變量(ELECTRON_RENDERER_URL
)來(lái)決定 Electron 窗口加載本地頁(yè)面還是遠(yuǎn)程頁(yè)面。
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')) } }
注意: 在開(kāi)發(fā)中, 渲染進(jìn)程
index.html
文件需要通過(guò)<script type="module">
引用腳本。
推薦項(xiàng)目目錄
├──src | ├──main | | ├──index.js | | └──... | ├──preload | | ├──index.js | | └──... | └──renderer | ├──src | ├──index.html | └──... ├──electron.vite.config.js └──package.json
開(kāi)始學(xué)習(xí)
- 克隆
electron-vite-boilerplate
(https://github.com/alex8088/electron-vite-boilerplate) 項(xiàng)目學(xué)習(xí) - 通過(guò)
create-electron
腳手架來(lái)搭建項(xiàng)目學(xué)習(xí)
npm init @quick-start/electron
配置
配置文件
當(dāng)以命令行方式運(yùn)行 electron-vite
時(shí), 將會(huì)自動(dòng)嘗試解析項(xiàng)目根目錄中名為 electron.vite.config.js
的配置文件。最基本的配置文件如下所示:
// electron.vite.config.js export default { main: { // vite config options }, preload: { // vite config options }, renderer: { // vite config options } }
你可以顯式地通過(guò) --config 命令行選項(xiàng)指定一個(gè)配置文件(相對(duì)于 cwd 路徑進(jìn)行解析):
electron-vite --config my-config.js
提示:
electron-vite
也支持ts
或者mjs
的配置文件.
配置智能提示
因?yàn)?electron-vite
本身附帶 Typescript 類型,所以你可以通過(guò) IDE 和 jsdoc 的配合來(lái)實(shí)現(xiàn)智能提示:
/** * @type {import('electron-vite').UserConfig} */ const config = { // ... } export default config
你還可以使用 defineConfig
and defineViteConfig
工具函數(shù),這樣不用 jsdoc 注解也可以獲取類型提示:
import { defineConfig, defineViteConfig } from 'electron-vite' export default defineConfig({ main: { // ... }, preload: { // ... }, renderer: defineViteConfig(({ command, mode }) => { // conditional config use defineViteConfig // ... }) })
提示:
defineViteConfig
從Vite
中導(dǎo)出.
預(yù)設(shè)配置
基于主進(jìn)程的編譯項(xiàng)預(yù)設(shè):
- outDir:
out\main
(相對(duì)于根目錄) - target:
node*
, 自動(dòng)匹配Electron
的node
構(gòu)建目標(biāo), 如 Electron 17 為node16.13
- lib.entry:
src\main{index|main}.{js|ts|mjs|cjs}
(相對(duì)于根目錄), 找不到則為空 - lib.formats:
cjs
- rollupOptions.external:
electron
和所有內(nèi)置node模塊(如果用戶配置了外部模塊ID,將自動(dòng)合并)
基于preload腳本的編譯項(xiàng)預(yù)設(shè):
- outDir:
out\preload
(相對(duì)于根目錄) - target: 同主進(jìn)程
- lib.entry:
src\preload{index|preload}.{js|ts|mjs|cjs}
(相對(duì)于根目錄), 找不到則為空 - lib.formats:
cjs
- rollupOptions.external: 同主進(jìn)程
基于渲染進(jìn)程的編譯項(xiàng)預(yù)設(shè):
- root:
src\renderer
(相對(duì)于根目錄) - outDir:
out\renderer
(相對(duì)于根目錄) - target:
chrome*
, 自動(dòng)匹配Electron
的chrome
構(gòu)建目標(biāo). 如 Electron 17 為chrome98
- lib.entry:
src\renderer\index.html
(相對(duì)于根目錄), 找不到則為空 - polyfillModulePreload:
false
, 不需要為渲染進(jìn)程 polyfillModule Preload
- rollupOptions.external: 同主進(jìn)程
提示:如果你想在已有的項(xiàng)目中使用這些預(yù)設(shè)配置,可以使用 Vite 的插件
vite-plugin-electron-config
(github.com/alex8088/vi…)
配置問(wèn)題
如果 Electron 具有多窗口應(yīng)該如何配置?
當(dāng) Electron 應(yīng)用程序具有多窗口時(shí),就意味著可能有多個(gè) html 頁(yè)面和 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') } } } } }
結(jié)語(yǔ)
項(xiàng)目現(xiàn)在已經(jīng)開(kāi)源,歡迎各位感興趣的小伙伴參與貢獻(xiàn)提交 PR 或反饋 issue,給予 star 支持。
到此這篇關(guān)于electron-vite新一代electron開(kāi)發(fā)構(gòu)建工具的文章就介紹到這了,更多相關(guān)electron-vite構(gòu)建工具內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue實(shí)現(xiàn)購(gòu)物車計(jì)算總價(jià)功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購(gòu)物車計(jì)算總價(jià)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Vue.js結(jié)合bootstrap前端實(shí)現(xiàn)分頁(yè)和排序效果
這篇文章主要為大家詳細(xì)介紹了Vue.js結(jié)合bootstrap 前端實(shí)現(xiàn)分頁(yè)和排序效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12vue+node+socket io實(shí)現(xiàn)多人互動(dòng)并發(fā)布上線全流程
這篇文章主要介紹了vue+node+socket io實(shí)現(xiàn)多人互動(dòng)并發(fā)布上線全流程,本文給大家提到了socket.io相關(guān)用法概覽及開(kāi)發(fā)流程,需要的朋友可以參考下2021-09-09vue3超出文本展示el tooltip實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3超出文本展示el tooltip實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02vue3利用keepAlive緩存頁(yè)面實(shí)例詳解
<keep-alive> 是一個(gè)抽象組件,它自身不會(huì)渲染一個(gè)DOM元素,也不會(huì)出現(xiàn)在組件的父組件鏈中,下面這篇文章主要給大家介紹了關(guān)于vue3利用keepAlive緩存頁(yè)面的相關(guān)資料,需要的朋友可以參考下2022-11-11