使用electron中遇到的问题总结

学习electron还没有太久，在项目上进一步接触打包和自动更新后也踩了好多坑，百度了很多的资料，我这里对遇到的问题整理一下，避免后续想学习electron的同学再次踩坑。

参考：问题解决的参考文档

• renderer进程使用require引入electron 报错：fs.existsSync is not a function或者Uncaught ReferenceError: require is not defined
• renderer进程使用require报错：Uncaught ReferenceError: window.require is not a function

1.renderer进程使用require引入electron 报错：fs.existsSync is not a function或者Uncaught ReferenceError: require is not defined

不同的页面引入报不一样的错，如下：
renderer进程引入electron （app.vue）:

const { ipcRenderer } = require('electron')

image.png

错误显示是node_modules/electron/index.js文件中引入fs.existsSync语句造成的
renderer进程引入electron （index.html页面）:

const { ipcRenderer } = require('electron')

image.png

百度查资料得知原因是：
(1)、首先在渲染进程属于浏览器端，没有集成Node的环境，所以类似 fs 这样的Node的基础包是不可以使用。
(2)、因为没有Node环境，所以这种属于node api的require关键词是不可以使用的。
(3)、electron5.x的node集成环境默认是关闭的，这之前的版本是默认开启的
根据百度提供的方案是在主进程中集成 Nodejs，也就是添加配置nodeIntegration: true
通过使用window.require代替require来引入electron，因为前者不会被webpack编译，在渲染进程require关键字就是表示node模块的系统
渲染进程：

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

主进程main.js:

let windowConfig = { // 窗口配置程序运行窗口的大小
  width: 900,
  height: 700,
  webPreferences: {
    nodeIntegration: true, 
  },
}

配置好重新启动前端工程会之前的错误没有了，但是出现 window.require is not a function .错误

image.png

2.renderer进程使用require报错：Uncaught ReferenceError: window.require is not a function

由此看出直接使用window.require代替require是不可行的,接着百度查找资料，找到一种解决方案：

2.1新建preload.js预处理文件

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

2.2在main进程中添加preload配置项,使用了预加载之后,即使nodeIntegration为false,也可以使用Node API访问到ipcRenderer

const path = require('path')
let windowConfig = {
  width: 1000,
  height: 800,
  webPreferences: {
    nodeIntegration: false,
    preload: path.join(__dirname, 'preload.js'),
  },
}

2.3 渲染进程种引入electron中的ipcRenderer

      const ipcRenderer = window.ipcRenderer
      ipcRenderer.on('message', (event, data) => {
        console.log('message', data.msg)
      })

把以上三个步骤引入之后重启前端工程,又发现报错

image.png

不用担心，这个其实是因为工程是在本地浏览器运行的，识别不了electron中的api,只要保证在electron应用程序下运行就不会报错。我们一般开发都是在本地浏览器调试，有红色报错提示的话看着还是比较碍眼，所以添加一个 is-electron来判断,处于electron环境中才执行
npm install --save is-electron

 if (isElectron()) {
      const ipcRenderer = window.ipcRenderer
      ipcRenderer.on('message', (event, data) => {
        console.log('message', data.msg)
      })
}