Я пытаюсь выполнить контроллер окна, для электронных приложений, где управление окном и заголовок находятся в одном ряду.Я просмотрел множество справочных пособий, но я застрял.
при желании получить контроль над процессом рендеринга появляется ошибка Uncaught ReferenceError: require не определен
текущее состояние (с ошибкой) и назначение цели (без ошибки) выглядит следующим образом 
Я использовал ELECTRON версия 5.beta-1 (нов стабильном 4 тоже не работает)
Код моей программы (4 файла):
Что мне нужно исправить или что я ошибочночтобы заставить его работать ??
Файл конфигурации электронов main.js
const {app, BrowserWindow} = require('electron')
let mainWindow = null
app.on('ready', () => {
mainWindow = new BrowserWindow({width: 1200, height: 800, frame: false})
// mainWindow.loadFile('index.html')
mainWindow.loadURL(`file://${__dirname}/index.html`)
mainWindow.webContents.openDevTools()
mainWindow.on('closed', () => {
mainWindow = null
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
Основной файл просмотра index.html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><link rel="stylesheet" type="text/css" media="screen" href="default.css"></head>
<body>
<header id="titlebar">
<div id="drag-region">
<div id="window-title"><span>SPOŁECZEŃSTWO</span></div>
<div id="window-controls">
<div class="button" id="more-button"><span></span></div>
<div class="button" id="refresh-button"><span></span></div>
<div class="button" id="min-button"><span></span></div>
<div class="button" id="max-button"><span></span></div>
<div class="button" id="restore-button"><span></span></div>
<div class="button" id="close-button"><span></span></div>
</div>
</div>
</header>
<main id="content"><h1>Hello World!</h1><p>Lorem ipsum dol...</p></main>
<script src="default.js"></script>
</body>
</html>
Контроллер для файла оконdefault.js
(function () {
const remote = require('electron').remote;
function init() {
let window = remote.getCurrentWindow();
const minButton = document.getElementById('min-button'),
maxButton = document.getElementById('max-button'),
restoreButton = document.getElementById('restore-button'),
closeButton = document.getElementById('close-button');
minButton.addEventListener("click", event => {
window = remote.getCurrentWindow();
window.minimize();
});
maxButton.addEventListener("click", event => {
window = remote.getCurrentWindow();
window.maximize();
toggleMaxRestoreButtons();
});
restoreButton.addEventListener("click", event => {
window = remote.getCurrentWindow();
window.unmaximize();
toggleMaxRestoreButtons();
});
// Toggle maximise/restore buttons when maximisation/unmaximisation occurs by means other than button clicks e.g. double-clicking the title bar:
toggleMaxRestoreButtons();
window.on('maximize', toggleMaxRestoreButtons);
window.on('unmaximize', toggleMaxRestoreButtons);
closeButton.addEventListener("click", event => {
window = remote.getCurrentWindow();
window.close();
});
function toggleMaxRestoreButtons() {
window = remote.getCurrentWindow();
if (window.isMaximized()) {
maxButton.style.display = "none";
restoreButton.style.display = "flex";
} else {
restoreButton.style.display = "none";
maxButton.style.display = "flex";
}
}
}
// When document has loaded, initialise
document.onreadystatechange = () => {if (document.readyState == "complete") {init();} };
})();
Файл таблицы стилей default.css
* { margin: 0; padding: 0; border: 0; vertical-align: baseline;}
html { box-sizing: border-box;}
*, *:before, *:after { box-sizing: inherit;}
html, body { height: 100%; margin: 0;}
body { font-family: "Segoe UI", sans-serif; background: rgb(26, 41, 51); color: rgb(255, 255, 255); border: 1px solid rgb(72, 84, 92); overflow-y: hidden;}
h1 { margin: 0 0 10px 0; font-weight: 600; line-height: 1.2;}
p { margin-top: 10px; color: rgba(255, 255, 255, 0.4);}
#titlebar { display: block; position: fixed; height: 32px; width: calc(100% - 2px); /*Compensate for body 1px border*/ background: rgb(37, 63, 82); padding: 4px; color: rgb(255, 255, 255);}
#titlebar #drag-region { width: 100%; height: 100%; -webkit-app-region: drag; display: grid; grid-template-columns: auto 138px;}
#window-title { grid-column: 1; display: flex; align-items: center; font-family: "Segoe UI", sans-serif; font-size: 12px; margin-left: 8px; overflow-x: hidden;}
#window-title span { overflow: hidden; text-overflow: ellipsis; line-height: 1.5;}
#content { height: calc(100% - 32px); margin-top: 32px; padding: 20px; overflow-y: auto;}
#window-controls { display: grid; grid-template-columns: repeat(5, 46px); position: absolute; top: 0; right: 0; height: 100%; font-family: "Segoe MDL2 Assets"; font-size: 10px; -webkit-app-region: no-drag;}
#window-controls .button { grid-row: 1 / span 1; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; user-select: none; cursor: default; opacity: 0.8;}
#window-controls .button:hover { background: rgba(255,255,255,0.2); opacity: 1;}
#window-controls #refresh-button:hover { background: rgb(232, 175, 17);}
#window-controls #close-button:hover { background: rgb(232, 17, 35);}
#window-controls #more-button { grid-column: 1;}
#window-controls #refresh-button { grid-column: 2;}
#window-controls #min-button { grid-column: 3;}
#window-controls #max-button, #window-controls #restore-button { grid-column: 4;}
#window-controls #close-button { grid-column: 5;}
#window-controls #restore-button { display: none;}
Заранее благодарим вас за ваше время и поддержку.