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

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

Пока я могу:

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

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

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

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

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

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

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

Электронный веб-пакет

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

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

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

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

Требования:

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

webpack electron webpack-hmr webpack-4 webpack-dev-server
person joeyj    schedule 10.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Мой вам совет так же бесполезен: прежде всего отделите Electron и Vue друг от друга.

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

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

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

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

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

и в этом варианте HMR работают идеально.

person l1nuxuser    schedule 11.02.2019
comment
Спасибо за Ваш ответ. Это не упоминается в моем исходном вопросе, но я попытался получить базовый пример в репозитории, содержащий HMR, а не использовать какие-либо другие модули или даже Vue CLI. В Vue CLI уже есть инструмент для преобразования проекта в электронный формат, но выполнение одного простого спектронного теста занимает до 30 секунд (даже если запускается вручную в CLI). Я просто снова пошел по маршруту плагина electronic-webpack, и мой спектронный тест занимает примерно столько же, сколько и в примере репо (3-4 секунды). - person joeyj; 11.02.2019