Electron中require報錯的解決與分析

環境：Electron 7

使用 Create-React-App 模板

運行時發生的錯誤：

TypeError: fs.existsSync is not a function

• 發生錯誤的代碼（在 render 進程中）：

const {desktopCapturer} = require('electron')

• 處理方法：

const {desktopCapturer} = window.require('electron')

 

---

 

在 Electron 的 Issue #7300 中找到了解決方案，作為一名 Electron 以及 Web 前端的初學者，自然要在此問題上稍加分析，爭取多了解一些背景知識，提高學習質量。

• 此問題出現的原因為：nodejs 運行時的 require 與編譯時 webpack 的 require 是不同的。默認情況下，window 是全局的，然而在 webpack 編譯時會忽略 window 。

• 其他的解決方案：使用 preload 方法

  mainWindow = new BrowserWindow({
    width: 800, 
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      preload: __dirname + '/preload.js'
    }
  });

在 preload.js 文件中將要使用的模塊引入即可

window.ipcRenderer = require('electron').ipcRenderer;