首頁 > 軟體

electron-vite新一代electron開發構建工具

2022-04-11 10:00:17

前言

得益於 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 相同

IT145.com E-mail:sddin#qq.com