Electron.js中预加载JavaScript库并在客户端使用的方法咨询

一、修复你的预加载脚本问题 #

你当前的代码存在两个关键问题：vis-network的导入方式错误，以及Electron安全配置不规范，以下是修正后的实现：

修正后的preload.js #

const { contextBridge } = require('electron');
// vis-network 以默认导出方式提供 vis 对象，无需解构
const vis = require('vis-network');

// 向渲染进程暴露安全的API
contextBridge.exposeInMainWorld('attachedLibraries', {
  libVis: vis
});

修正后的main.js #

const { app, BrowserWindow } = require('electron');
const path = require('path');

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 关闭nodeIntegration，遵循Electron安全最佳实践
      nodeIntegration: false,
      // 确保上下文隔离开启（Electron 12+ 默认启用）
      contextIsolation: true,
      // 使用绝对路径避免相对路径解析错误
      preload: path.join(__dirname, 'preload.js')
    }
  });

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

// 应用生命周期处理
app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

在index.html中使用 #

注意需要引入vis-network的CSS文件保证样式正常：

<!DOCTYPE html>
<html>
<head>
  <title>Vis Network Demo</title>
  <link rel="stylesheet" href="../node_modules/vis-network/dist/vis-network.min.css">
</head>
<body>
  <div id="network" style="width: 100%; height: 500px;"></div>

  <script>
    // 通过预加载暴露的全局对象访问vis
    const { libVis: vis } = window.attachedLibraries;

    // 示例：创建简单图形
    const nodes = new vis.DataSet([
      {id: 1, label: '节点1'},
      {id: 2, label: '节点2'},
      {id: 3, label: '节点3'}
    ]);

    const edges = new vis.DataSet([
      {from: 1, to: 2},
      {from: 2, to: 3}
    ]);

    const container = document.getElementById('network');
    new vis.Network(container, { nodes, edges }, {});
  </script>
</body>
</html>

二、其他在浏览器端使用npm包的方法 #

1. 直接引入CDN资源 #

如果目标npm包提供CDN版本，可以直接在index.html中通过script标签引入，无需预加载或打包：

<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vis-network/dist/vis-network.min.css">

之后在页面脚本中可直接使用window.vis对象。

2. 使用打包工具（Webpack/Vite） #

对于复杂项目，推荐用Webpack、Vite等打包工具处理渲染进程代码，直接在渲染脚本中导入npm包：

import vis from 'vis-network';
import 'vis-network/dist/vis-network.min.css';

// 直接使用vis创建图形
const nodes = new vis.DataSet([...]);
// ...后续逻辑

打包工具会自动处理依赖树，将所需代码打包为渲染进程可执行的bundle。

3. 开启nodeIntegration（不推荐） #

虽然可以通过开启nodeIntegration: true让渲染进程直接调用require导入npm包，但这会破坏Electron的上下文隔离机制，引入严重安全风险（尤其是应用加载外部内容时），仅适合本地测试场景，生产环境绝对禁用。

内容的提问来源于stack exchange，提问作者Barney