問題
將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
-
創建
preload.js文件
在項目目錄下新建preload.js文件,該文件是預加載的js文件，並且在該文件內可以使用所有的Node.js的API。在preload.js中添加
global.electron = require('electron')
-
修改
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;