Electron + React(CRA)保存文件到本地触发React重载该如何解决？

1. 应用自动重载问题解决 #

触发重载的核心原因是CRA内置的webpack-dev-server默认监听项目根目录下所有文件变动，写入的JSON文件落在监听范围内就会触发重编译重载，按以下步骤修复：

• 禁止将写入的JSON文件放在src、public等开发监听目录下，统一存储到Electron提供的用户数据目录app.getPath('userData')，该目录位于项目开发目录外，不会触发devServer监听。
• 若开发阶段需要临时存储在项目目录内，可通过craco或react-app-rewired覆盖CRA默认的devServer配置，给watchOptions.ignored添加你存放JSON文件的目录匹配规则，即可跳过对该目录的变动监听。
• 无需引入react-hot-loader，该工具无法解决文件变动触发的重编译重载问题，调整监听规则即可完全解决。

2. JSON写入失败问题解决 #

写入失败常见原因是调用上下文错误或路径配置错误，按以下步骤排查修复：

• 禁止在React渲染线程直接调用fs模块，CRA的前端打包流程会默认剔除或polyfill node核心模块，导致fs调用失效。所有文件读写逻辑必须放在Electron主进程实现，通过IPC通信实现渲染进程和主进程的交互。
• 禁止使用相对路径写入文件，开发环境和打包后生产环境的工作目录完全不同，相对路径会指向意料之外的位置。统一用绝对路径，优先拼接app.getPath('userData')作为存储根路径，该路径在所有环境下都有可写权限，不会出现权限不足或路径不存在的问题。
• 写入前如果涉及嵌套目录，必须先调用fs.mkdirSync(targetDir, { recursive: true })创建完整目录结构，避免因父级目录不存在导致写入失败。
• 所有写入操作都要添加异常捕获逻辑，通过回调error参数或try catch捕获异常，可快速定位权限、路径类问题。

参考实现代码 #

预加载脚本（preload.js） #

用于安全暴露IPC能力给渲染线程，无需开启nodeIntegration：

const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electron', {
  invokeIpc: (channel, ...args) => ipcRenderer.invoke(channel, ...args)
})

主进程逻辑 #

const { app, ipcMain, BrowserWindow } = require('electron')
const fs = require('fs')
const path = require('path')

// 统一配置存储路径
const NOTE_STORE_PATH = path.join(app.getPath('userData'), 'notes.json')

// 窗口初始化时配置预加载脚本
function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,
      contextIsolation: true
    }
  })
  // 开发环境填CRA启动的本地地址，生产环境填打包后的HTML路径
  mainWindow.loadURL('http://localhost:3000')
}

// 监听渲染线程的写入请求
ipcMain.handle('write-notes', async (_, noteData) => {
  try {
    const dataStr = JSON.stringify(noteData, null, 2)
    fs.writeFileSync(NOTE_STORE_PATH, dataStr, 'utf-8')
    return { success: true }
  } catch (err) {
    return { success: false, msg: err.message }
  }
})

app.whenReady().then(() => createWindow())

React渲染线程调用逻辑 #

// React组件内调用保存逻辑
const saveNoteData = async (data) => {
  const res = await window.electron.invokeIpc('write-notes', data)
  if (!res.success) {
    console.error('存储失败：', res.msg)
  }
}

内容的提问来源于stack exchange，提问作者홍우지