electron渲染进程报错

短命女 2023-02-14 10:40 23阅读 0赞

**以一下为例：**

TypeError: fs.existsSync is not a function | import { ipcRenderer } from 'electron'

## 产生问题的原因： ##

1、首先在渲染进程属于浏览器端，没有集成Node的环境，所以类似 fs 这样的Node的基础包是不可以使用。

2、因为没有Node环境，所以require关键词是不可以使用的。

## 弄清楚这个就一起解决问题吧： ##

**方案一：**

渲染进程

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

主进程

const win = new BrowserWindow({
        webPreferences: {
          nodeIntegration: true
        }
      })

使用这种方式能够是electron为前端工程提供Node的环境，让程序能够正常运行。

但是，单独启动前端工程会出现 window.require is not a function .

**方案二：**

来源于StackOverflow

1、创建 a preload.js 文件:

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

2、在main.js文件中的 webPreferen中设置预加载preload:

mainWindow = new BrowserWindow({
        width: 800, 
        height: 600,
        webPreferences: {
          nodeIntegration: false,
          preload: __dirname + '/preload.js'
        }
      });

3、渲染进程

componentDidMount() {
    		  if (isElectron()) {
    			console.log(window.ipcRenderer);
    			window.ipcRenderer.on('pong', (event, arg) => {
    				this.setState({ipc: true})
    			})
    			window.ipcRenderer.send('ping')
    		}
    	}

**方案三：**

来源以 github

如果你使用TypeScript可以这样做：

import {IpcRenderer} from 'electron';
     
    declare global {
      interface Window {
        require: (module: 'electron') => {
          ipcRenderer: IpcRenderer
        };
      }
    }

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

**方案四：**

读了N个electron项目后，写成的一种解决方案：

直接上代码

externals(context, request, callback) {
        const isDev = process.env.NODE_ENV === 'development';
        let isExternal = false;
        const load = [
          'electron',
          'fs',
          'path',
          'os',
          'url',
          'child_process'
        ];
        if (load.includes(request)) {
          isExternal = `require("${request}")`;
        }
        const appDeps = Object.keys(require('./app/package').dependencies);
        if (appDeps.includes(request)) {
          const orininalPath = slash(join(__dirname, './app/node_modules', request));
          const requireAbsolute = `require('${orininalPath}')`;
          isExternal = isDev ? requireAbsolute : `require('${request}')`;
        }
        callback(null, isExternal);
      },

发现了吗，在前端工程配置的时候，默认设置externals参数，在使用require的时候会查看默认加载的模块中有没有，按需加载模块，如果初始加载的模块中没有该模块，会向上级目录./app/package查找模块。