Что делает разработчик, если ему нужно раскрасить кнопку в красный цвет? Ищет в npm пакет, окрашивающий кнопки в красный цвет.
![](https://habrastorage.org/getpro/habr/upload_files/bbe/8e1/deb/bbe8e1deb2a1fcb2b9a006d146bdb26d.jpg)
В реестре npm существует более миллиона пакетов для решения практически любых задач разработчика. Например, с их помощью можно минифицировать код, удалять и переименовывать файлы, создавать спрайты, отправлять сообщения в центр уведомлений операционных систем, работать с препроцессорами Less и Sass и выполнять многие другие действия, упрощающие и автоматизирующие работу над проектом.
Конечно, бездумно использовать менеджер пакетов не стоит: некоторые задачи можно решить и без него. Но всё же npm-пакеты полезны и постоянно применяются в веб-разработке. Поэтому важно знать, как их правильно выбрать, где искать и на что обратить внимание перед установкой.
Как искать подходящий npm-пакет?
Сначала нужно понять, для чего он вам нужен. Предположим, вы хотите автоматически расставить префиксы в свой код. Если вы уже работали с подходящим пакетом и знаете, как он называется, просто открываете сайт npmjs.com и вводите название в строку поиска. Например, «autoprefixer».
![Точное совпадение по названию пакета Точное совпадение по названию пакета](https://habrastorage.org/getpro/habr/upload_files/986/36a/ac4/98636aac42566ab1f8e880bcb30ae477.png)
Если не знаете, какой пакет позволяет это сделать — открываете браузер и вводите в поиске запрос о том, какой npm-пакет подключить для создания HTTP-клиента. Обычно в поисковой выдаче сразу же появляются ссылки на страницы сайта npmjs.com или другие сайты, на которых разработчики обсуждают подходящие варианты.
![Гуглим пакет по примерному описанию Гуглим пакет по примерному описанию](https://habrastorage.org/getpro/habr/upload_files/58a/4b9/e16/58a4b9e16a0fd7325b25b37197266ae6.png)
Если не получится найти самостоятельно, всегда можно попросить помощи на профессиональных форумах. Например, на Хабре или StackOverflow.
Как выбрать npm-пакет?
Реестр npm — это общедоступная коллекция. Здесь любой разработчик может предложить свой вариант кода, поэтому для решения каждой задачи существует сразу несколько схожих пакетов: десятки или даже сотни готовых вариантов. Но если их бездумно добавлять в свой проект, ситуация может выйти из-под контроля. И поэтому приходится тщательно выбирать.
Чтобы помочь разработчикам, команда npm ввела критерии, по которым можно отсортировать пакеты и выбрать из них наиболее подходящий. Есть четыре условия ранжирования: по популярности, качеству, обслуживанию и оптимальности.
Обслуживание (maintenance). Сортирует пакеты по уровню поддержки кода разработчиками. Считается, что пакеты с хорошей поддержкой будут лучше работать с текущими или будущими версиями npm CLI — интерфейсом командной строки. Обслуживание — это один из важнейших параметров, ведь порой даже высокорейтинговые пакеты с миллионными загрузками перестают поддерживать. Для них не выпускают обновления и не исправляют ошибки, поэтому использование такого пакета рано или поздно может привести к проблемам.
![](https://habrastorage.org/getpro/habr/upload_files/9f0/fd2/269/9f0fd22691fdd05b9e70360fe0f07e6e.jpeg)
Посмотреть дату последнего обновления можно как в репозитории GitHub (слева), так и прямо на странице пакета на сайте npmjs.com (справа).
Популярность (popularity). Сортирует пакеты по количеству загрузок: чем больше разработчиков использует пакет, тем больше к нему доверия. Сравнить популярность можно и без сортировки. Для этого посмотрите количество еженедельных загрузок на странице пакета на сайте npmjs.com или зайдите в репозиторий на Github и сравните количество звёзд.
![Звёзды на Github похожи на лайки в социальных сетях — чем их больше, тем репозиторий популярнее. Звёзды на Github похожи на лайки в социальных сетях — чем их больше, тем репозиторий популярнее.](https://habrastorage.org/getpro/habr/upload_files/f0c/492/ba3/f0c492ba3eb8223bd10bc9136384cec8.jpeg)
![На странице пакета на сайте npmjs.com можно увидеть еженедельное число загрузок пакета. На странице пакета на сайте npmjs.com можно увидеть еженедельное число загрузок пакета.](https://habrastorage.org/getpro/habr/upload_files/636/de4/a72/636de4a72a2e13ae7b91ad3802780b55.jpeg)
Любопытный факт: на GitHub 16 млн репозиториев, у которых есть хотя бы одна звезда. 1800 имеют более 10 тыс звезд и всего у 20 репозиториев более 100 тыс звезд.
Качество (quality). Учитывает стабильность, наличие файла README, тесты, актуальные зависимости и сложность кода. Его тоже можно проверить без сортировки. Для этого зайдите в репозиторий проекта, посмотрите на коммиты и файлы, в том числе README. Последний заслуживает особенного внимания, потому что содержит информацию о проекте: как устанавливать пакет и как работать с кодом.
![Пример файла README, который описывает установку пакета CSSO — минификатора CSS. Пример файла README, который описывает установку пакета CSSO — минификатора CSS.](https://habrastorage.org/getpro/habr/upload_files/f5a/854/14c/f5a85414c45d762bdb74739f50bd8030.jpeg)
Оптимальность (optimal). Это универсальный критерий, который объединяет перечисленные выше условия сортировки: популярность, качество и обслуживание.
Коротко
Выбирайте пакеты с регулярной поддержкой, актуальными зависимостями и качественной документацией. Если сравниваете между несколькими подходящими вариантами, отдавайте предпочтение npm-пакетам с высоким рейтингом и большим количеством загрузок.
А когда сделаете выбор — загляните ещё и на другие ресурсы. Посмотрите обзоры других разработчиков и только после этого решайте, стоит ли использовать пакет в своем проекте или поискать что-то другое.
Какие пакеты чаще используют фронтенд-разработчики?
Разработчики подбирают npm-пакеты в зависимости от поставленных целей. К примеру, HTML Academy использует в учебных проектах несколько npm-пакетов, которые полностью автоматизируют рутинные задачи разработки.
Чтобы оптимизировать картинки, уменьшить их вес и перевести в новый формат, наши студенты и стажёры используют gulp-svgstore, imagemin и gulp-webp. Для минификации HTML и CSS файлов применяют csso и html-minifier. Но так как в production-окружении важно иметь возможность просмотреть сжатый код, дополнительно устанавливают gulp-sourcemaps.
Чтобы сделать код более читаемым и ускорить процесс разработки, студенты и стажёры используют препроцессоры. Поэтому в проект добавляют less или sass. А чтобы запустить локальный сервер и подготовить код к production-окружению, применяют gulp-plumber, del, browser-sync и другие npm-пакеты.
Если вы тоже хотите научиться работать c Node.js, правильно выбирать npm-пакеты и устанавливать зависимости, запишитесь на курс «HTML и CSS. Адаптивная вёрстка и автоматизация». За 8 недель вы создадите адаптивный трехстраничный сайт по стандартам качества индустрии, подготовите автоматизированную сборку проекта с оптимизацией файлов и научитесь работать с Gulp и Node.js.
Комментарии (7)
Pongo
30.07.2021 22:28+1Есть еще удобный https://www.npmtrends.com — делает сравнение нескольких пакетов, иногда подсказывает похожие.
dsrk_dev
31.07.2021 23:14Ну вот, а самый важный сайт для выбора npm пакетов под фронтенд так и не упомянули.
https://bundlephobia.com - покажется размер библиотеки
mSnus
Следующая статья должна быть "как вычистить ненужные зависимости npm из проекта". Вечная борьба джунов с миддлами!)
sashasushko
Вангую ответ "бывалых": не устанавливать их :-)