// 主進程
const {app, BrowserWindow, ipcMain} = require('electron')
app.on('ready', () => {
// 新建窗口
const win = new BrowserWindow()
// 開啓開發工具
win.webContents.openDevTools()
// 窗口加載頁面
win.loadFile('./layout/index.html')
})
//渲染進程
<script>
const ele = require('electron')
console.log(ele)
</script>
electron界面控制檯本應該輸出結果，但是控制檯報錯，Uncaught ReferenceError: require is not defined
解決方案一：
看看是否重命名了require如果你項目中使用了jQuery/RequireJS/Meteor/AngularJS等框架，如果使用了，就必須先禁用node特性或者在頁面加載上面那些框架之前給require重命名並且刪除delete window.require;delete window.exports;delete window.module;
具體解決辦法如下：
// In the main process.
const { BrowserWindow } = require('electron')
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: false
}
})
win.show()
或者
<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<!-- 再引入jq等框架所需js <===把我當作註釋吧 -->
<script type="text/javascript" src="jquery.js"></script>
</head>
之後在使用require的地方需要使用nodeRequire替代。
我是這樣使用的
//渲染進程
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script>
const ele = nodeRequire('electron')
console.log(ele)
</script>
解決方案二：
主進程代碼如下：
const {app, BrowserWindow, ipcMain} = require('electron')
const path = require('path')
app.on('ready', function() {
// 創建頁面
const win = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
})
// 開啓開發者工具
win.webContents.openDevTools()
// 導入渲染進程
win.loadFile('./layout/index.html')
})
渲染進程代碼如下：
<script>
const ele = require('electron')
console.log(ele)
</script>
在原代碼基礎上，就增加了一句，將支持完整node改爲true，即：
webPreferences: {
nodeIntegration: true
}
代碼即可正常運行，require不再報錯，但是問題是，之前查了好多資料，都是提到因爲要避免框架與node.js的衝突，都是建議用electron的時候將nodeIntegration禁止，而且查看文檔的時候，文檔提到nodeIntegration是默認爲true的。
解決方案三：
1,創建renderer.js文件
global.electron = require('electron');
2,修改main.js文件
修改創建瀏覽器的入口代碼,添加preload配置項。將renderer.js作爲預加載文件。
win = new BrowserWindow({
width: 1000,
height: 800,
webPreferences: {
javascript: true,
plugins: true,
nodeIntegration: true, // 是否集成 Nodejs
webSecurity: false,
preload: path.join(__dirname, '../public/renderer.js') // 但預加載的 js 文件內仍可以使用 Nodejs 的 API
}
})
3,在React組件中如下使用electron
const electron = window.electron;
因爲要使用進程通訊，所以可以在渲染進程中直接這麼寫：
const ipcRenderer = window.electron.ipcRenderer;
在此時，就沒有那個TypeError: fs.existsSync is not a function 的報錯了。
當然了，產生這些問題的主要原用是react作爲前端工程沒有使用Node的環境。