zoukankan      html  css  js  c++  java
  • Electron结合React开发环境遇到的问题

    链接

    create-react-appelectron集成在了一个项目中。但是在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({
         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;
    

      完成

  • 相关阅读:
    Linux文件结构
    磁盘分区
    BASH简介
    磁盘的基本概念
    Linux文件操作
    创建文件系统
    文件系统挂载
    一些常用命令
    asp.net创建PPT
    asp.net创建、删除、移动文件夹 文件
  • 原文地址:https://www.cnblogs.com/lfqcode/p/9534754.html
Copyright © 2011-2022 走看看