我可以在 electron.js 中预加载完整的 javascript 库并在客户端使用它吗？

Question

I'm creating an Electron.js project. I've added some npm packages for my project. Most of these are for the index.html. Eg I've intalled vis.network (graphics js lib) for showing graphs. How can I preload these propely and use the libraries on the browser side? Or is there any other useful method to use npm packages on the browser side in Electron?

preload.js

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

const attachedLibraries = {
    libVis : vis
}

contextBridge.exposeInIsolatedWorld("attachedLibraries", attachedLibraries)

main.js

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

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

npm package in node_modules

Answer 1

You can use the package electron-vite to do this, There are other options (like webpack as well), but this one is pretty well documented, particularly how they structure preload scripts .