Hacknote.js
600 subscribers
24 photos
5 videos
1 file
36 links
Заметки о веб-разработке и около неё

https://newesters.github.io/hacknote-js/
Download Telegram
Channel created
Всем привет!

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

Этот канал посвящён JavaScript и всему, что с ним связано.
peerDependencies

При разработке библиотеки очень важно знать про поле peerDependecies в package.json.

Это поле позволяет установить требования для пользователя библиотеки.

Например, при разработке библиотеки React-компонентов в peerDependencies нужно указать React (при этом подобрав максимально широкий диапазон версий), что будет означать, что пользователь библиотеки должен установить React в свой проект самостоятельно (NPM >= 7 сделает это автоматически).

Это позволяет избежать дубликатов.

#npm #peerDependencies
Вчера у меня отвалился интернет и я решил протестировать свою домашнюю инфраструктуру на состоятельность.

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

К счастью это поведение выключается в конфигурации хранилища параметром uploadpurging.

#docker #selfHosted
В продолжение темы домашней инфраструктуры: я поставил на свой домашний сервер Verdaccio — фактически это опенсорсный селф-хостед NPM репозиторий. Его я указал в домашнем .npmrc, чтобы использовать как репозиторий по умолчанию.

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

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

#npm #selfHosted
@microsoft/api-extractor

Меня раздражают почти все потребительские продукты Microsoft, но то, что они делают для разработчиков, действительно воодушевляет.

Среди ассортимента крутых тулзов от них имеется api-extractor — утилита, которая, как следует из названия, "извлекает API" вашей библиотеки.

Под этим "извлечением" подразумевается сбор типов и комментариев в коде (для которых, кстати, разработана спецификация tsdoc) и формализация их в виде модели API библиотеки.

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

— упаковывать все *.d.ts файлы в один общий index.d.ts со всеми экспортируемыми типами;

— валидировать публичный API библиотеки и централизованно следить за его изменениями, чтобы по более явным критериям определять наличие "breaking changes" при очередном релизе (с помощью автоматически генерируемого файла api-report.md, который попадает в пулл реквесты и тоже становится предметом обсуждения);

— автоматически генерировать документацию по библиотеке (с помощью api-documenter);

— придумайте свой юзкейс.

Этот инструментарий уже зарекомендовал себя в опенсорс разработке и используется, например, в redux-toolkit.

#docs #tools #build
В предыдущем посте была картинка с предлагаемым мной пайплайном для сборки библиотеки и первым этапом в нём является tsc — это компилятор тайпскрипта, который есть в самом пакете typescript.

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

Rollup в отличии от tsc это бандлер — утилита, которая объединяет множество модулей в один файл (бандл). Но действительно ли это может быть полезно для библиотеки? На мой взгляд нет.

Единственное, чем может быть в данном случае полезен бандлер, — подключение не джаваскриптовых модулей. Например, для svg в react может понадобиться подключить svgr, но и у этого инструмента есть CLI, то есть его можно использовать и без бандлера. Не нужно использовать бандлер как таск-раннер. Кстати, я сейчас занимаюсь разработкой "умного" таск-раннера, который будет автоматически параллелить выполнение NPM-скриптов, так что ждите анонс.

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

Если скорость сборки с tsc вас не устраивает, можно просто заменить его на swc, но стоит учитывать, что tsc это на текщий момент единственный инструмент в экосистеме JavaScript, который умеет проверять типы (хотя вроде бы работа в этом направлении уже ведётся), остальные же просто их вырезают.

В будущих постах расскажу ещё о нескольких инструментах и практиках сборки библиотек с помощью tsc.

#build #tools