TLDR:
Автор проползwww.npmjs.comданные из всех публичных репозиториев. На основе этих данных мы анализируем рейтинг самых загружаемых пакетов npm за последний год, сравниваем распространенные интерфейсные фреймворки и загружаемые инструменты сборки, а также экологический статус различных распространенных фреймворков. Эти данные помогают нам понять существующую экосистему Npm и выбрать передовые технологии.
NPM — это то, что каждый использует каждый день.
Каждый день мы думаем о том, какой пакет использовать, а какой нет.
Напомним, что основанием для принятия этих решений в прошлом является не что иное, как:
- Я использовал эту сумку раньше, и она работает хорошо;
- Все в сообществе разработчиков пишут статьи о пакете Amway, и все его используют, так что это должно быть правильно;
- Я случайным образом искал ключевые слова в Google/npmjs.com, и первое, что выскочило, было то, что вроде бы документация была полной, количество звезд было довольно большим, а загрузки были в порядке, поэтому я решил использовать этот пакет. .
Но мы никогда не получаем данные с статистического уровня, а затем принимаем решения. С моей точки зрения, это предвзято.
Мы никогда не принимаем количественные решения о загрузке пакетов.
Этот пакет имеет 10 загрузок в месяц, это слишком много?
Этот пакет загружает 10 Вт в месяц, это слишком много?
Мы всегда слепы перед npmjs.
Поэтому я решил просканировать npmjs.com и сделать статистику. Я надеюсь увидеть экологический статус пакетов npm с точки зрения Бога.
Итак, что беспокоит авторов пакетов NPM?
Получаем статистику частоты слова, получая ключевое слово в пакете NPM, нарисуйте слово облако, получите следующую облачную карту слов:
В облаке слов React имеет наибольшее количество вхождений, достигая 66w раз. Кроме того, очень часто употребляются слова Plugin, Component, Node, API, JavaScript, Angular, Generator, CSS, Cordova, Cli, Vue и т. д.
Это на самом деле показывает, что фронтенд-инженеры делают ежедневно. Пишите компонент с React каждый день, API на узле каждый день, JavaScript каждый день...
Это также самые горячие темы, обсуждаемые в сообществе фронтенда в настоящее время.
Итак, как в целом экология всего пакета npm?
Я отсортировал данные и отфильтровал месяц в соответствии с объемом загрузки.Поскольку временной интервал сканирования составляет одну неделю, я напрямую удалил текущий месяц и последний месяц из просканированных данных.
Рисуется следующая схема:
Из общей ситуации, в октябре этого года общая загрузка составляла 29,3 млрд. Это очень ужасное число, среднее, более 100 балл NPM в секунду. В ноябре прошлого года эта цифра составляет около 8,1 миллиарда. В эпоху гомогенов несколько чисел настолько хороши, по крайней мере, экология всего NPM очень процветает и развита.
Итак, какой пакет NPM самый популярный?
Я сделал статистику на основе загрузок, и результаты следующие:
Фактически, самым загружаемым пакетом NPMJS в прошлом году был отладочный пакет, который был загружен более 900 миллионов раз. Использование очень простое, это войти.
Второй наиболее загружаемый пакет — это хороший брат Debug, supports-color, его использование очень простое, чтобы проверить, поддерживает ли терминал цветное отображение.
Раньше я думал, что мне нравятся цвета разноцветного бревна, но я был довольно странным.
Теперь кажется, что всем нравятся яркие цвета...
Третий — readable-stream, функция, вероятно, является реализацией потока Node, потому что поток Node был плохо написан в более ранних версиях, поэтому используйте этот пакет, чтобы избежать различий между различными средами Node. Причина такого большого количества загрузок, я думаю, из-за зависимостей семейства babel.
Четвертое — это source-map, с которым все знакомы, почти все наши проекты используют source-map.
Пятый вид, который в основном используется для решения проблемы принадлежности экземпляра к определенному классу. Когда вы пишете программы, вы должны столкнуться с философской проблемой, что я хочу знать, принадлежит ли этот экземпляр к этому классу.Решение состоит в том, чтобы использовать вид-из, или построить вид-колесо самостоятельно.
Остальные, такие как glob, qs, async и т. д., на самом деле являются наборами инструментов для написания программ.Когда мы пишем программу, почти все вышеперечисленное необходимо, или пакеты, от которых мы зависим, интегрировали эти вещи. вышеперечисленные пакеты так популярны, потому что эти пакеты решают проблемы, которые будут у всех фронтенд-инженеров, и решают их очень хорошо. На него ссылаются многие популярные пакеты, поэтому объем загрузки очень велик.
Но на самом деле, судя по Github, у этих пакетов не так уж много звезд.Количество отладочных звезд — 7к, что на самом деле неплохо, а вот support-color — всего лишь жалкие 138 звезд, а readable-stream — звезд всего 971. Учитывая их популярность на npmjs, это жалкое число.
Далее в этом отчете мы найдем больше высоких загрузок и мало звезд или высоких звезд, но мало загрузок.
Высокие загрузки означают, что больше проектов используют пакет в реальных ситуациях, а высокий балл означает, что проекту уделяется больше внимания.
Но пакет, который используется многими людьми, не обязательно будет использоваться многими людьми; пакет, на который обращают внимание многие люди, не обязательно будет использоваться многими людьми...
В рейтинге общих загрузок мы не увидели привычных фронтенд-фреймворков, бэкенд-фреймворков и инструментов сборки. Итак, какова экология этих сумок?
Долгое время все говорили о трехточечном интерфейсном фреймворке React, Angular и Vue.
Итак, судя по количеству загрузок, какова связь между React, Angular и Vue?
На долю React пришлось более 61% загрузок, Angular — 28%, а Vue был последним с 10%.
Видно, что популярность React всегда превосходила популярность Angular и Vue.
Некоторое время назад Vue просто отмечала, что количество звезд на Github просто превзошло реагировать, но отсюда, Vue все еще имеет долгий путь.
С Angular не очень знаком, поэтому комментировать не буду.
Давайте подробнее рассмотрим экосистему React
Я использую общее количество загрузок в качестве основного измерения, фильтрую модули со словом React в ключевых словах, отфильтровываю базовые пакеты инструментов и отфильтровываю 20 лучших пакетов.
Первый это проп-типы, с которыми все знакомы, следующий.
Второй — hoist-non-react-static, который используется для решения проблемы, заключающейся в том, что при упаковке компонентов React более высокого порядка статические функции до упаковки нельзя получить после упаковки компонентов.
Третий — react-dom, очень знакомый друг, так что больше о нем говорить не буду.
Четвертое — предупреждение, которое часто используется реактом и другими компонентами экосистемы реакта, например, когда вы маппируете что-то без ключа, при запросе браузера используется это предупреждение.
Четвертое — предупреждение, которое часто используется реактом и другими компонентами экосистемы реакта, например, когда вы маппируете что-то без ключа, при запросе браузера используется это предупреждение.
Пятый — ESLint-plugin-React, инструмент Eslint специально для React.
Вы должны были увидеть здесь много старых друзей, таких как имена классов, react-redux, react-router, react-transition-group и так далее.
Несколько лет назад, когда впервые появилось react-motion, все говорили RIP react-transition-group, но данные сильно ударили по лицу, и объем загрузки react-transition-group намного превысил объем react-motion. Это связано с тем, что стоимость обучения react-motion слишком высока, или официальное одобрение react-transition-group слишком мощное?
Ведро семейства React не работает.
Давайте посмотрим на экологию Vue
Метод скрининга здесь включает пакет, содержащий Description Vue, и не выполняет класс инструментов скрининга.
Реагируйте на Vue After Angular и давно доморощенный набор общественности, впитав преимущества обеих сторон и сформировав свои особенности.
Хотя объем загрузки не такой большой, как у React, преимущества Vue также очевидны.Одним из очевидных моментов является то, что стоимость обучения очень низкая.Для отечественных разработчиков документы на родном китайском делают всех очень удобными.
Кроме того, из приведенной выше таблицы вы видите в основном пакеты, связанные с инструментами.
Почему?
Поскольку vue-template-compiler, vue-style-loader, vue-hot-reload-api и т. д. выше — это все вещи, от которых зависит vue-loader, а затем vue-cli зависит от vue-loader, поэтому, как только разработчик с ведро семейства vue, количество загрузок вышеперечисленных пакетов будет последовательно увеличиваться. Разработчики могут добавить некоторые инструменты Lint по мере необходимости, в зависимости от сложности потока данных проекта, перейти к vuex, а если это промежуточный продукт, перейти к element-ui, и все готово.
На самом деле идея Vue очень хороша, для начинающих программистов нет необходимости прыгать в яму конфигурации babel и webpack, для старых драйверов новые проекты также могут быстрее войти в состояние разработки.
Я не буду говорить об экологии Angular, потому что я не очень знаком с ней.
Итак, переходим к следующему вопросу: какая серверная веб-инфраструктура сильнее?
Для сравнения я взял более популярные KOA, Express, Sails и фреймворк next.js, который популярен в изоморфном рендеринге, и более популярный за рубежом Meteor.js.
Результаты этого сравнения немного шокируют.
Express прочно стоит на внутренней платформе Node, и никто не может ее поколебать.
Преимущества Koa по сравнению с Express заключаются в отсутствии ада обратных вызовов, меньшей привязке и большей настраиваемости.
Но действительно ли разработчики покупаются на это преимущество?
Во-первых, это проблема ада обратных вызовов, экспресс также имеет асинхронные решения, такие как @awaitjs/express. На самом деле это не обязательно коа. Меньше привязок, гораздо больше экспресса.
Мы можем взглянуть на загрузки экологии, связанной с коа.
После установки koa всем нравится устанавливать koa-compose, koa-router, koa-bodyparser, koa-static и koa В чем разница между этим и Express?
Тогда я мог бы также установить экспресс напрямую, один шаг.
Может быть, когда мы создаем веб-сайт, нам действительно следует больше использовать Express, ведь экология загрузок существует, и соответствующая поддержка промежуточного программного обеспечения будет более обильной. Если вы хотите выполнить вторичную разработку веб-фреймворка, вы можете рассмотреть вторичную разработку на основе Koa (например, egg.js, midway и т. д.).
Давайте посмотрим на связанные модули экосистемы Express.
Первый — это path-to-regexp, инструмент маршрутизации, интегрированный в Express.
Второй — это инструмент переадресации прокси для таких инструментов, как синхронизация браузера, пакетный компонент, основанный на http-proxy.
Третий морган для логирования, да, в его зависимостях есть отладка.
Четвертый это killabe, это инструмент, используемый для очистки всех сокетов, почему объем загрузки такой большой, потому что сервер веб-пакета использует его; сервер веб-пакета использует экспресс, нет, он использует коа, но почему он появляется здесь? Потому что в его ключевом слове есть выражение.
Также сзади много знакомых пакетов, таких как webpack-hot-middleware, cors, multer,passport,csurf,helm,x-ss-protection,hsts и так далее.
В конце концов, какой из основных инструментов сборки является наиболее загружаемым?
Я перетащил статистику загрузки роллапа, парсера, Grunt, Gulp, Webpack и других инструментов сборки и упаковки.
В первую очередь самое страшное это посылка.Объем закачек почти прямая,что немного отличается от того что у нее больше 2w звезд на гитхабе.Может все просто обращают внимание,но мало кто реально кладет посылки в свои собственные проекты.
За последние шесть месяцев количество пользователей растут экспоненциально. Посылка была очень тяжелой, хорошо? Нет никакого сравнения без вреда.
Верхний — это свертка, которая обычно используется, когда мы упаковываем библиотеку, а когда мы упаковываем веб-приложение, мы используем webpack.
Затем идут grunt, gulp, taskrunner, но популярность webpack все еще относительно высока, что может быть связано с популярностью фреймворков React и Vue.Старые проекты используют Grunt/Gulp, а новые проекты в основном используют только Webpack.
Далее мы заглянем внутрь Webpack
Поскольку загрузчик и плагины Webpack имеют соответствующие шаблоны, все загрузчики заканчиваются на -loader, а все плагины заканчиваются на -plugin, поэтому фильтровать удобно, и результаты следующие:
Первое, что мы увидели, это uglifyjs-webpack-plugin, Базовая конфигурация всех, кто использует webpack, — это сжатие кода, и это нормально.
Второй — это загрузчик стилей, очень часто используемый загрузчик. Его основная функция — вставка тегов
Пятый это файл-загрузчик.Все равно какие файлы ресурсов у нас есть.Я не знаю какой загрузчик использовать,так что впору его использовать.
За спиной тоже много знакомых фигур, таких как babel-loader, postcss-loader, url-loader, sass-loader, eslint-loader и т.д., все они старые знакомые.
Что ж, пока что в этом отчете описывается текущее состояние экосистемы npm с точки зрения общих, интерфейсных, серверных инструментов и инструментов сборки.
Я надеюсь, что эта статья даст вам количественное представление о пакетах npm и поможет вам сделать технический выбор.
Эта статья и данные, просканированные в этой статье, используются только для обучения и общения.
Примечание:
- Из экосистемы React удалены пакеты:terpret, rechoir, exenv и recompose.
- Почему данные cnpm не сканируются?Различается ли внутреннее распределение данных? Общий ежемесячный объем загрузок cnpm составляет около 200 миллионов, что относительно мало по сравнению с npmjs.com и мало влияет на общие данные.