Electron 在渲染器进程中使用对话框模块

如何解决Electron 在渲染器进程中使用对话框模块

我正在为我的项目学习电子，但遇到了一个问题。

这是我的主要流程代码。

const {app,browserWindow,dialog} = require('electron');

app.on('ready',() => {
    console.log('ready');

    const win = new browserWindow({
        webPreferences: {
            nodeIntegration: true,enableRemoteModule: true
        }
    });
    win.loadURL(`file://${__dirname}/index.html`);
    win.webContents.openDevTools();
});

这些是渲染器进程代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
</head>
<body>
    <button id="btn_open">open</button>
    <button id="btn_save">save</button>
    <button id="btn_message">message</button>
    <button id="btn_error">error</button>

    <script>
        const {dialog} = require('electron').remote;

        const btnopen = document.querySelector('#btn_open');
        btnopen.addEventListener('click',()=> {
            dialog.showOpenDialog({
                filters: [
                    {name: 'Images',extensions: ['jpg','png']}
                ],properties: [
                    'openFile','multiSelections'
                ]
            },(filepaths) => {
                console.log(filepaths);
            });
        });

        const btnSave = document.querySelector('#btn_save');
        btnSave.addEventListener('click',()=> {
            dialog.showSaveDialog({
                title: 'title',message: 'message',filters: [
                    {name: 'Images',extensions: ['jpg']}
                ]
            },(filename) => {
                console.log(filename);
            });
        });

        const btnMessage = document.querySelector('#btn_message');
        btnMessage.addEventListener('click',()=> {
            dialog.showMessageBox({
                message: '메세지입니다.',detail: '디테일입니다.',buttons: [
                    'First','Second'
                ],checkBoxLabel: '체크박스',checkBoxChecked: true
            },(index,checkBoxChecked) => {
                console.log(index,checkBoxChecked);
            });
        });

        const btnError = document.querySelector('#btn_error');
        btnError.addEventListener('click',()=> {
            dialog.showErrorBox('제목','내용');
        });
    </script>
</body>
</html>

它不起作用。浏览器显示“Uncaught ReferenceError: require is not defined 在 index.html:13"

index.html:13 = "const {dialog} = require('electron').remote;"

我不明白为什么它不起作用。我认为我打字正确。

请让我知道我该怎么做。