Признание: я понятия не имею, как работает Hot Reload
Во-первых, позвольте мне рассказать вам некоторую предысторию.
Давным-давно, когда я впервые решил попробовать новый способ создания веб-сайтов, я решил использовать React. Я подумал, что это выглядело великолепно, так как у него были темы, похожие на программирование для Android, мою первую любовь (onCreate === componentWillMount и т. д.). Но потом я увидел, что у него такой сумасшедший синтаксис JSX, которого я никогда раньше не видел, и я подумал: Как это JavaScript?
Именно тогда я познакомился с Webpack.
(Конечно, после знакомства с Babel)
Что вообще такое Webpack?
Если вы никогда не работали с Webpack, это одна из самых болезненных вещей, с которыми вам когда-либо приходилось сталкиваться. Если вы ветеран Webpack, вы, вероятно, согласитесь, что это одна из величайших технологий, которые когда-либо были выпущены. Я лично попадаю где-то посередине.
Webpack — это сборщик модулей. Если вы никогда раньше не работали с Webpack, это, очевидно, звучит расплывчато и, вероятно, не имеет особого смысла (однако, если вы профессионал Webpack, вы похожи на дух). Следующий логический вопрос: «Что такое сборщик модулей?» Короче говоря, это решает распространенную проблему с нативным JavaScript, которая может быть связана с проблемой «весь код помещается в один большой файл». С помощью Webpack вы можете разделить свой код на разные файлы и импортировать или требовать их из разных файлов.
Это позволяет создавать код гораздо более похожим на Java способом. Теперь вы можете создать класс, может быть, что-то вроде этого:
А когда вы захотите использовать свой новый класс SpecialConsole, все, что вам нужно сделать, это что-то вроде этого:
Довольно изящно, верно? Webpack — это клей, который делает это возможным. По сути, Webpack преобразует эти два файла во что-то вроде этого:
(Обратите внимание, что это очень упрощенный пример, скомпилированный код Webpack выглядит гораздо более загадочным и использует более интеллектуальный алгоритм объединения, чем простое копирование и вставка)
Звучит довольно здорово, верно?
Проблема с вебпаком
С Webpack сложно начать. Там большой объем документации, но она написана так, что будет полезна только тому, кто на самом деле знает, что такое Webpack и как он работает. Я имею в виду, посмотрите на эту картинку на домашней странице Webpack.
Когда я впервые увидел это, понятия не имея, что такое Webpack, я был очень сбит с толку.
Конфигурационный файл веб-пакета
Webpack в основном требует, чтобы у вас был гигантский файл конфигурации, который определяет, как Webpack будет фактически компилировать ваши модули. Я видел много подходов к написанию этих файлов, но у меня нет четких рекомендаций, как это сделать. Лично мне нравится подход «просто сделай это». Вот как выглядит мой файл конфигурации:
Я знаю, что это горячий беспорядок. Самая большая проблема в том, что я просто не забочусь о Webpack. Я хочу, чтобы это работало, и все. В написании файла конфигурации Webpack нет элегантности, и клиенту все равно, насколько хорошо наши модули связаны. В конце концов, это помогает процессу разработки, но напрямую не улучшает конечный продукт, и в результате я ненавижу тратить на это время.
Альтернативы Webpack рекламируют гораздо более простой процесс установки (в частности, я говорю о Browserify). У меня было лишь ограниченное взаимодействие с Browserify, поэтому я оставлю вам право делать собственные выводы. Вот отличное сравнение альтернатив Webpack.
Переход к горячей перезагрузке
Это подводит меня к моему истинному признанию. Это тяжело для меня, потому что ключевой компонент моей работы — притворяться, что я знаю, что делаю.
(глубокий вдох)
Я понятия не имею, как работает Hot Reload. И как Webpack Dev Server влияет на горячую перезагрузку? Забудь об этом. И закинуть React Hot Loader? Ни за что. Путь выше моей головы.
(К следующему абзацу относитесь с недоверием ко всему, что читаете. Помните, как называется эта статья.)
Вся идея горячей замены модуля (которую я просто называю горячей перезагрузкой) заключается в том, что когда вы обновляете один файл в своем большом списке файлов, Webpack будет перекомпилировать только этот файл и передать его вашему JavaScript в виде LiveReload, поэтому что он встраивается в код, который вы уже запускаете. Это означает, что вам не нужно полностью обновлять страницу, чтобы увидеть обновленный код, это должно произойти просто по волшебству. Socket.io участвует. А с React Hot Loader, если срабатывает замена горячего модуля Webpack, ваши компоненты React обновляются без потери своего внутреннего состояния, что может спасти жизнь во время разработки. Но помимо этой общей теории того, как это работает, я понятия не имею о внутренних механизмах, благодаря которым это происходит.
Проблема в том, что ломается Hot Reload. Или когда есть обновление версии. Или вы решили что-то изменить в файле конфигурации Webpack, и что-то пошло не так. Для меня получается React Hot Loader плохо работает с декораторами, которыми я недавно начал пользоваться. Поскольку я понятия не имею, как работает эта технология, я не могу составить план, как это исправить, и я застрял в методе угадай и проверь.
К сожалению, у этой статьи не будет счастливого конца. Не знаю, зачем я это написал, может быть, это крик о помощи (не то, что с жизнью, просто с Hot Reload), может, это просто что-то, что мне нужно было выплеснуть из груди.
Используете ли вы какие-либо технологии, но понятия не имеете, как они работают? На мой взгляд, лучшее, что можно сделать в такой ситуации, — просто сказать это с гордостью.
Я понятия не имею, как работает Hot Reload.
