为 ElectronJS + Vue 配置热模块重载

Question

为 ElectronJS + Vue 配置热模块重载

webpackelectronwebpack-dev-serverwebpack-4webpack-hmr

3

我有一个仓库repository，想让热更新生效。目前我能够做到以下几点：

启动应用程序
编译应用程序文件并使用编译后的文件运行spectron测试

我希望通过修改webpack配置来实现在执行"npm run dev"时启用HMR。但我不知道该如何在当前的webpack设置下实现这一点。关于此问题的其他回答都是针对React项目的，而这些内容超出了我的理解范围，或者使用的是electron-reload，而这不是我所需要的。

为什么不使用Vue CLI？

我尝试过Vue CLI和插件vue-cli-electron-builder-builder，但遇到了以下问题：

它不支持mocha
简单的spectron测试需要长达30秒
如果我想要定制任何东西，我将不得不学习三个或多个项目（Vue CLI、插件配置、脚手架）

Electron webpack

我最初使用这个插件，并按照视频here的指导进行操作。但是我遇到了一些问题：

我在3-4个月前尝试使用该插件时，在编译期间遇到了错误，因为它不支持最新的Electron版本（4.0最近发布）
当我试图了解如何让Spectron与之一起工作时，我浪费了几个小时才意识到我无法覆盖/使用NODE_ENV变量，这使得设置各种环境（测试、开发、生产）的条件更加困难。
第一个问题得到解决后，HMR不再工作
尽管我遵循了文档，但某些webpack重写似乎没有生效。例如，我添加了overlay：true，它确实在运行应用程序时显示了叠加层的错误。但是任何试图减少编译噪声的尝试都没有效果。同样，很难确定如何将mocha指向正确的webpack配置（我尝试过指向生成的供应商配置，或在根目录上使用扩展配置，但都失败了）

基于以上原因，我花费了大量的时间遇到问题，而不是继续推进应用程序的想法。所有可用的工具都存在Windows问题，或者与x版本的y依赖项存在已知的问题，或者只是增加了我需要学习以更好地解决设置问题的负担（例如，electron-webpack本身是一个工具，而不仅仅是一个插件，因此必须阅读文档，因为它在项目结构和配置方面有自己的概念）。我花费的时间比学习Electron本身更多。

因此，我想知道如何在主进程和渲染器进程上使用热模块替换（HMR），并提供一个基本示例，如果足够简单，将避免我相信需要学习额外的工具或面对由于版本或操作系统导致的各种问题。

要求：

- ElectronJS - Vue - 相对快速的端到端测试 - 单元测试 - 主进程和渲染器进程都使用HMR

- joeyj

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- l1nuxuser · Accepted Answer

我的建议是：首先将Electron和Vue分开。原因是它们是两个非常不同的项目。我这样告诉你，因为我已经用非常类似的项目完成了这个旅程。

我所做的过程是：安装vue-cli链接 npm install -g @vue/cli 运行vue ui并面对华丽的vue ui项目管理。在项目创建过程中设置您喜欢的任何内容。

之后，我运行我的代码并进行条件检查以查看是否处于dev状态。当我处于dev状态时，我指向vue模拟服务器。

if (!app.isPackaged) {
   mainWindow.loadURL(`http://localhost:8081`);
   mainWindow.webContents.openDevTools({mode: 'undocked'});
} else {
   mainWindow.loadURL(`file://${__dirname}/index.html`);
}

在这个选项中，HMR功能完美工作。