使用 React、Vite 和 Typescript 的 Electron 应用程序无法加载预加载脚本

Question

我使用 sandbox: false 开始我的项目，这是一种糟糕的安全实践。注意到我的错误后，我将其更改为 true，通过这样做，我收到以下错误：

VM4 sandbox_bundle:2 Unable to load preload script: C:\work\projectplace\project\out\preload\index.mjs
VM4 sandbox_bundle:2 
SyntaxError: Cannot use import statement outside a module
    at runPreloadScript (VM4 sandbox_bundle:2:83494)
    at VM4 sandbox_bundle:2:83813
    at VM4 sandbox_bundle:2:83968
    at ___electron_webpack_init__ (VM4 sandbox_bundle:2:83972)
    at VM4 sandbox_bundle:2:84095

我开始评论我的index.ts（预加载）的每个地方，我发现由于某种原因，如果我导入一些东西，比如说contextBridge，并打印它，代码就会中断：

import { contextBridge, ipcRenderer } from 'electron'

console.log('Preload script loaded successfully.')

if (process.contextIsolated) {
  try {
    console.log('Context is isolated.')
    console.log(contextBridge)
  } catch (error) {
    console.log('------------------')
    console.error(error)
    console.log('------------------')
  }
} else {
  console.log('Context is not isolated.')

  // @ts-ignore (define in dts)
  // window.electron = electronAPI
  // // @ts-ignore (define in dts)
  // window.api = api
}

我在这个项目上使用了 electro-vite(https://electron-vite.org/) 包。

Answer 1

如 Electron 有关 ESM 的文档中所述：

沙盒预加载脚本无法使用 ESM 导入

沙盒预加载脚本作为纯 JavaScript 运行，无需 ESM 上下文。如果您需要使用外部模块，我们建议您使用捆绑器来预加载代码。加载

electron

API 仍然通过

require('electron')

完成。

如果您不使用捆绑器并希望保持沙盒启用状态，请在预加载时使用

require

而不是

import

。