Как искать и выбирать npm-пакеты? — Блог HTML Academy
Что делает разработчик, если ему нужно раскрасить кнопку в красный цвет? Ищет в npm пакет, окрашивающий кнопки в красный цвет.
Реестр npm
В реестре npm существует более миллиона пакетов для решения практически любых задач разработчика. Например, с их помощью можно минифицировать код, удалять и переименовывать файлы, создавать спрайты, отправлять сообщения в центр уведомлений операционных систем, работать с препроцессорами Less и Sass и выполнять многие другие действия, упрощающие и автоматизирующие работу над проектом.
Конечно, бездумно использовать менеджер пакетов не стоит: некоторые задачи можно решить и без него. Но всё же npm-пакеты полезны и постоянно применяются в веб-разработке. Поэтому важно знать, как их правильно выбрать, где искать и на что обратить внимание перед установкой.
Как искать подходящий npm-пакет?
Сначала нужно понять, для чего он вам нужен. Предположим, вы хотите автоматически расставить префиксы в свой код. Если вы уже работали с подходящим пакетом и знаете, как он называется, просто открываете сайт npmjs.com и вводите название в строку поиска. Например, «autoprefixer».
Если не знаете, какой пакет позволяет это сделать — открываете браузер и вводите в поиске запрос о том, какой npm-пакет подключить для создания HTTP-клиента. Обычно в поисковой выдаче сразу же появляются ссылки на страницы сайта npmjs.com или другие сайты, на которых разработчики обсуждают подходящие варианты.
Гуглим пакет по примерному описаниюЕсли не получится найти самостоятельно, всегда можно попросить помощи на профессиональных форумах. Например, на Хабре или StackOverflow.
Как выбрать npm-пакет?
Реестр npm — это общедоступная коллекция. Здесь любой разработчик может предложить свой вариант кода, поэтому для решения каждой задачи существует сразу несколько схожих пакетов: десятки или даже сотни готовых вариантов. Но если их бездумно добавлять в свой проект, ситуация может выйти из-под контроля. И поэтому приходится тщательно выбирать.
Чтобы помочь разработчикам, команда npm ввела критерии, по которым можно отсортировать пакеты и выбрать из них наиболее подходящий. Есть четыре условия ранжирования: по популярности, качеству, обслуживанию и оптимальности.
Обслуживание (maintenance). Сортирует пакеты по уровню поддержки кода разработчиками. Считается, что пакеты с хорошей поддержкой будут лучше работать с текущими или будущими версиями npm CLI — интерфейсом командной строки. Обслуживание — это один из важнейших параметров, ведь порой даже высокорейтинговые пакеты с миллионными загрузками перестают поддерживать. Для них не выпускают обновления и не исправляют ошибки, поэтому использование такого пакета рано или поздно может привести к проблемам.
Посмотреть дату последнего обновления можно как в репозитории GitHub (слева), так и прямо на странице пакета на сайте npmjs.com (справа).
Популярность (popularity). Сортирует пакеты по количеству загрузок: чем больше разработчиков использует пакет, тем больше к нему доверия. Сравнить популярность можно и без сортировки. Для этого посмотрите количество еженедельных загрузок на странице пакета на сайте npmjs.comили зайдите в репозиторий на Github и сравните количество звёзд.
Любопытный факт: на GitHub 16 млн репозиториев, у которых есть хотя бы одна звезда. 1800 имеют более 10 тыс звезд и всего у 20 репозиториев более 100 тыс звезд.
Качество (quality). Учитывает стабильность, наличие файла README, тесты, актуальные зависимости и сложность кода. Его тоже можно проверить без сортировки. Для этого зайдите в репозиторий проекта, посмотрите на коммиты и файлы, в том числе README. Последний заслуживает особенного внимания, потому что содержит информацию о проекте: как устанавливать пакет и как работать с кодом.
Пример файла README, который описывает установку пакета CSSO — минификатора CSSОптимальность (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-пакеты.
Галерея NuGet | Retyped.gulp-minify-html 1.0.6556
- ПРОЧТИ МЕНЯ
- Фреймворки
- Зависимости
- Использован
Библиотека связывания Gulp Minify HTML (gulp-minify-html) для проектов Bridge. NET.
Продукт | Версии |
---|---|
.NET Framework | нетто40 сеть403 нетто45 сеть451 сеть452 сеть46 сеть461 сеть462 сеть463 сеть47 сеть471 сеть472 сеть48 сеть481 |
Совместимые целевые платформы
Дополнительные вычисляемые целевые платформы
Узнайте больше о целевых платформах и . NET Standard.
-
- Перепечатано.узел (>= 7.0.6556)
пакеты NuGet
Этот пакет не используется никакими пакетами NuGet.
репозитория GitHub
Этот пакет не используется никакими популярными репозиториями GitHub.
загрузок | Последнее обновление | |
---|---|---|
1.0.6733 | 902 | 6/9/2018 |
![]() |
891 | 21.04.2018 |
1.0.6556 | 780 |
13.![]() |
1.0.6532 | 718 | 19.11.2017 |
1.![]() |
733 | 12.11.2017 |
1.0.6477 | 720 |
25.![]() |
1.0.6465 | 735 | 13.09.2017 |
1.![]() |
769 | 27.08.2017 |
1.0.6440 | 764 |
19.![]() |
Используйте Gulp, чтобы упростить рабочий процесс angularjs · soyuka.me
Я часто вижу, как у людей возникают проблемы с управлением внедрением угловых зависимостей, минификацией, шаблонами и т. д. У меня никогда не было таких проблем, потому что мой рабочий процесс на основе gulp уже обрабатывает все за меня.
Что не так
Например, angular DI, несмотря на то, что они устарели, ужасная нотация массива, является занозой в заднице. Ага, совсем не СУХОЙ:
угловой.модуль('моймодуль') .controller('SomeCtrl', SomeCtrl) функция SomeCtrl($scope, $timeout) {} //чувствуете дежавю? SomeCtrl.$inject = ['$scope', '$timeout'];
Написание некоторых шаблонов, которые angular будет интерпретировать так, чтобы они были доступны в $templateCache
, также отстой. Особенно, если вы хотите какой-то чистый способ сделать это. Используя javascript, это будет выглядеть примерно так:
angular.module('myModule.templates') .run(['$templateCache', функция($templateCache) { $templateCache.put('представления/список', '
Но шаблон — это HTML, верно? Зачем писать HTML внутри Javascript? На самом деле я скопировал один из моих gulp-рендерил шаблоны , потому что я никогда этого не делал. Хорошо, я мог бы, но тогда я был угловатым новичком.
Исправить!
Внедрение зависимостей
Во-первых, используйте ng-annotate! (К вашему сведению: первая фиксация 3 сентября 2013 г.)
Это замечательный инструмент, который позаботится о DI за вас. Теперь вы можете написать:
функция MyCtrl($scope) {}
И плагин добавит .$inject = ['$scope']
. Это хорошо и позволяет вам, помимо меньшего количества нажатий клавиш, сохранять более чистый код.
Шаблоны
Напишите свои шаблоны, используя HTML, HAML или что-то еще. Только не пишите сумасшедшие шаблоны в javascript! Это заставляет меня вспомнить конец 2006 года; при написании HTML внутри ужасного PHP-кода имело смысл!
Глотая фантазии
Для протокола: я следую этому руководству по стилю angular.
Возьмем следующую структуру:
Нам нужно:
- gulp-ng-annotate да, это ng-annotate в плагине gulp
- gulp-angular-templatecache преобразует html в угловые шаблоны
- gulp-minify-html ага, теперь мы можем похвастаться – и действительно уменьшить размер наших ресурсов
- gulp-jsclosure Мне действительно нужно оправдываться?
- gulp-uglify конечно, минимизация лучше
- gulp-concat мы используем хорошую структуру, но нам нужен только 1 файл
- gulp-rename Я хочу один main.js и main.min.js
При желании вы можете использовать gulp-plumber для управления ошибками потока, чтобы они не выбрасывались. Особенно раздражает, когда gulp завершает работу при использовании
gulp watch
.
Однострочная установка зависимостей:
npm install gulp gulp-ng-annotate gulp-angular-templatecache gulp-minify-html gulp-jsclosure gulp-uglify gulp-concat gulp-rename --save-dev
И теперь мы можем написать gulpfile
:
// gulpfile.js 'использовать строгий' const глоток = требуется ('глоток') const templateCache = require('gulp-angular-templatecache') const minifyHtml = требуется ('gulp-minify-html') const concat = требуется ('gulp-concat') const uglify = требуется ('gulp-uglify') const rename = require('gulp-rename') const ngannotate = require('gulp-ng-annotate') константное закрытие = требуется ('gulp-jsclosure') const p = требуется ('путь') /** * Конфигурация путей, которую легко изменить и/или использовать в нескольких задачах */ постоянные пути = { джаваскрипты: [ './src/js/app.js', /* * этот файл не должен быть передан в git, вы пишете HTML! * он также не должен отслеживаться gulp, если он затем вызывает изменение * или gulp останется в бесконечном цикле (см.ниже) */ './src/js/templates.js', './src/**/*.js', './src/**/**/*.js' ], шаблоны: [ './src/templates/*.html', './src/templates/**/*.html' ] } /** * Берет шаблоны html и преобразует их в шаблоны angular (javascript) */ gulp.task('шаблоны', функция() { вернуть gulp.src(paths.templates) .pipe(minifyHtml({ пусто: правда, запасной: правда, цитаты: правда })) .pipe(templateCache({ модуль: 'myModule.templates', автономный: правда, /** * Здесь я удаляю .html, чтобы сохранить `$templateCache` * шаблон в `views/home` вместо `views/home.html`. * Я сохраняю структуру каталогов для имени шаблона */ transformUrl: функция (url) { вернуть url.replace (p.extname (url), '') } })) // помещаем все это в наш файл javascript .pipe(concat('templates.js')) .pipe(gulp.dest('./src/js')) }) /** * Concat, закрытие, аннотирование, исправление скриптов * @beforeDo `шаблоны глотка` */ gulp.
task('скрипты', ['шаблоны'], function() { вернуть gulp.src(paths.javascripts) //сначала я создаю чистый файл main.js .pipe(concat('main.js')) .pipe (закрытие ({угловой: правда})) .pipe(ngannotate()) .pipe(gulp.dest('./dist')) //затем убираем `main.js` и переименовываем его в `main.min.js` //изменение может вызвать проблемы с angular .pipe(uglify({искажать: ложь})) .pipe(переименовать('main.min.js')) .pipe(gulp.dest('./dist')) }) /** * Команда `gulp` разрешается в `gulp scripts` */ gulp.task('по умолчанию', ['скрипты']) /** * Следите за путями, которые вы хотите, и выполняйте задачу скриптов * @beforeDo по умолчанию (небольшой полезный лайфхак) */ gulp.task('смотреть', ['по умолчанию'], function() { /** * Либо не добавляйте `templates.js` в пути js * и добавьте его позже в источник задач скриптов или удалите здесь. * Действительно, если за `templates.js` следят, * он запустит задачу шаблонов и может изменить файл. * Затем задача будет запущена снова и т.
д. * Вы можете использовать https://github.com/urish/gulp-add-src, чтобы добавить его в `скрипт` * источники. */ пусть js = paths.javascripts.slice() js.splice(js.indexOf('./src/js/templates.js'), 1) gulp.watch(js, ['скрипты']) })
И теперь мы можем кодировать в HTML, javascript и забыть о .$inject
или уродливом javascripthtml во время кодирования!
Чтобы использовать $templateCache
в своем приложении, вам просто нужно добавить myModule.templates
в зависимости модуля и использовать $templateCache.get('views/home')
.
Почувствуй силу глотка
Я ненавижу HTML, может быть, я написал большую часть его, может быть, просто потому, что закрывающие теги вызывают у меня ощущение «повторяйся». К счастью, в наши дни существует множество шаблонизаторов, которые компилируются в HTML. Я предпочитаю HAML, но следующий будет работать так же с Jade или любым другим.
Итак, я добавляю HAML в рабочий процесс. HAML необходимо преобразовать в HTML, а затем в шаблоны Angular.
Для HAML единственный подключаемый модуль, который всегда работал у меня, — это gulp-ruby-haml. Обратите внимание, что на самом деле это не следует философии gulp, в которой он просто выполняет команду haml
.
Давайте установим это (вам понадобится haml
ruby gem):
npm установить gulp-ruby-haml
Затем просто добавьте зависимость, измените расширения шаблонов и добавьте преобразование haml в html:
Индекс: gulpfile.js ================================================== ================= --- gulpfile.js 2015-12-01 21:05:25.000000000 +0100 +++ gulpfile.js 2015-12-01 21:05:35.000000000 +0100 @@ -8,6 +8,7 @@ const rename = require('gulp-rename') const ngannotate = require('gulp-ng-annotate') константное закрытие = требуется ('gulp-jsclosure') +const haml = требуется('gulp-ruby-haml') const p = требуется ('путь') постоянные пути = { @@ -23,13 +24,14 @@ '.![]()