Webpack HMR vs Skewer mode в emacs

Question

Я недавно начал изучать webpack из-за интересных функций, которые позволяют писать истинные модули CSS, а также умные связки и прочее, и есть HMR, вот почему я здесь. Я видел примеры проектов React Redux, которые позволили обновить код javascript без перезагрузки браузера. WOW, я думал, что это невозможно.

Я хотел узнать больше, особенно, как он работает под капотом, чтобы он работал с моим текущим проектом, который является Vanilla JS.

Тем временем мой интерес к функциональным языкам программирования привел меня в Emacs. Я узнал, что есть skewer-mode, доступный в редакторе emacs, который обновляет javascript и HTML! в режиме реального времени без браузера браузера.

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

1. Так как же они точно работают? Возможно, я смотрю с неправильного угла, у меня просто нет четкой картины.

2. Emacs имеет живое обновление HTML тоже, может ли webpack HMR сделать это?
   (Меня не волнует HTML, потому что я делаю это в JS. Но я думаю, что это может объяснить разницу между этими двумя.)

3. Что лучше делать?
   Каковы плюсы и минусы каждого или они просто разные части мира и могут быть интегрированы, чтобы стать чем-то еще лучше?

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

P.S .: Я не обращаю внимания на инструменты обучения, которые могут оптимизировать мою работу, потому что она всегда окупается.

Answer 1

Так как же они точно работают?

С Webpack HMR documentation,

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

Для каждого типа модуля требуется обновленная логика, написанная для него.

Из skewer-mode repository,

выражения посылаются на лету из буфера редактирования, чтобы оценить в браузере, так же, как Emacs делает с подчиненному Лисп процесса в Лисп режимах.

Ваш код отправлен браузеру в виде строки и проходит через глобальный eval.

Что лучше делать? Каковы плюсы и минусы каждого?

Если вы используете библиотеки, которые имеют ГМР плагины, написанные для них, это может стоит использовать эту функцию. Библиотеки без крючков HMR не получат от этого преимущества. HMR Webpack кажется чрезвычайно сложным, и его документация и его плагины предупреждают о «экспериментальном» состоянии HMR. Поэтому он, вероятно, не является надежным и, следовательно, может быть контрпродуктивным к вашему развитию. Например, для модулей перезагрузки необходимо правильно очистить неперегрузочные модули. Что делать, если какой-либо скрипт добавляет слушателям window или document и не предоставляет способ их удаления?

Если вы хотите, чтобы ваш текстовый редактор служил дополнительным REPL для вашего браузера, вы можете использовать skewer-mode. Чтобы внести какие-либо изменения в ваше приложение, часть его должна быть открыта с помощью глобальной переменной. Возможно, вы экспортируете один глобальный объект с прикрепленной к нему связкой подмодулей, например. window.APP = {}, APP.Dialog, APP.Form ... или, возможно, вы просто выпускаете сотни неявных глобальных переменных и функций в свою среду. Вы можете видеть изменения в своем приложении, оценивая определения этих модулей/функций/переменных, а затем оценивая некоторый код, который их использует, например. вызвав функцию APP.initialize(), которая загружает ваше приложение, или вызывая перерисовку в используемой вами библиотеке представлений (обычно, выполняя действие пользователя, например, щелчок по элементу).

Если ваше приложение не написано так, что его можно изменить в консоли браузера (например, если вы используете компилятор модуля, такой как Browserify или Webpack, который обертывает ваш код в одном большом закрытии), то вы не сможете многое сделать с skewer-mode. Кроме того, рассмотрите, было бы быстрее вручную обрисовывать фрагменты кода/файлы и повторно запускать код инициализации (и, возможно, создать невозможное состояние приложения, в котором вы будете тратить время на отладку), или, чтобы просто обновить страницу и воссоздать предыдущее состояние.

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