Как зеленый джуниор свой hot-reloader писал

Предыстория

Предисловие

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

Начало

У нас довольно большой проект, доставшийся в наследство, написанный на angularJS, со всеми его прелестями. Мне после React’а он показался динозавром, но ничего, покупаю курсы по angularjs, быстро въезжаю и начинаю приносить пользу.

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

Но и минусов хватает.

Первая проблема: проект собирается каким-то древним минимизатором и использовать современный синтаксис js нельзя. Никаких () => {}, const res = […data, subRes], async/await…

Вторая проблема: нет ни webpack, ни даже хотя бы gulp, а соответственно нет и привычного мне webpack-dev-server c его прекрасным hot reload.

Написал. Сохранил. F5. Неудобно. Боль? Не прям боль, но очень неудобно.

Третья проблема: сборка проекта .bat файлом, в котором часть проекта просто копируется, часть библиотек собираются без минимизации, часть минимизируются в один файл, остальные файлы проекта-в другой. Список библиотек в третьем файле. Список файлов для сборки в четвертом. И так далее.

Четвертая проблема: все библиотеки аккуратно лежат в папочке libs и подключаются скриптом в index.html. Все-все, кроме express и proxy для него(они не участвуют в сборке, а только для разработки).
И далеко не везде есть версии или указание на конкретную библиотеку.

На обучении я жил в прекрасном мире функционального программирования, полном es6+, webpack-dev-server, tdd, eslint, автоматической сборкой и так далее.

А тут во взрослом мире все совсем по-другому…

Завязка

Но работать мне нравится, препятствия рассматриваю как возможности саморазвития, компания хорошая, обстановка отличная, глаза горят!

В рабочее время выполняю рабочие задачи, в свободное пытаюсь что-то улучшить.

Середина июня, начинаю с попытки прикрутить webpack, но первый подход ожидает полный провал. Неделю мучаюсь, сильно от этого устаю, временно откладываю.

Решаю начать с малого — подключаю новый синтаксис через babel. Дописываю в наш волшебный build.bat первоначальную обработку babel’ем, но что-то ломает идиллию и наш старый минификатор спотыкается. Ищу проблему.

Спотыкается на одной из библиотек из аккуратной папочки libs. Смотрю файлы библиотек: они уже минифицированы и в старом синтаксисе.

Говорю babel — «ты сюда не ходи… код башка попадет, совсем плохо будет». Проверяю: все работает! Ура! Теперь мне доступны все те приятные новые стильные модные молодежные штуки! Первая победа. Приятно. Думаю по такому случаю переименовать скрипт в e.bat(e-Evgen), но не решаюсь.

Новый синтаксис так знаком и приятен, но мысли о кривой сборке не покидают меня.

Конец июня-начало июля. Делаю второй подход, более основательный, но снова упираюсь в ошибки между webpack и angularjs. Снова неделя изысканий.

Как-то раз провожу несколько дней и частично ночей за поиском решения, натыкаюсь на крайне интересные выступления с конференции HolyJS, где ребята уже довольно глубоко копают в webpack. Продвигаюсь в его понимании, но материал пока не понимаю до конца.

Интерес укрепляется.

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

Середина июля, мне в руки попадает похожий на наш проект с настроенной сборкой. Иду с ним в третий подход и практически настраиваю у нас webpack, но в конце ловлю новые ошибки, на решение которых времени уже не хватает, работа накатывает с новой интенсивностью + морально меня это опустошает, вновь откладываю это дело.

Основная часть

Середина августа. В итоге приятель рассказывает про изучение node.js и его желание написать собственный hot-reloader. Мысли о нашей сборке вспыхивают у меня с новой силой.

Задача: reload текущую страницу при обновлении файлов в проекте.
Особенности: все библиотеки подключаются в index.html, нельзя require, не говоря уже об import. Сборка перед reload пока не нужна, только reload. В сервере для разработки, который проксирует запросы на наш бэк, пакеты использовать я могу, а так же могу require!

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

Мыслительный процесс идет и в голове формируется видение решения.
Простейший сервер(как у нас), в нем я обойду всю папку и подпапки и сформирую дерево с датами изменений каждого файла.

Далее через каждые n миллисекунд буду обходить еще и еще и сравнивать значения времени изменений. Изменилось — reload. Приятель подсказывает — «не изобретай велосипед, есть watch в node.js». Отлично, буду использовать его. В server.js настрою watch за папкой проекта и по изменению чего-то внутри буду вызывать location.reload().

Первая итерация:

var express = require('express'); var app = express(); var server = require('http').Server(app);   const port = 9080; server.listen(port); app.use(express.static(__dirname + '/src')); location.reload(). 

Первая проблема — location- это не переменная node.js(в этот момент я обретаю понимание, почему мои попытки обращения к process.env на фронте тоже были безуспешны))).

Вторая проблема — как дать front’у понять, что нужно делать reload?

Выход — websocket! Идея заманчива + я с ними работал «на пол-шишки», когда писал чат, общее представление имею. Заодно делаю счетчик перезагрузок за сессию, добавляю переменную и обработку отдающему ее запросу.

Пробую:

