Electron 常见问题

Electron 常见问题

Electron 使用 chokidar 导致编译后白屏的问题

• 问题出现场景：

配置的是 contextIsolation 为 false ，可以在 renderer 进程中去使用 node 的包，使用 chokidar 去监听文件变化，windows 上面打包可以正常运行，mac 上打包出现了白屏

const mainWindow = new CrateMainWindow({
  width: 1200,
  minWidth: 1200,
  height: 800,
  minHeight: 800,
  useContentSize: true,
  show: false,
  frame: false,
  titleBarStyle: platform().includes('win32') ? 'default' : 'hidden',
  webPreferences: {
    experimentalFeatures: true,
    contextIsolation: false,
    nodeIntegration: true,
    webSecurity: false,
    devTools: true,
    scrollBounce: process.platform === 'darwin'
  }
})

• 解决办法

打包是通过 webpack5 进行打包，由于是在浏览器端直接进行调用 node 的包，所有需要再 main 和 renderer 的配置中加入以下配置

// webpack.renderer.js
module.exports = {
  externals: [
    'fsevents'
  ]
}

// webpack.main.js
module.exports = {
  externals: [
    'fsevents',
    // dependencies 为 package.json 中 dependencies 中的包名
    ...Object.keys(dependencies || {})
  ]
}

最后重新 build 一下就可以正常运行了