Can I preload a full javascript library in electron.js and use it on the client side?

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 .