var express = require('express'); // Подключаем express var app = express(); var server = require('http').Server(app); // Подключаем http через app var io = require('socket.io')(server); // Подключаем socket.io и указываем на сервер var fs = require('fs');  const port = 9080; server.listen(port); app.use(express.static(__dirname + '/src'));  let count = 0; app.get('/data', (req, res) => {   res.data = count;   res.send(`${count}`); })  const dir = './src'; fs.watch(dir, () => {   io.emit('change', {data: count});   count += 1; }) 

На фронте делаю простейший App на angularjs

angular.module('App', []) .controller('myAppCtrl',['$scope', '$timeout','$http', ($scope, $timeout, $http) => {     $scope.title = 'Страничка для тестирования простейшего хот релоада без пересборки';     $scope.count = 0;     $scope.todo = [         'прикрутить рекурсивность папок,поискать стандартные методы',         'проверить на отслеживание node.js watch файлы других типов',         'периодически проходить отслеживаемую папку и смотреть,не появились ли в ней или вложенные файлы и папки',         'прикрутить линтер, codeclimate и travis к этому проекту'     ]     $scope.marks = [         'watcher не смотрит рекурсивно на каталоги внутри'     ]      // var socket = io();     //     socket.on('change', (data) => {     //         console.log(data.data);     //         $scope.count = data.data;     //         console.log('scope.count: ', $scope.count);     //         $scope.$digest();//     //         location.reload();//agfr     //     })      $http({method: 'GET',url: 'data'})     .then(response => {         $scope.count = response.data;//     }); }]) 

И отдельный модуль, который ее reload. Отдельный, чтобы в проект лишнего не попадало.

var socket = io();         socket.on('change', () => {             location.reload();          }) 

Работает! Файлы кроме js тоже отслеживает(мало ли!): проверял .json, .css.
Проверяю вложенные папки — не работает.

Думаю, ладно, сейчас запилю рекурсивно. На всякий случай гуглю и — вуаля- есть готовое
решение.

Добавляю этот пакет.

var express = require('express'); // Подключаем express var app = express(); var server = require('http').Server(app); // Подключаем http через app var io = require('socket.io')(server); // Подключаем socket.io и указываем на сервер var fs = require('fs'); var watch = require('node-watch');  const port = 9080; server.listen(port); app.use(express.static(__dirname + '/src'));  let count = 0; let changed = []; app.get('/data', (req, res) => {   res.data = count;   res.send({count, changed}); }) const translate = {   remove: "удален",   update: "изменен" } watch('./', { recursive: true }, function(evt, name) {   io.emit('change', {data: count});    count += 1;   changed = [{name, evt}, ...changed]; }); 

Ура, работает!

Вспоминаю про eslint, codeclimate и travis.
Устанавливаю первый, добавляю остальное.
Подчищаю код, все var на const и так далее.

Linter ругается, что angular is not defined, но у меня особенности подключения библиотек в проекте диктуют такое поведение, отключаю. Заодно немного прикручиваю переменные из командной строки, запускаю, все работает!

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

В итоге получилось вот так:

const express = require('express'), 			http = require('http'), 			watch = require('node-watch'), 			proxy = require('http-proxy-middleware'), 			app = express(), 			server = http.createServer(app), 			io = require('socket.io').listen(server), 			exeptions = ['git', 'js_babeled', 'node_modules', 'build', 'hotreload'], // исключения,которые вотчить не надо, файлы и папки 			backPortObj = { /* перечень машин,куда смотреть за back*/ }, 			address = process.argv[2] || /* адрес машины с back*/, 			localHostPort = process.argv[3] || 9080, 			backMachinePort = backPortObj[address] || /* порт на back машине*/, 			isHotReload = process.argv[4] || "y", // "n" || "y" 			target = `http://192.168.${address}:${backMachinePort}`, 			str = `Connected to machine: ${target}, hot reload: ${isHotReload === 'y' ? 'enabled' : 'disabled'}.`, 			link = `http://localhost:${localHostPort}/`;  server.listen(localHostPort); app .use('/bg-portal', proxy({   target,   changeOrigin: true,   ws: true })) .use(express.static('.'));  if (isHotReload === 'y') {   watch('./', { recursive: true }, (evt, name) => { 		let include = false; 		exeptions.forEach(item => { 			if (`${name}`.includes(item))	include = true; 		})  		if (!include) { 			console.log(name); 			io.emit('change', { evt, name, exeptions }); 		}; 	});  };  console.log(str); console.log(link); 

var socket = io.connect();  socket.on('change', ({ evt, name, exeptions }) => { 		location.reload(); }); 

запускающий скрипт в package.json просто вызывает server.js из-под node и запускается это вот так:

npm start 1.100 8080 

Написал. Сохранил.F5

В заключении хочу поблагодарить Ваню, моего друга, местами вдохновителя и главного пинателя, а так же Сашу — человека, которого я считаю своим наставником!

Вместо послесловия

А через 2 недели, в последний день своего испытательного срока, я таки прикрутил webpack и webpack-dev-server на наш проект, отправив тем самым свой hot reloader пылиться на полку истории.

Однако эти 2 недели мы использовали его каждый день и он исправно делал свое дело!