Reactjs 如何使用fs与电子反应？

我想使用react+webpack+electron构建一个桌面应用程序。如何将

fs

模块插入react，以便我可以使用它读取本机文件？ 我有一个组件，例如：

class Some extends Component {
  render() {
    return <div>{this.props.content}</div>
  }
}
export default Some;

我使用webpack将js代码构建到bundle.js和index.html中

...
<div id="app"></div>
<script src="bundle.js"></script>
...

我在互联网上找到这个配置，因为如果我不添加它，网页会报告错误，但我不知道这意味着什么

我有一个非常简单的

main.js

，它与electron quick start的main.js相同

我会丢失一些重要的东西吗

---

如果你能在github repo上提供一个已有的示例，那就再好不过了。

最简单的方法可能是使用，你可以在中找到使用它的示例。

使用

窗口。require（）

而不是

require（）

---

首先：不要浪费时间使用带有react和electron的网页，react已经拥有了构建时自行打包所需的一切

正如侯赛因在回答中所说：

const fs = window.require('fs');

这对我很有用

此外，在electron的main.js上的webpreferences上，我还设置了以下设置：

webPreferences: {
  preload: path.join(__dirname, 'preload.js'),
  nodeIntegration: true,
  enableRemoteModule: true,
  contextIsolation: false,
  nodeIntegrationInWorker: true,
  nodeIntegrationInSubFrames: true
}

---

根据electron网站的信息，webpreferences是一个安全问题，因此我们需要找到更好、更安全的方法，如所述

这帮助我解决了问题！非常感谢你！我已经被这个问题困扰了3天，我甚至在使用webpack时只得到了更多的错误，而没有得到正确的解决方案。

const fs = window.require('fs');

const fs = window.require('fs');

webPreferences: {
  preload: path.join(__dirname, 'preload.js'),
  nodeIntegration: true,
  enableRemoteModule: true,
  contextIsolation: false,
  nodeIntegrationInWorker: true,
  nodeIntegrationInSubFrames: true
}