为ElectronJS+Vue配置热模块重新加载



我有下面的存储库,我想在其中重新加载热模块。

到目前为止,我能够:

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

我想实现的是相应地更改webpack配置,这样我就可以运行"npm-run-dev",并让应用程序以HMR启动。

在当前的webpack设置下,我如何做到这一点?

围绕这个主题的任何其他答案都是针对react项目的,这些项目大多超出了我的理解范围,或者正在使用电子重新加载,这实际上不是我想要的。

为什么不使用Vue CLI

我尝试了Vue CLI和插件Vue CLI电子生成器生成器,但遇到了以下问题:

  • 它不支持摩卡
  • 简单的光谱测试耗时长达30秒
  • 如果我想自定义任何东西,我最终会有三项或更多内容需要学习/阅读(Vue CLI、插件配置、scaffold)

电子网络包

我最初使用这个插件是为了通过下面的视频来实现同样的目的。我遇到了几个问题:

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

如上所述,我花了大量时间遇到问题,而不是继续应用程序的想法。所有可以让事情变得更容易的工具要么在Windows上有问题,要么在x版本的y依赖性方面有已知问题,或者只是简单地增加了我需要在某一点上学习的开销,以更好地解决设置问题(例如,电子webpack本身是一个工具,而不仅仅是一个插件,浏览文档是必须的,因为它围绕项目结构和配置有自己的概念)。我花在学习辅助工具上的时间比电子本身还多。

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

要求:

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

我给你的建议如下:首先将CCD_ 1&CCD_ 2彼此不同。

原因是这两个项目确实不同。我告诉你,因为我已经与非常相似的项目进行了这段旅程。

我所做的过程。安装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工作得很完美。

最新更新