webpack - 为 ElectronJS + Vue 配置热模块重载

Question

我有以下 repository我想让 Hot Module Reload 工作的地方。

到目前为止，我能够:

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

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

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

围绕该主题的任何其他答案都是针对 React 项目的，这些项目大多数超出了我的理解，或者正在使用 electron-reload，这实际上不是我正在寻找的。

为什么不用 Vue CLI？

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

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

Electron 网络包

我最初使用此插件通过观看视频 here 来实现相同的目的.我遇到了几个问题:

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

如上所述，事实证明我花了很多时间来解决问题，而不是继续推进应用创意。所有可用于使事情变得更容易的工具要么在 Windows 上有问题，要么已知 x 版本的 y 依赖性问题，或者只是简单地增加了我需要在某一时刻学习的开销以更好地解决设置问题(例如，electron-webpack本身是一个工具，而不仅仅是一个插件，必须阅读文档，因为它在项目结构和配置方面有自己的概念)。我花在学习辅助工具上的时间比 Electron 本身还多。

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

要求:

• Electron JS
• 视觉
• 相对较快的端到端测试
• 单元测试
• HMR 包括主进程和渲染进程

Answer 1

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

这是两个完全不同的项目的原因。我告诉你，因为我已经完成了非常相似的项目。

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

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

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

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

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