Electron在ndex.html中直接使用require会报错对于需要使用Node.js API的功能，不能直接在页

对于需要使用Node.js API的功能，不能直接在页面导入使用

例如：在index.html中引入const puppeteer = require('puppeteer');会报错

正确的做法是在preoload.js文件中去处理：

const { contextBridge } = require('electron')
const { test } = require('./js/test.js')

contextBridge.exposeInMainWorld('versions', {
  test: test,        
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron
  // 除函数之外，我们也可以暴露变量
})

在页面中调用方法

<button onclick="window.versions.test()">
//这里的versions跟preload文件中的versions对应
    test
</button>

这是因为 Electron 的安全机制设计,主要有以下原因：

安全隔离：
- 渲染进程不能直接访问 Node.js API
- 通过 preload 脚本可以控制渲染进程能访问的功能
- 防止恶意脚本直接访问系统资源
进程通信：
- preload 脚本作为主进程和渲染进程之间的桥梁
- 可以安全地暴露需要的 API 和功能