如何在 Electron.Atom\WebPack 应用程序中使用 FS module？

IT技术 javascript node.js reactjs npm electron

2021-04-08 01:49:39

我需要使用 FS module (fs.writeFile) 在文件中写入一些数据。我的堆栈是 webpack + react + redux + electron。

第一个问题是：无法解析module 'fs'。我试着用

target: "node",
---
node: {
    global: true,
    fs: "empty",
}
---
resolve: {
    root: path.join(__dirname),
    fallback: path.join(__dirname, 'node_modules'),
    modulesDirectories: ['node_modules'],
    extensions: ['', '.json', '.js', '.jsx', '.scss', '.png', '.jpg', '.jpeg', '.gif']
},

经过多次尝试，问题得到解决（node: {fs: "empty"}）。但是还有第二个问题：screenshot。

//In method componentDidMount (React)
console.log('fs', fs);
console.log('typeOf', typeof fs.writeFile);

//By clicking on the button
console.log(fs);
console.log(typeof fs.writeFile);

可以看到，那个fs是空对象，并且方法 writeFile 不存在。我试图更改 webpack 的配置。

const path = require('path');
const fs = require('fs');
const webpack = require("webpack");
console.log(fs);

在这种情况下fs不为空。

如何解决这个问题呢？有任何想法吗？

2个回答

问题解决了。

需要在电子应用程序中使用（添加包的地方）：

var remote = require('electron').remote;
var electronFs = remote.require('fs');
var electronDialog = remote.dialog;

您是否将此添加到您的主要电子进程（即 main.js）？我添加了这些定义，但不知道如何处理它们...

2021-06-10 01:49:39

请务必阅读electron.remote：“在 Electron 中，与 GUI 相关的module（例如对话框、菜单等）仅在主进程中可用，而不在渲染器进程中可用。为了从渲染器进程中使用它们，ipcmodule是向主进程发送进程间消息所必需的。使用远程module，您可以调用主进程对象的方法，而无需显式发送进程间消息”

2021-06-11 01:49:39

除了接受的答案。

如果你使用Webpack（比如当你使用 Angular、React 或其他框架时）require将被解析webpack，这将在运行时破坏它的使用。

使用window.require来代替。

前任：

var remote = window.require('electron').remote;
var electronFs = remote.require('fs');
var electronDialog = remote.dialog;

注意：没有必要使用 remote 来从渲染器进程访问任何 Node API，因为它是完全公开的。

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

会做。

更新

从 Electron v5 开始，Node API 不再默认暴露在渲染进程中！

nodeIntegration标志的默认值从 true 更改为false。

您可以在创建浏览器窗口时启用它：

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true, // <--- flag
            nodeIntegrationInWorker: true // <---  for web workers
        }
    });
});

激活节点集成的安全风险

nodeIntegration: true仅当您在应用程序中执行一些不受信任的远程代码时才会存在安全风险。例如，假设您的应用程序打开了第三方网页。这将是一个安全风险，因为第三方网页将可以访问节点运行时并可以在您用户的文件系统上运行一些恶意代码。在这种情况下，设置nodeIntegration: false. 如果你的应用没有显示任何远程内容，或者只显示受信任的内容，那么设置nodeIntegration: true就可以了。

其它你可能感兴趣的问题

上一篇在 React 中创建 Web Worker 下一篇react-native项目更改android和ios的入口文件路径