如何在Electron的React代码中启用NodeJS并访问fs模块？

1. 确认主进程BrowserWindow配置有效性 #

确保主进程（如main.js）的BrowserWindow配置中，以下参数正确设置且未被覆盖：

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    enableRemoteModule: true // Electron 14+已弃用，新版本可忽略此项
  }
});

注意：Electron 12及以上版本中contextIsolation默认值为true，必须显式设为false才能让渲染进程直接访问Node.js模块。

2. 修改React打包工具配置 #

React项目常用的Webpack/CRA默认会排除Node.js模块，需针对性修改配置：

针对Create React App（CRA）项目 #

• 安装依赖工具：

  npm install react-app-rewired customize-cra --save-dev
  

• 项目根目录创建config-overrides.js文件，添加内容：

  const { override, addWebpackResolve } = require('customize-cra');
  
  module.exports = override(
    addWebpackResolve({
      fallback: {
        "fs": false,
        "path": require.resolve("path-browserify")
      }
    })
  );
  

• 修改package.json中的启动脚本：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
  

针对自定义Webpack配置项目 #

在webpack.config.js中添加resolve.fallback配置：

module.exports = {
  // 其他配置项
  resolve: {
    fallback: {
      "fs": false,
      "path": require.resolve("path-browserify")
    }
  }
};

设置fs: false是告知Webpack无需在浏览器环境下解析fs模块，转而通过Electron的Node集成直接访问。

3. 在React组件中正确引入fs #

配置完成后，直接使用require引入模块（不建议用ES模块import，避免额外配置成本）：

const fs = require('fs');

// 示例：读取文件操作
const readTestFile = () => {
  fs.readFile('./test.txt', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data);
  });
};

4. 验证Electron启动流程 #

确保主进程正确加载React页面：

// main.js
mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);

开发环境下需先启动React dev server，再启动Electron。

内容的提问来源于stack exchange，提问作者PatS