javascript - 无法在\node_modules\electron 中解析 'fs'

Question

我正在使用 electron-react 样板并希望在 App.tsx 中使用 electron dialog:

const { dialog } = require('@electron/remote') //also tried with import

const Hello = () => {
  const readFromFile = async () => {
    dialog.showOpenDialog({})
  }
  return (
    <>
      <button onClick={() => readFromFile()} >Test</button>
    </>
  )
}

在 main.ts 中，我将以下行放在顶部

require('@electron/remote/main').initialize()

最后我总是得到这个错误:

Module not found: Error: Can't resolve 'fs' in 'C:\Users\myUsername\source\repos\electronTest\node_modules\electron'

我还尝试了 nodeIntegration: true 和 contextIsolation: false

Answer 1

刚刚花了一些时间在这上面，<关于 JS 社区的咆哮>...嗯。也许这会对其他人有所帮助。

tl;dr

您只能在 electron-main 端使用 electron 的导入。

长话短说

Electron 分为electron-main 和electron-renderer。正如其他人所建议的那样，您需要使用指向正确的 electron 的 target 更新 webpack 的配置。

如果您使用的是 electron builder boilerplates 之一，你可能会看到带有一些 webpack 配置的目录 .erb。特别是，可能有一个带有 target = "electron-main"，另一个带有 target = ["web", "electron-renderer"]。所以感觉就像任务完成了；然而，根据webpack's doc on target ，如果您传递一个列表，则会设置一个通用配置。由于 web 不包含 fs，所以公共(public)部分也不包含 fs。

由于上述原因，一些 electron 导入，例如clipboard，只能在应用程序的“electron-main”端使用。

解决方法，例如在应用端使用剪贴板，就是使用IPC在 main 和 renderer 端之间进行通信。