我可以在 electron.js 中預加載完整的 javascript 庫並在客戶端使用它嗎？

Question

我正在創建一個 Electron.js 項目。 我為我的項目添加了一些 npm 包。 其中大部分用於 index.html。 例如，我安裝了 vis.network（圖形 js 庫）來顯示圖形。 我怎樣才能正確地預加載這些並在瀏覽器端使用這些庫？ 或者還有其他有用的方法可以在 Electron 的瀏覽器端使用 npm 包嗎？

預加載.js

const { contextBridge } = require("electron")
const { vis } = require("vis-network")

const attachedLibraries = {
    libVis : vis
}

contextBridge.exposeInIsolatedWorld("attachedLibraries", attachedLibraries)

主程序

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      preload : 'preload.js'
    }
  })

  win.loadFile('view/index.html')
}

node_modules 中的 npm package

Answer 1

您可以使用 package electron-vite來執行此操作，還有其他選項（如 webpack 以及），但這一個有很好的記錄，特別是它們如何構建 預加載腳本。