Vite 插件

使用 Vite 轉換並打包您的 Electron Forge 應用程式程式碼。

自 Electron Forge v7.5.0 起，Vite 對 Electron Forge 的支援已標記為實驗性，以反映其開發階段，並為維護人員提供快速發布修復和改進的能力。未來的小版本發布可能會包含重大變更，但遷移步驟將列在發布說明中。如需更多內容，請參閱 Electron Forge v7.5.0 發布說明。

此插件可讓您輕鬆設定標準 Vite 工具來編譯您的主程序程式碼和渲染器程序程式碼。

安裝

npm install --save-dev @electron-forge/plugin-vite

使用方式

插件設定

您必須提供兩個 Vite 設定檔：一個用於主程序的 vite.main.config.js，以及一個用於渲染器程序的 vite.renderer.config.js。

例如，這是從 Forge 的 Vite 範本中取得的設定

forge.config.js

module.exports = {
  plugins: [
    {
      name: '@electron-forge/plugin-vite',
      config: {
        // `build` can specify multiple entry builds, which can be
        // Main process, Preload scripts, Worker process, etc.
        build: [
          {
            // `entry` is an alias for `build.lib.entry`
            // in the corresponding file of `config`.
            entry: 'src/main.js',
            config: 'vite.main.config.mjs'
          },
          {
            entry: 'src/preload.js',
            config: 'vite.preload.config.mjs'
          }
        ],
        renderer: [
          {
            name: 'main_window',
            config: 'vite.renderer.config.mjs'
          }
        ]
      }
    }
  ]
};

package.json

{
  // ...
  "config": {
    "forge": {
      "plugins": [
        {
          "name": "@electron-forge/plugin-vite",
          "config": {
            "build": [
              {
                "entry": "src/main.js",
                "config": "vite.main.config.mjs"
              },
              {
                "entry": "src/preload.js",
                "config": "vite.preload.config.mjs"
              }
            ],
            "renderer": [
              {
                "name": "main_window",
                "config": "vite.renderer.config.mjs"
              }
            ]
          }
        }
      ]
    }
  }
  // ...
}

設定選項將大致遵循非 Electron Vite 專案的相同標準。您可以參考Vite 的文件，以獲取有關如何設定每個入口點設定檔的更多範例。

專案檔案

Vite 的建置設定會為主程序和預載腳本，以及每個渲染器程序產生單獨的入口。

您的 package.json 檔案中的 main 入口點需要指向 ".vite/build/main"，如下所示

package.json

{
  "name": "my-vite-app",
  "main": ".vite/build/main.js",
  // ...
}

如果使用 Vite 範本，這應該會自動為您設定。

進階設定

原生 Node 模組

如果您使用 Vite 範本建立您的應用程式，原生模組大部分會直接運作。但是，為了避免可能的建置問題，我們建議指示 Vite 將它們載入為外部套件

vite.main.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      external: [
        'serialport',
        'sqlite3'
      ]
    }
  }
});

熱模組替換 (HMR)

為了使用 Vite 的熱模組替換 (HMR)，所有 loadURL 路徑都需要參考 Vite 插件將為您定義的全域變數

• 開發伺服器將會加上 _DEV_SERVER_URL 後綴

• 靜態檔案路徑將會加上 _VITE_NAME 後綴

在 main_window 的情況下，全域變數將會命名為 MAIN_WINDOW_VITE_DEV_SERVER_URL 和 MAIN_WINDOW_VITE_NAME。下面給出如何使用它們的範例

main.js

const mainWindow = new BrowserWindow({ /* ... */ });

if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
  mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
} else {
  mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
};

如果使用 TypeScript，則可以這樣定義變數

main.js (主程序)

declare const MAIN_WINDOW_VITE_DEV_SERVER_URL: string;
declare const MAIN_WINDOW_VITE_NAME: string;