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