Electron+Webpack项目报Uncaught ReferenceError: fs is not defined怎么解决？

问题原因 #

• 你配置的fs外部模块规则写在了webpack.main.config.js中，该配置仅对Electron主进程生效，渲染进程的打包配置是独立的webpack.renderer.config.js，并未继承该规则。
• 即便给渲染进程配置了对应的externals规则，Electron默认关闭了渲染进程的Node.js集成权限，运行时渲染进程上下文根本不存在fs这个全局Node模块变量，所以打包后的代码直接引用fs就会抛出未定义错误。

修复方案 #

方案一：使用预加载脚本（官方推荐，安全性最高） #

符合Electron安全最佳实践，不需要开启渲染进程的Node集成，不会引入安全风险。

1. 新建src/preload.js预加载脚本，通过上下文桥按需暴露你需要的文件操作能力给渲染进程：

const { contextBridge } = require('electron');
const fs = require('fs');

// 只暴露业务需要的方法，不要直接把整个fs模块抛给渲染进程
contextBridge.exposeInMainWorld('electronFs', {
  readFile: (path, encoding = 'utf-8') => fs.readFileSync(path, encoding),
  writeFile: (path, content) => fs.writeFileSync(path, content)
});

2. 修改主进程中创建浏览器窗口的配置，指定预加载脚本路径，保持默认的安全配置不变：

const path = require('path');
const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    // 以下两项为Electron默认配置，不需要修改，不要手动设为false
    // nodeIntegration: false,
    // contextIsolation: true
  }
});

3. 渲染进程中直接调用暴露的全局方法即可，不需要再引入fs模块：

// renderer.js 示例
const fileContent = window.electronFs.readFile('/test/path.txt');

方案二：开启渲染进程Node集成（仅适合无外部页面加载的本地自用项目） #

如果你的项目完全不会加载任何第三方外部页面，可以用这个更简单的方案。

1. 修改主进程窗口配置，开启Node集成、关闭上下文隔离：

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false
  }
});

2. 将fs的externals配置添加到webpack.renderer.config.js中：

// webpack.renderer.config.js
module.exports = {
  // 保留原有配置不变，新增以下内容
  externals: {
    'fs': 'commonjs fs'
  }
};

3. 此时你原来在renderer.js中写的const fs = require('fs')即可正常运行。

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