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;

　　完成