Electron 不知道 require

如果你正在使用 Electron，你可能已经注意到某些模块无法在渲染进程中使用 require。这是因为在渲染进程中，Node.js 的原生模块和 Electron 的额外 API 是不可用的。因此，不能在浏览器中直接使用 require。

为了解决这个问题，我们需要使用 preload 脚本。preload 脚本是渲染进程和主进程之间的桥梁。它为渲染进程提供了一个与 node.js 环境的通信接口，允许在渲染进程中使用 node.js 的原生模块和 Electron 的额外 API。以下是一个简单的例子：

// preload.js
const { ipcRenderer } = require('electron');

window.addEventListener('DOMContentLoaded', () => {
  ipcRenderer.send('dom-ready');
});

在你的 HTML 文件中，添加以下标记：

<script src="preload.js"></script>

这样，preload 脚本就可以在渲染进程中使用 Electron 的 API，而不需要使用require。

不幸的是，最初的问题结束了，新的问题随之而来：如何防止注入不受信任的代码？由于预加载脚本具有与 Node.js API 的完全访问权限，因此它很容易被利用来执行恶意代码。为了解决这个问题，我们需要使用 Electron 的上下文桥梁。

以下是一个基本的例子：

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electron', {
  send: (channel, data) => {
    ipcRenderer.send(channel, data);
  },
  receive: (channel, func) => {
    ipcRenderer.on(channel, (event, ...args) => func(...args));
  }
});

在 HTML 中，额外添加以下标记：

<script src="preload.js"></script>
<script>
  const electron = window.electron;

  electron.receive('dom-ready', () => {
    const result = electron.sendSync('example', 'hello world');
    console.log(result); // 'hello world'
  });
</script>

现在，你可以在渲染进程中使用 electron.send 和 electron.receive 来与主进程进行通信。这些方法只公开了通过 Electron API 注册的消息通道。使用相同的方法，你可以轻松地编写代码，以便只公开你需要的 API，从而减少安全漏洞的风险。

以上就是使用 preload 脚本在渲染进程中使用 Node.js 和 Electron API 的全部信息，希望对你有所帮助！