學(xué)習(xí)electron還沒有太久，在項(xiàng)目上進(jìn)一步接觸打包和自動(dòng)更新后也踩了好多坑，百度了很多的資料，我這里對(duì)遇到的問題整理一下，避免后續(xù)想學(xué)習(xí)electron的同學(xué)再次踩坑。

參考：問題解決的參考文檔

• renderer進(jìn)程使用require引入electron 報(bào)錯(cuò)：fs.existsSync is not a function或者Uncaught ReferenceError: require is not defined
• renderer進(jìn)程使用require報(bào)錯(cuò)：Uncaught ReferenceError: window.require is not a function

1.renderer進(jìn)程使用require引入electron 報(bào)錯(cuò)：fs.existsSync is not a function或者Uncaught ReferenceError: require is not defined

不同的頁(yè)面引入報(bào)不一樣的錯(cuò)，如下：
renderer進(jìn)程引入electron （app.vue）:

const { ipcRenderer } = require('electron')

image.png

錯(cuò)誤顯示是node_modules/electron/index.js文件中引入fs.existsSync語句造成的
renderer進(jìn)程引入electron （index.html頁(yè)面）:

const { ipcRenderer } = require('electron')

image.png

百度查資料得知原因是：
(1)、首先在渲染進(jìn)程屬于瀏覽器端，沒有集成Node的環(huán)境，所以類似 fs 這樣的Node的基礎(chǔ)包是不可以使用。
(2)、因?yàn)闆]有Node環(huán)境，所以這種屬于node api的require關(guān)鍵詞是不可以使用的。
(3)、electron5.x的node集成環(huán)境默認(rèn)是關(guān)閉的，這之前的版本是默認(rèn)開啟的
根據(jù)百度提供的方案是在主進(jìn)程中集成 Nodejs，也就是添加配置nodeIntegration: true
通過使用window.require代替require來引入electron，因?yàn)榍罢卟粫?huì)被webpack編譯，在渲染進(jìn)程require關(guān)鍵字就是表示node模塊的系統(tǒng)
渲染進(jìn)程：

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

主進(jìn)程main.js:

let windowConfig = { // 窗口配置程序運(yùn)行窗口的大小
  width: 900,
  height: 700,
  webPreferences: {
    nodeIntegration: true, 
  },
}

配置好重新啟動(dòng)前端工程會(huì)之前的錯(cuò)誤沒有了，但是出現(xiàn) window.require is not a function .錯(cuò)誤

image.png

2.renderer進(jìn)程使用require報(bào)錯(cuò)：Uncaught ReferenceError: window.require is not a function

由此看出直接使用window.require代替require是不可行的,接著百度查找資料，找到一種解決方案：

2.1新建preload.js預(yù)處理文件

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

2.2在main進(jìn)程中添加preload配置項(xiàng),使用了預(yù)加載之后,即使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 渲染進(jìn)程種引入electron中的ipcRenderer

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

把以上三個(gè)步驟引入之后重啟前端工程,又發(fā)現(xiàn)報(bào)錯(cuò)

image.png

不用擔(dān)心，這個(gè)其實(shí)是因?yàn)楣こ淌窃诒镜貫g覽器運(yùn)行的，識(shí)別不了electron中的api,只要保證在electron應(yīng)用程序下運(yùn)行就不會(huì)報(bào)錯(cuò)。我們一般開發(fā)都是在本地瀏覽器調(diào)試，有紅色報(bào)錯(cuò)提示的話看著還是比較礙眼，所以添加一個(gè) is-electron來判斷,處于electron環(huán)境中才執(zhí)行
npm install --save is-electron

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