Горячая перезагрузка с использованием Electron и Angular

Question

Я использую Angular и Electron для своего приложения.Я ищу способ включить горячую перезагрузку ... Когда я запускаю свой yarn run electron (сценарии: "electron": "ng build --base-href ./ && electron ."), если я сохраняю изменение, мое приложение не перезагружается.Вот мой файл main.js:

const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");

let win;

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

  // load the dist folder from Angular
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );

  // The following is optional and will open the DevTools:
  // win.webContents.openDevTools()

  win.on("closed", () => {
    win = null;
  });
}

app.on("ready", createWindow);

// on macOS, closing the window doesn't quit the app
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

// initialize the app's main window
app.on("activate", () => {
  if (win === null) {
    createWindow();
  }
});

Я пытался включить require('electron-reload')(__dirname); в файл main.js, но ничего не изменилось

Answer 1

измените свой код, как я:

и вызовите метод reloadWindow, где вам нужно.

, следуя этому URL: https://electronjs.org/docs/api/browser-window#winreload

const { app, BrowserWindow, ipcMain } = require('electron');
const url = require('url');
const path = require('path');

let mainWindow;
app.on('ready', Start);

function Start() {
  createWindow();
  settingsWindow();
}
function createWindow() {
  mainWindow = new BrowserWindow();
  mainWindow.loadURL(url.format({ pathname: path.join(__dirname, `/dist/index.html`), protocol: 'file:', slashes: true, }));
}
function reloadWindow() {
  mainWindow.reload();
  mainWindow.loadURL(url.format({ pathname: path.join(__dirname, `/dist/index.html`), protocol: 'file:', slashes: true, }));
}
function settingsWindow() {
  mainWindow.maximize();
  mainWindow.setMenu(null);
}

Answer 2

Разве app.relaunch () не является ли способом выполнить «полный сброс»?

app.relaunch([options])

• options Объект (необязательно)
  • args Строка
  • execPath Строка (необязательно)

Перезапускает приложение, когда текущийВыход экземпляра.

По умолчанию новый экземпляр будет использовать тот же рабочий каталог и аргументы командной строки, что и текущий экземпляр.Если указан args, args будет передано в качестве аргументов командной строки.Если указано execPath, execPath будет выполнено для перезапуска вместо текущего приложения.

Обратите внимание, что этот метод не завершает приложение при выполнении, вы должны вызвать app.quit или app.exitпосле вызова app.relaunch перезапустите приложение.

Answer 3

Я нашел это: https://github.com/maximegris/angular-electron Это пустой шаблон проекта, использующий Electron и Angular.Выполнить yarn start разрешить горячую перезагрузку.Это хорошо написано в README.md!

Answer 4

electron-reload по умолчанию перезагружает WebContents всех открытых BrowserWindows только при изменении файла.Если вы хотите перезапустить Electron (то есть, если вы хотите, чтобы изменения в файле основного процесса Electron перезагрузили приложение), то вам нужен «полный сброс».

Для этого вам нужно установить путь к электронному приложению, например:

require('electron-reload')(__dirname, {
    electron: path.join(__dirname, 'node_modules/.bin/electron.cmd')
});

В документации указано, что путь должен быть ./node_modules/.bin/electron, но я смог заставить его работать только с помощью ./node_modules/.bin/electron.cmd.Это, по-видимому, проблема с машинами Windows , и предположительно указывает на исполняемые файлы, работающие на MacOS.Это также может иметь место в системах Linux.

Ниже приведены все файлы, необходимые для примера:

_{. / Main.js}

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')

require('electron-reload')(__dirname, {
    electron: path.join(__dirname, 'node_modules/.bin/electron.cmd')
});

let mainWindow = null

function main() {
    mainWindow = new BrowserWindow()

    mainWindow.loadURL(
        url.format({
            pathname: path.join(__dirname, '/dist/index.html'),
            protocol: 'file:',
            slashes: true
        })
    )

    mainWindow.on('closed', () => {
        mainWindow = null
    })
}

app.on('ready', main)

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    if (mainWindow === null)  {
        main()
    }
})

_{. / Index.html}

<h1>Hello World!</h1>

_{. / Package.json}

{
    "name": "electron-hot-reload-boilerplate",
    "version": "1.0.0",
    "description": "An Electron Boilerplate demonstrating hot reloading",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    },
    "repository": "https://github.com/link/to/your/repo",
    "keywords": [],
    "author": "You",
    "license": "CC-BY-SA-3.0",
    "dependencies": {
        "electron": "^3.0.9",
        "electron-reload": "^1.3.0"
    }
}

Установка с:

> npm install

Запуск с:

> npm start