Автор оригинала: Hendrik Müller-Röhr.
Обо мне
Меня зовут Хендрик, и я был разработчиком переднего конца в течение последних 7 лет. Начиная в индустрии казино, создавая игры и другие вещи вокруг него. Я недавно рискнул в мир веб-фронта. В основном с реагированием, поэтому я все еще учусь много, и я стараюсь сделать все возможное, чтобы не отставать от всех сумасшедших вещей, который должен предложить мир JavaScript.
Проблема, которую я хотел решить
В то время как в моем текущем проекте и на этих кварталах OWR, который должен ускорить производительность переднего конца. Мне было любопытно посмотреть, как запутались наши компоненты со временем. Поэтому я начал искать инструмент, который может генерировать одну из этих хороших графиков зависимостей или графики сцены, которые я так равных изготовления игр. Вы знаете, что те, где вы видите, какой класс импортирует вещи, а затем сопоставив все хорошо, чтобы узнать, если у вас есть дубликаты или что-то, что нужно пойти куда-то еще. Это также помогает понять чистый размер проекта, который может не произойти, если вы просто смотрите и что аккуратная структура папки.
Что такое React-Project-Graph – инструмент для сопоставления компонентных отношений?
Этот инструмент, хотя и сейчас в довольно базовом состоянии, будет генерировать так называемую точечную строку, которая напоминает взаимосвязь между вашими реагированными компонентами. Он будет генерировать эти отношения, расставив операторы импорта в верхней части каждого файла. А затем генерируя строку на основе импорта в следующем формате Класс -> Imported Class Это покажет зависимость от текущего файла чтения с классом в сторону другого класса/файла. Если в текущем файле нет класса, который он будет использовать его имя файла. Который не идеален, и я работаю над этим
В нем текущем CLI-State он сохранит, что приведет к текстовому файлу, и вы можете использовать его в любой программе, поддерживает синтаксис DOT, чтобы показать зависимости.
Учитывая, что это еще не на 100% идеально, но я все еще очень рад, что он работал над моими нынешними проектами.
Tech Stack.
Node.js – потому что в нем очень легко разрабатывать что-то, и теперь это довольно быстрое регулярные выражения – для того, чтобы разбирать операторы импорта эффективно Visjs – для визуализации сгенерированного графа зависимостей на более позднем этапе RiveDJS – для создания используемого интерфейса За все, так что его можно разместить на сервере VanillaJs – почему нет?
Процесс строительства RACT-Project-Graph – инструмент для сопоставления сопоставленных отношений
Ну, все началось как вызов для моего обеда, я был как «Хорошо, что я могу на самом деле создать в течение одного часа обедающего перерыва». Я начал, создавая некоторое регулярное выражение, чтобы получить мне биты оператора импорта, которые представляют интерес для этого инструмента (импортированный класс и откуда). Следующим шагом было, чтобы убедиться, что файловое дерево пересекается до конца. Для этого я сделал несколько помощников JavaScript классов, которые имеют дело с решением, если что-то является файлом или папкой. Если это папка, которую она была выпутана в новый экземпляр класса, который снова делает то же самое, если бы это был файл хорошо, то он был проанализирован, а результаты хранятся внутри массива объектов. Заключительная часть состояла в том, чтобы прошить все вместе, как точка допустимой строки. Для этой цели я оборудовал классы, которые удерживают информацию о файле с функцией для возврата их зависимостей в виде точечной строки в формате: класса -> импорт.
И классы папок имели ту же логику, но их в основном было просто для объединения строк файлов в одну большую версию точечной строки.
В конце все связано и сохранено в файл .txt-файл внутри папки проекта.
Проблемы я столкнулся
Перемещение того, как писать надлежащее регулярное выражение было правильно самой трудовой задачей об этом инструменте. А также о том, как организовать структуру папки и файлов, чтобы иметь возможность генерировать эту строку приятно и легко, пока все еще есть высокая производительность.
Назначение ключей
Поскольку я все еще работаю над этим, и я не считаю, что любой проект, когда когда-либо делал (только устаревший). Я бы сказал для меня, это то, что он на самом деле впечатляет то, что вы можете создать за один час, дайте или займете 10 минут. Когда вы действительно сосредотаетесь с умом на что-то. И я сделаю это больше на работе отныне.
Советы и советы
Сохраняйте свой регенс KUngfu Stupth и Releasn, что время от времени. Хотя мы чувствуем, что это сложно и бесполезно. Это на самом деле довольно полезно, и я уже знаю несколько мест в других проектах, где я могу поставить свои реле навыки на тест.
Окончательные мысли и следующие шаги
Я хочу выпустить эту маленькую вещь как NPM Pkcage в какой-то момент, чтобы другие люди могли использовать его для создания карт компонентов их приложений. Либо для удовольствия, либо из той же причины, что я хотел сделать это. Я также планирую разместить его на одном сервере AWS в будущем, так что его можно запускать по требованию всех. У меня определенно был взрыв, создающий это, и я буду продолжать работать над ним, пока я полностью не удовлетворен тем, что он может сделать. Найдите это здесь: React-Project-Graph