Как самостоятельно разобраться в архитектуре npm пакета?

Question

[ksikrii]

Как разумнее разбираться в написании пакета какой то библиотеки? Я к примеру не нашел подходящего текстового редактора и хотел бы написать для себя свою реализацию. Разумеется, что решение будет не идеальное, но есть уже готовые библиотеки.
Я к примеру не смог разобраться с текстовым редактором, чтобы изменить поведение загрузки изображение не в base64, а с помощью ссылки полученной с сервера. Документация к нему есть очень простенькая и при этом можно конечно и самому понять как он работает и переписать какую то часть.
Как вы анализируете работу пакета, библиотеки? Через отладчик смотрите запуски, пытаетесь понять понять какие паттерны были применены. Для меня просто как черный ящик относительно код пакета, но я понимаю, что как раз надо исследовать и понимать как оно устроено.
Я просто даже не знаю примерно как код может быть разбит на модули под задачу текстового редактора и с чего начинать отладку. Понимаю, что вопрос общий, но если дадите пару советов с чего начинать и какой алгоритм действий использовать, буду вам признателен. По отдельности на чистом JS я могу написать код под обработке текста, ресайза изображений, а в вот "архитектурного" представления нету, хотя его можно подсмотреть в готовых библиотеках.

Answer 1

[Александр Аксентьев]

Через отладчик смотрите запуски, пытаетесь понять понять какие паттерны были применены. Для меня просто как черный ящик относительно код пакета, но я понимаю, что как раз надо исследовать и понимать как оно устроено.

Какой отладчик и черный ящик.
Код буквально лежит в на гитхабе на который ссылку приложили или в node_modules локально

Вопрос в том как пройтись по папкам и разобраться?
Как обычно с любым проектом.
npm пакетность это про то что в package.json добавлено пара строк и "загружено" на npmjs
В остальном это обычный проект как любой фронт сайта или чего бы то ни было.

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

Секунд 15 заняло найти параметр imageUploadUrl в readme для загрузки файлов на сервер, а не через base64.

Comments

[ksikrii]

Я имел в виду, как пройтись по папкам и разобраться. То что npm пакеты - это просто код, который скачивается через менеджер и кладется в node_modules - это понятно. Я про сам код библиотеки, как из слежубных вызовов object.keys, reduce и т.д, которые строят компонент - выделить функции выполняющие задачи и те, которые служат для запуска и построения обьектов, дерева условно.

[Александр Аксентьев]

ksikrii, открыть нужный модуль/находить нужную функцию и смотреть что и как работает.

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

[Александр Аксентьев]

ну т.е. глобально ответ на все вопросы - читать код, искать, разбираться.

[ksikrii]

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

читать код, искать, разбираться - это дейсвтенно, я не ставлю под сомение
Я имел в виду, что к примеру фреймворк для новичка может быть сложен. Гораздо понятнее всё происходит, если написать какой то псведо упрощенный фреймворк с базовыми функциями соденения к базе данных, mvc паттерн и т.д

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

[Александр Аксентьев]

ksikrii, я из тех кто быстро разбирается во всём. У меня хаотичный процесс происходит.
Естественно есть какие-то общие сценарии, но вряд ли это можно как-то описать для всех случаев.

По сути всегда есть какая-то конкретная задача найти X и сделать Y.
Идёшь в код ищешь зацепки, ключевые слова и т.п.
Находишь условно где это в целом реализовано, дальше с помощью IDE перемещаешься по всему проекту через ссылки в коде и ищешь всё что может быть задействовано в том или ином функционале.
Так и разбираешься пока не поймёшь что для того чтобы сделать твою задачу ты нашел все места нужные и понял как полностью впилить туда свой кусок логики или изменить существующую.

Дебаг именно из браузера для фронта чаще всего заключается в том чтобы взять нужный текс, кнопку или даже css класс найти это в коде и дальше уже по цепочке вверх разбираться внутри кода. Если речь про такие части проекта которые ты не знаешь изначально.

Для рандомных библиотек тоже общего подхода не будет, потому что они все по разному сделаны.
Даже если взять несколько радакторов текста, там будет всё разнится как минимум потому что
какие-то нативно написаны в 2010 и с тех пор развиваются.
Какие-то будут на vue/react/angular или чём угодно ещё.
Какие-то мог написать кто-то на коленке для себя, а потом выложить, и там вообще не будет задуманной структуры как таковой.

[ksikrii]

Александр Аксентьев, спасибо, что поделился своим мнением. Тогда буду просто понимать, что надо дольше времени отдавать, чтобы ознакомиться с библиотекой и по этапно по IDE лазить по вызовам функций, пока не сложится картина, параллельно какие то консутркции погуглить.

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

Не знаю почему у меня изначально не получилось с тем редактором, сейчас уже добавил ссылку на загрузку картинок и посмотрел какй код и формат надо возратить, всё заработало. Хотя изначально тоже читал ту доку.
Очень помог этими 15 секундами!

[ksikrii]

Александр Аксентьев, Я зашел на твою страничку, там есть статья старенькая VueJS/Laravel + Quill Editor handling base64 image upload. Это получается - ты в проекте просто на сервере делал парсер base64 в картинку и сохранял в базе уже контент с ссылками на фотографии. И потом когда заходишь в редактирование статьи, то плагинам по ресайзу всё равно же как там хранится ссылкой или base64?

[Александр Аксентьев]

ksikrii, да редактору уже пофиг в чём оно там

Answer 2

[Владимир Коротенко]

Внезапно в каждом нпм есть папка срк
Есть даже ссылка на гит.

Как говорят апологиаты опенсорса, вы можете все сами поправить.
Я обычно ржу, потому что поправить ну это и уметь надо.
Вот как пример то что мне заказали переработать, ссылка на результат
https://github.com/vkorotenko/react-native-slide-verify