如何在React、ES6和Electron应用中使用本地Node模块？

Question

我有一个用React和Electron开发的应用程序，希望能够从使用Babel和Webpack编译后的ES6中访问原生的node模块。

例如，当我尝试要求“fs”节点模块以访问文件系统时，会出现以下错误。

ERROR in ./src/app.js Module not found: Error: Cannot resolve module 'fs' in C:\Users\Propietario-1\Documents\GitHub\AMPLI @ ./src/app.js 1:358-371

但是当我从一个“未编译”的js文件中要求它时，它起作用了。我可以访问“fs”模块。 感谢任何帮助。 更新（2016-08-28）： 我最终在index.html的脚本标签中要求了“fs”模块，调用了捆绑的脚本。它起作用了！

<script>
const fs = require('fs');

require('bundle.js');
</script>

操作完成后，fs变成了全局变量，可供bundle.js中的所有脚本使用。请确保编辑您的代码检查器选项，避免覆盖它或导致undef错误。

- ivan quintero

---

你是否在浏览器中尝试访问 fs 模块？ - Tamas Hegedus

你尝试过 npm i fs 吗？ - Maxwelll

请将您的“更新答案”部分作为对自己问题的回答发布。 - robbmj

Answer 1

Electron运行为两个进程：主节点进程和渲染进程，有点像传统的Web浏览器客户端和服务器之间的关系。渲染进程不能使用不适合浏览器的Node模块（例如fs），因为它基本上是一个浏览器。

提供了两种方法来在渲染进程和主进程之间通信：ipcRenderer和remote。对于简单的任务，remote更容易使用。要从您的webpacked react项目中使用fs模块，在渲染进程中：

var fs = require('electron').remote.require('fs');

- mccleanp

---

谢谢你的回答。我不知道“remote”的存在。然而，它似乎仍然无法正常工作。我按照你说的要求了fs，但它仍然显示无法解析该模块。目前，我选择在调用捆绑脚本的index.html文件中将fs模块作为全局变量const fs = require('fs')来引用。这样可以正常工作。 - ivan quintero

@mccleanp 你救了我的生命！我一直在尝试在 Electron 应用程序中让 odbc 生效已经三天了。我打开了大约100个浏览器标签页，而这是我第一次听说remote。它很好地运行。看着你的资料，这是你在 StackOverflow 上唯一的答案。好吧，我只想说谢谢你抽出时间回答这个问题。你救了我不失去理智 :) - Joshua Pinter

Answer 2

我最终在 index.html 的 script 标签中调用了打包的脚本，并要求使用 fs 模块。它有效了！

<script>
const fs = require('fs');

require('bundle.js');
</script>

完成此操作后，fs 将成为全局变量，可供 bundle.js 中的所有脚本使用。只需确保编辑您的 linter 选项以避免覆盖它或出现 undef 错误。

- ivan quintero