在开发时同步电子应用程序中的代码更改

Posted 2023-03-08

【中文标题】在开发时同步电子应用程序中的代码更改

【英文标题】：Sync code changes in electron app while developing

【发布时间】：2017-01-08 02:09:42

【问题描述】：

是否有任何工具可以在代码更改时实时重新加载电子应用程序，类似于 web 的浏览器同步？

每当我们更改电子应用程序的代码时，我都会终止现有正在运行的进程并重新启动 电子。 它们是否有任何工具可以在代码更改时自动重新加载电子应用程序。

【问题讨论】：

如果你使用 React，你可以看看：github.com/geowarin/electron-hot-loader

【参考方案1】：

在这种情况下，您应该查看NodeJS process management 的开发工具。我个人最喜欢的是nodemon，因为你可以使用配置文件或传递这样的东西：

nodemon --watch . --exec "electron ."

它会工作得很好。但同样，这是我的意见，请从列表中选择适合您的。

【讨论】：

我在前端（渲染器端）使用 create-react-app，大多数电子重载解决方案都是关于重载前端和后端（主进程）。这很完美，只是在 json 包中添加了一个新脚本，"electron:watch": "nodemon --watch * --exec 'electron .'"。

这里只有一个注释，在package.json 中，确切的行将是"dev": "nodemon --watch . --exec 'electron . --debug'", - 观看 dot 位置并切换单双引号。

改进boldnik的答案应该是"dev": "nodemon --watch . --exec \"electron . --debug\""

这行得通！使用市场解决方案 - 在我的 package.json 中包含 sqlite3 存在构建问题

默认情况下，它会检查 JS、MJS 和 JSON。如果你想让 nodemon 监视其他文件类型，例如 html 和 CSS，你可以运行：nodemon --watch . --exec "electron . --debug" -e js,json,html,css

【参考方案2】：

回答有点晚，但我希望它对每个人都有帮助。 有一个名为 Electromon 的 npm 模块。

npm i -g electromon [install]

用法是电子 .\main.js [将 main.js 的名称更改为 app.js 之类的文件。 ]

【参考方案3】：

我发现的最好的工具（也是最简单的）是electron-reload：

// main.js
const electron = require('electron');
const  app, BrowserWindow  = electron;
const path = require('path');

// the first argument can be: a file, directory or glob pattern
require('electron-reload')(__dirname + '/app/index.html', 
  electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
);

let mainWindow;

app.on('ready', () => 
  mainWindow = new BrowserWindow(
    // ...
  );
  mainWindow.setMenu(null);

  mainWindow.loadURL(`file://$__dirname/app/index.html`);
  process.env.NODE_ENV !== 'production' && mainWindow.openDevTools();
);