为 ElectronJS + Vue 配置热模块重载

Question

我有以下repository，我想让热模块重新加载工作。

到目前为止，我能够：

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

我想要实现的是相应地更改 webpack 配置，以便我能够运行“npm run dev”，并让应用程序以可用的 HMR 启动。

如何使用当前的 webpack 设置实现这一点？

围绕该主题的任何其他答案都是针对反应项目的，这些项目大部分超出了我的理解，或者正在使用电子重载，这实际上并不是我想要的。

为什么不使用 Vue CLI？

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

• 不支持摩卡
• 简单的光谱测试最多需要 30 秒
• 如果我想自定义任何东西，我最终需要学习/阅读三项或更多内容（Vue CLI、插件配置、脚手架）

电子网络包

我最初使用这个插件是通过关注视频here 来实现的。我遇到了几个问题：

• 在我尝试这个插件时（3-4 个月前），编译过程中发生错误，因为它不支持最新的 Electron 版本（最近发布了 4.0）
• 当我试图了解如何让 Spectron 工作时，我浪费了几个小时才意识到我无法覆盖/使用 NODE_ENV 变量，这使得为各种环境（测试、开发、生产）设置条件变得更加困难)。
• 解决上述第一个问题后，HMR 不再工作
• 尽管遵循了文档，但某些 webpack 覆盖似乎没有生效。例如，我添加了 overlay: true ，它确实在应用程序运行时有效地呈现了错误覆盖。但是任何减少编译噪音的尝试都没有效果。同样，确定如何将 mocha 指向正确的 webpack 配置并不容易（我尝试了两种方式，指向供应商生成的配置，或者在 root 上使用扩展配置，但徒劳无功）

如上所述，事实证明我花费了大量时间来解决问题，而不是继续应用程序的想法。所有可让事情变得更简单的工具要么在 Windows 上存在问题，要么在 x 版本的 y 依赖项中存在已知问题，或者只是简单地增加了我需要在某一时刻学习以更好地解决设置的开销（例如，electron-webpack它本身就是一个工具，而不仅仅是一个插件，阅读文档是必须的，因为它围绕项目结构和配置有自己的概念）。我花在学习辅助工具上的时间比学习 Electron 本身的时间还要多。

因此，我想知道如何通过一个基本示例让 HMR 在主进程和渲染器进程上工作，如果足够简单，我相信需要学习额外的工具或因版本而面临各种问题或操作系统。

要求：

• ElectronJS
• Vue
• 相对快速的 e2e 测试
• 单元测试
• 具有主进程和渲染器进程的 HMR

Answer 1

我给你的建议是： 首先将Electron 和Vue 彼此分开。

这是两个真正不同的项目的原因。 我告诉你，因为我已经通过非常相似的项目完成了这段旅程。

我已经完成的过程。 安装vue-clilink
npm install -g @vue/cli

运行vue ui，你将面对花哨的 vue ui 项目管理。 在项目创建过程中设置您喜欢的任何内容。

之后，我运行我的代码，有条件检查我们是否在开发中。
当我在开发时，我指向 vue muck up 服务器。

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

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