javascript - Uncaught ReferenceError : dialog is not defined

Question

我正在尝试在 electron 中创建一个按钮打开一个对话框来打开文件。 (在本例中，只需打印其名称)

这是我的 index.html 中的按钮:

 <div class="alse-element">
     <input id="select-song" type="button" value="select song" onclick="select_song()"/>
 </div>

来自dialog | Electron ，据说在渲染器文件中导入 dialog 如下所示:

const { dialog } = require('electron').remote
console.log(dialog)

这是我的renderer.js:

const { dialog } = require('electron').remote

function select_song() {
    dialog.showOpenDialog(
        {properties: ['openFile']}, 
        filename => {
            console.log(filename)
        }
    )
}

但是，当我按下按钮时，此消息会打印在控制台中:

Uncaught ReferenceError: dialog is not defined
    at select_song (renderer.js:4)
    at HTMLInputElement.onclick (index.html:14)

<小时/>

我试过Philip's answer :

const dialog = require('electron').remote.dialog 

但它不起作用(同样的错误)

<小时/>

我试过Edgar Martinez's answer :

var remote = require('remote');
var dialog = remote.require('dialog');

但是我收到此错误(如果使用 const 而不是 var，我会收到与上面相同的错误):

Uncaught TypeError: Cannot read property 'showOpenDialog' of undefined
    at select_song (renderer.js:5)
    at HTMLInputElement.onclick (index.html:14)

<小时/>

我试过D.Richard's answer :

const remote = require('electron').remote 
const dialog = remote.dialog;

但它也不起作用(同样的错误)

<小时/>

我该如何解决这个问题？

Answer 1

问题是我没有注意到控制台顶部的require is not Define。

搜索后发现Sathiraumesh's answer ，并将 webPreferences: {nodeIntegration: true} 添加到 main.js 文件后:

main_window = new BrowserWindow({
    width: 800,
    height: 600,
    show: false,
    webPreferences: {
        nodeIntegration: true
    }
})

Electron 文档中建议的相同代码有效:

const {dialog} = require('electron').remote

function select_song() {
    dialog.showOpenDialog(
        {properties: ['openFile']}, 
        filename => {
            console.log(filename)
        }
    )
}