<script> require('renderer.js') </script> - не подключает файл js
Используя Electron, я пытаюсь организовать IPC между основным и рендерером. Как говорится в инструкции, я должен добавить скрипт (см. заголовок) в index.html. Но не похоже, что он загружен. В renderer.js ничего не выполняется.
Именно в этом учебнике https://www.brainbell.com/javascript/ipc-communication.html, который является наиболее подробным по этой теме в Интернете. Другие просто пропускают столько информации в своих статьях, что учащийся просто не может воспроизвести ее в приложении.
Я старался:
<script>
require('renderer.js')
</script>
<script>
require('./renderer.js')
</script>
<script src='renderer.js'>
</script>
и т.д.
Откройте DevTools. Любые ошибки консоли?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Итак, позвольте мне показать, что я делаю, может быть, это поможет.
Код для создания окна. Обратите внимание на настройки webPreferences
app.on('ready', function () {
mainWindow = new BrowserWindow({
show: false,
width: 1024,
height: 768,
backgroundColor: '#2C3E50',
center: true,
webPreferences: {
nodeIntegration: true,
devTools: true
}
})
Без средства разработки вы не сможете увидеть вывод ошибок или проверить содержимое. Есть и другие способы открыть devTools через меню и команды клавиатуры.
Затем, если вы установили скрипт или библиотеку через npm, вы можете просто сделать следующее, не указывая путь, иначе вам понадобится относительный путь
const THREE = require('three')
Я предлагаю пока пропустить использование require и просто связать скрипт «renderer.js» на html-странице. Имейте его внизу или используйте defer. Есть много руководств по electron — некоторые лучше, чем другие. Просто постарайтесь научиться чему-то одному. Например, очень хороши туториалы этого человека: видео Взаимодействие основного процесса и процесса рендеринга в Electron. Связанная статья: электрон.рокс/…
Я столкнулся с той же проблемой.
Во-первых, убедитесь, что при запуске приложения вы включаете nodeIntegration:
app.on('ready', _ => {
mainWindow = new BrowserWindow({
title: "My Electron App",
backgroundColor: '#FFF',
height: 800,
width: 1200,
center: true,
webPreferences: {
nodeIntegration: true // works on main window only
}
})
Затем сошлитесь на этот ответ.
Играя с несколькими вариантами, работают как методы require, так и методы src=. См. ниже с дополнительными встроенными комментариями.
<html>
<head>
<!-- make sure you have the semicolon after the require -->
<!-- and make sure NOT to include the .js extension -->
<script>require('./renderer');</script>
<!-- make sure you include the extension -->
<script src = "./renderer.js" ></script>
</head>
<body>
<!-- Put HTML first to avoid blocking -->
<!-- All same options as in head work here, but shouldn't block -->
<!-- In addition, async and defer might do something -->
<!-- async should run script asynchronously, and defer wait until DOM loads -->
<script src = "./renderer.js" async></script>
<script src = "./renderer.js" defer></script>
</body>
<!-- scripts put here seems intermittent which runs first -->
</html>
<!-- scripts put here seems intermittent which runs first -->
Некоторые будут блокировать загрузку HTML до тех пор, пока скрипт не запустится (я думаю, если в теге head, неважно что), в то время как другие казались случайными, загрузится ли HTML до запуска скрипта. Я тестировал с окном предупреждения в моем renderer.js, которое блокировало бы окно от отображения рендеринга HTML, если бы оно запускалось первым.
Вы работаете в
Electron 5— если да, то вам нужно установитьnodeintergration: trueпри создании окна.