Настроить горячую перезагрузку модуля для ElectronJS + Vue - PullRequest
Новая
       45

Настроить горячую перезагрузку модуля для ElectronJS + Vue

0 голосов
/ 11 февраля 2019

У меня есть следующий репозиторий , где я бы хотел, чтобы Hot Module Reload работал.

Пока я могу:

  • запуститьapp
  • скомпилируйте файлы приложения и запустите спектронный тест с использованием скомпилированных файлов

Чего я хотел бы добиться, так это соответствующим образом изменить конфигурацию веб-пакета, чтобы я мог запуститьНапример, «npm run dev» и запуск приложения с поддержкой HMR.

Как я могу добиться этого с текущими настройками веб-пакета?

Любые другие ответы по теме предназначены для проектов реагирования,которые в большинстве своем, вне моего понимания, или используют электронную перезагрузку, что на самом деле не то, что я ищу.

Почему бы не использовать Vue CLI?

Я попытался использовать Vue CLI и плагинvue-cli-electronic-builder-builder, но столкнулся со следующими проблемами:

  • Он не поддерживает mocha
  • Простой тест спектронов занимает до 30 секунд
  • Если я хочу что-то настроить, я получаютри предмета для изучения / чтения (Vue CLI, конфигурации плагинов, эшафот)

Electron webpack

Я изначально использовал этот плагин, чтобы добиться того же, следуя видео здесь .Я столкнулся с несколькими проблемами:

  • В то время, когда я пробовал этот плагин (3-4 месяца назад), во время компиляции произошла ошибка, поскольку он не поддерживал последнюю версию Electron (недавно была выпущена 4.0))
  • Когда я попытался понять, как заставить Spectron работать вместе, я потратил часы на то, чтобы понять, что не могу перезаписать / использовать переменную NODE_ENV, что еще более затрудняет установку условий для различных сред (тестирование, разработка, производство).
  • Когда первая проблема, описанная выше, была устранена, HMR больше не работал
  • Несмотря на то, что, следуя документации, некоторые переопределения веб-пакетов, похоже, не вступили в силу.Например, я добавил overlay: true, который эффективно отображал оверлей при ошибке во время работы приложения.Но любые попытки уменьшить шум при компиляции не дают никакого эффекта.Точно так же нелегко определить, как указать mocha на правильный конфиг веб-пакета (я пробовал оба, указывая на сгенерированный поставщиком конфиг или используя расширенную конфиг на root, но тщетно)

Каксогласно приведенному выше, оказывается, что я трачу огромное количество времени на решение проблем, а не приступаю к идее приложения.Все инструменты, доступные для облегчения работы, либо имеют проблемы в Windows, либо имеют известные проблемы с x-версией зависимости y, либо просто добавляют накладные расходы, которые мне нужно изучить в какой-то момент, чтобы лучше справиться с настройкой (например, электронный веб-пакет)сам по себе это инструмент, а не просто плагин, просмотр документации необходим, так как у него есть своя собственная концепция структуры и конфигураций проекта).Я потратил больше времени на изучение побочных инструментов, чем сам электрон.

Поэтому я хотел бы узнать, как заставить HMR работать с основным процессом и рендерером на базовом примере, где, если он достаточно прост, я буду избегатьсчитаю, что нужно изучать дополнительные инструменты или сталкиваться с различными проблемами из-за версий или ОС.

Требования:

  • ElectronJS
  • Vue
  • Относительно быстроe2e тесты
  • Модульные тесты
  • HMR как с основным процессом, так и с процессом визуализации

1 Ответ

0 голосов
/ 11 февраля 2019

Мой совет вам следующий: прежде всего отделите Electron & Vue друг от друга.

причина в том, что оба эти проекта действительно разные.Я говорю вам, что, поскольку я совершил это путешествие с очень похожим проектом.

процесс, который я сделал.установите vue-cli ссылка
npm install -g @vue/cli

запустите vue ui и вы столкнетесь с необычным управлением проектом пользовательского интерфейса.установите то, что вам нравится в процессе создания проекта.

после этого я запустил свой код с условным проверкой, если мы в dev или нет.
когда я в dev, я указываю на vue muckup server. 

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

и в этом варианте HMR отлично работает.

...