Electron结合React，在渲染进程中使用 node 模块

「爱情、让人受尽委屈。」 2022-10-04 15:00 128阅读 0赞

# Electron结合React，在渲染进程中使用 node 模块 #

## 问题 ##

将`create-react-app`与`electron`集成在了一个项目中。但是在React中无法使用`electron`。当在React中使用`require('electron')`时就会报`TypeError: fs.existsSync is not a function`的错误。因为React中无法使用Node.js的模块.

## 解决方法1 ##

利用`window.require`引入

const electron = window.require('electron')

## 解决方法2 ##

1.  创建`preload.js`文件

在项目目录下新建`preload.js`文件,该文件是预加载的`js`文件，并且在该文件内可以使用所有的`Node.js`的`API`。在`preload.js`中添加

global.electron = require('electron')

1.  修改`main.js`文件

修改创建浏览器的入口代码,添加`preload`配置项。将`preload.js`作为预加载文件

const mainWindow = new BrowserWindow({
        
    		width: 800,
    		height: 600,
    		// frame: false,
    		webPreferences: {
        
    			preload: path.join(__dirname, 'preload.js'),
    			nodeIntegration : true,
                contextIsolation: false  //Electron 12.0以上版本需要的额外设置此项
    		}
    	})

或者修改`piblic/index.html`文件

在`<div id="root"></div>`前引入`preload.js`文件

<script>require('./preload.js')</script><div id="root"></div>

最后在`React`组件中如下使用`electron`

const electron = window.electron;

发表评论取消回复

表情：

评论列表（有 0 条评论，128人围观）

还没有评论，来说两句吧...

相关阅读

相关 Electron结合React使用

React Electron 1. 一种是自己重新基于 create-react-app脚手架弄一个，可能对于前端开发者而言这种更加熟悉一点。 2. 一种是使用git

Love The Way You Lie/ 2023年05月28日 12:44/ 0 赞/ 149 阅读

相关 react 渲染数组_了解如何在React中渲染数组

react 渲染数组介绍 (Introduction) This article will teach you how to render an array in R

忘是亡心i/ 2022年11月28日 15:25/ 0 赞/ 305 阅读

相关 Electron 12 学习（十）渲染进程直接发送消息到其他渲染进程

1. 源码： [GitHub][] [Gitee][] [CodeChina][] [GitHub]: https://github.

拼搏现实的明天。/ 2022年10月14日 13:52/ 0 赞/ 130 阅读

相关在 Node.js 中使用 ECMAScript 模块

ECMAScript （简称 ES）模块化 JavaScript 代码以供重用的官方标准格式，它使用 import 和 export 语句定义模块： // 模块导入示

深藏阁楼爱情的钟/ 2022年10月14日 12:54/ 0 赞/ 144 阅读

相关 Electron结合React，在渲染进程中使用 node 模块

Electron结合React，在渲染进程中使用 node 模块问题将`create-react-app`与`electron`集成在了一个项目中。但是在Rea

「爱情、让人受尽委屈。」/ 2022年10月04日 15:00/ 0 赞/ 129 阅读

相关 electron之主进程、渲染进程

一、electron启动后的进程主进程 GUP渲染进程界面渲染进程各个进程相互独立，彼此进程是不会共享内存和状态的。 1、主进程 ele

今天药忘吃喽~/ 2022年09月12日 03:56/ 0 赞/ 338 阅读

相关 electron 主进程向渲染进程发送事件，渲染进程监听事件

有时候需要主进程向渲染进程发送消息，代码如下：主进程执行： mainWindow.webContents.send('main-process-messages', 'n

短命女/ 2022年05月23日 08:49/ 0 赞/ 511 阅读

相关使用 Electron 在两个进程 (主进程和渲染进程) 之间进行通讯

> 此系列文章的应用示例已发布于 [GitHub: electron-api-demos-Zh\_CN][GitHub_ electron-api-demos-Zh_CN].

本是古典何须时尚/ 2022年02月04日 15:37/ 0 赞/ 417 阅读

相关 electron 渲染进程和主进程调试配置

渲染进程调试(进入网页版的f12调试模式): ctrl shift i View->toggle Developer tools

怼烎@/ 2021年07月25日 02:34/ 0 赞/ 517 阅读

相关 electron 主进程和渲染进程通信

1、主进程引入 const {ipcMain} = require('electron') 2、渲染进程引入 const {ipc

- 日理万妓/ 2021年07月24日 11:05/ 0 赞/ 579 阅读