electron開發構建工具怎么用

今天小編給大家分享一下electron開發構建工具怎么用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

前言

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

• ????主進程/渲染進程/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.js
export 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 的配合來實現智能提示：

/**
 * @type {import('electron-vite').UserConfig}
 */
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，將自動合并)

基于preload腳本的編譯項預設:

• 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 具有多窗口應該如何配置?

當 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開發構建工具怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。