得益于 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)編寫(xiě)代碼，盡管不需要編譯構(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"> 引用腳本。

開(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 類(lèi)型，所以你可以通過(guò) IDE 和 jsdoc 的配合來(lái)實(shí)現(xiàn)智能提示：

/**
 * @type {import('electron-vite').UserConfig}
 */
const config = {
  // ...
}

export default config

你還可以使用 defineConfig and defineViteConfig 工具函數(shù)，這樣不用 jsdoc 注解也可以獲取類(lèi)型提示：

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模塊(如果用戶(hù)配置了外部模塊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)程 polyfill Module 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 支持。

https://github.com/alex8088/electron-vite

到此這篇關(guān)于electron-vite新一代electron開(kāi)發(fā)構(gòu)建工具的文章就介紹到這了,更多相關(guān)electron-vite構(gòu)建工具內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: