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();
  }
});

我试图在main.js文件中包含require('electron-reload')(__dirname);，但没有任何变化

Answer 1

electron-reload默认仅在文件更改时重新加载所有打开的WebContents的{{1}}。如果要重新启动Electron（即，如果要更改Electron主进程文件以重新加载应用程序），那么您要查找的是“硬重置”。

为此，您必须设置电子应用路径，如下所示：

BrowserWindows

documentation说路径应该是require('electron-reload')(__dirname, { electron: path.join(__dirname, 'node_modules/.bin/electron.cmd') });，但是我只能使用./node_modules/.bin/electron使它起作用。这显然是an issue with Windows machines，据说是指向MacOS上的可执行文件。在Linux系统上也可能是这种情况。

以下应该是样例示例所需的所有文件：

_{./ main.js}

./node_modules/.bin/electron.cmd

_{./ index.html}

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()
    }
})

_{./ package.json}

<h1>Hello World!</h1>

安装方式：

{
    "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

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

像我一样更改您的代码：

并在需要时调用reloadWindow方法。

跟随此网址：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 5

这些步骤对我有用：

只需使用npm install electron-reload来安装电子重新加载
将这些行添加到您的 main.js

const electron = require('electron')

require('electron-reload')(__dirname, { electron: require("${__dirname}/node_modules/electron") });

Answer 6

很晚了，但认为这对新登陆此页面的人有帮助。

只需替换 win.loadFile("angular app 索引文件的路径");用下面的代码

if(env==="PROD"){
   win.loadFile("path to index file of angular app");
}else{      //// Else block is for hot reload in dev mode
   win.loadUrl("http://localhost:4200")
}

在电子主文件中。在此之后，使用 --live-reload 选项运行您的 angular 应用程序，然后单独运行电子应用程序或在 package.json 中创建一个脚本，如下所示

ng serve --live-reload && electron .

使用电子和角度热装

6 个答案: