前言
項(xiàng)目中采用create-react-app及electron進(jìn)行框架搭建時(shí)，在沒(méi)有使用electron時(shí)，一切都可以正常啟動(dòng)。
但是，當(dāng)需要在頁(yè)面中添加 import { dialog,ipcRenderer } from 'electron';時(shí)，開(kāi)始報(bào)錯(cuò)。
錯(cuò)誤內(nèi)容
TypeError: fs.existsSync is not a function
image.png
錯(cuò)誤原因
有種解釋是，create-react-app使用的webpack會(huì)干擾標(biāo)準(zhǔn)模塊的加載，導(dǎo)致了無(wú)法正常使用Node.js的模塊。
但個(gè)人覺(jué)得更為合理的解釋是，electron本身就是node服務(wù)端內(nèi)容，而import默認(rèn)是由webpack來(lái)處理，相當(dāng)于是瀏覽器進(jìn)程來(lái)嘗試加載。瀏覽器進(jìn)程不能調(diào)用服務(wù)進(jìn)程的一些接口，如fs模塊只能在服務(wù)端加載，這時(shí)候在瀏覽器進(jìn)程加載electron就會(huì)報(bào)錯(cuò)。
解決方案
因?yàn)闉g覽器端無(wú)法加載electron，那么，我們可以使用preload預(yù)加載將需要的接口暴露出來(lái)。
- 創(chuàng)建一個(gè)preload.js文件，放在入口文件main.js的同級(jí)目錄下。
global.electron = require('electron');
window.ipcRenderer = require('electron').ipcRenderer;
window.remote = require('electron').remote;
- 修改main.js文件
在入口文件中添加preload配置項(xiàng)，將preload.js作為預(yù)加載文件。預(yù)加載的時(shí)候還是可以使用nodejs里的api
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
preload: __dirname + '/preload.js'
}
});
- 在組件中如下使用即可。
const electron = window.electron;
const remote = window.remote;
console.log(electron)
console.log(remote.dialog)
const {dialog} = window.remote;
dialog.showErrorBox('title', 'content');
參考文檔:
