未捕获的 ReferenceError：对话框未定义

Question

我正在尝试创建一个按钮 电子打开一个dialog打开一个文件。（在本例中，只需打印其名称）

这是我的按钮index.html：

 <div class="alse-element">

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

 </div>

从对话框 | 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)

我试过菲利普的回答：

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

但它没有用（同样的错误）

我试过埃德加马丁内斯的回答：

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 的回答：

const remote = require('electron').remote 

const dialog = remote.dialog;

但它也不起作用（同样的错误）

我该如何解决这个问题？

Answer 1

问题是我没有注意到require is not defined控制台顶部的 。搜索后，我找到了Sathiraumesh's answer，并在添加webPreferences: {nodeIntegration: true}到main.js文件后：main_window = new BrowserWindow({&nbsp; &nbsp; width: 800,&nbsp; &nbsp; height: 600,&nbsp; &nbsp; show: false,&nbsp; &nbsp; webPreferences: {&nbsp; &nbsp; &nbsp; &nbsp; nodeIntegration: true&nbsp; &nbsp; }})电子文档中建议的相同代码有效：const {dialog} = require('electron').remotefunction select_song() {&nbsp; &nbsp; dialog.showOpenDialog(&nbsp; &nbsp; &nbsp; &nbsp; {properties: ['openFile']},&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; filename => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(filename)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; )}