Electron结合React开发环境遇到的问题

将create-react-app与electron集成在了一个项目中。但是在React中无法使用electron

当在React中使用require('electron')时就会报TypeError: fs.existsSync is not a function的错误。因为React中无法使用Node.js的模块.

解决方案如下

创建renderer.js文件

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

global.electron = require('electron')

修改main.js文件

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

mainWindow = new BrowserWindow({

    width: 800,

    height: 600,

    autoHideMenuBar: true,

    fullscreenable: false,

    webPreferences: {

        javascript: true,

        plugins: true,

        nodeIntegration: false, // 不集成 Nodejs

        webSecurity: false,

        preload: path.join(__dirname, './public/renderer.js') // 但预加载的 js 文件内仍可以使用 Nodejs 的 API

    }

  })

修改piblic/index.html文件

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

<script>require('./renderer.js')</script>

<div id="root"></div>

在React组件中如下使用electron

const electron = window.electron;

　　完成

巴特西

Electron结合React开发环境遇到的问题

最新文章

热门文章