前言
项目中采用create-react-app及electron进行框架搭建时，在没有使用electron时，一切都可以正常启动。
但是，当需要在页面中添加 import { dialog,ipcRenderer } from 'electron';时，开始报错。
错误内容
TypeError: fs.existsSync is not a function
image.png
错误原因
有种解释是，create-react-app使用的webpack会干扰标准模块的加载，导致了无法正常使用Node.js的模块。
但个人觉得更为合理的解释是，electron本身就是node服务端内容，而import默认是由webpack来处理，相当于是浏览器进程来尝试加载。浏览器进程不能调用服务进程的一些接口，如fs模块只能在服务端加载，这时候在浏览器进程加载electron就会报错。
解决方案
因为浏览器端无法加载electron，那么，我们可以使用preload预加载将需要的接口暴露出来。
- 创建一个preload.js文件，放在入口文件main.js的同级目录下。
global.electron = require('electron');
window.ipcRenderer = require('electron').ipcRenderer;
window.remote = require('electron').remote;
- 修改main.js文件
在入口文件中添加preload配置项，将preload.js作为预加载文件。预加载的时候还是可以使用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');
参考文档:
