Самые (бес)полезные JavaScript пакеты 7 с половиной NPM модулей, от которых смешно


Оглавление (нажмите, чтобы открыть):

Введение в пакетный менеджер NPM для начинающих

Node.js делает возможным написание серверных приложений на JavaScript. Он построен на движке JavaScript V8 и написан на C++ — и поэтому он быстрый. Изначально он создавался как серверное окружение для приложений, но разработчики начали использовать его для создания инструментов, помогающих автоматизировать выполнение локальных задач. В итоге возникшая вокруг Node.js новая экосистема инструментов (типа Grunt и Gulp), привела к трансформации процесса фронтенд-разработки.

Чтобы использовать все эти инструменты (или пакеты) в Node.js нам нужна возможность устанавливать и управлять ими. Для этого создан npm, пакетный менеджер Node.js. Он устанавливает нужные вам пакеты и предоставляет удобный интерфейс для работы с ними. Но перед тем как начать использовать npm, вам надо установить в своей системе Node.js.

Установка Node.js

Перейдите на страницу загрузок Node.js и скачайте нужную вам версию. Есть установщики для Windows и Mac, а также скомпилированные бинарники и исходный код для Linux. Кроме того, в Linux вы можете установить Node.js с помощью пакетного менеджера, все это описано в документации.

В этой статье мы будем использовать стабильную версию 5.7.0.

Посмотреть, где установлен Node и проверить версию можно следующими командами:

Чтобы удостовериться, что установка прошла успешно, выполним несколько команд в простой интерактивной среде Node (REPL).

Установка работает, поэтому теперь мы можем сфокусироваться на npm, который включен в установку.

Пакеты Node

С помощью npm можно устанавливать пакеты локально или глобально. В локальном режиме пакеты устанавливаются в каталог node_modules родительского каталога. Владельцем каталога является текущий пользователь. Глобальные пакеты устанавливаются в каталог /lib/node_modules/ , владельцем которого является root (префиксом в данном случае обычно является каталог /usr/ или /usr/local ). Это значит, что вам надо использовать sudo для глобальной установки пакетов, что может повлечь ошибки с полномочиями при разрешении сторонних зависимостей, а также создает проблему для безопасности. Изменим это:

Изменение места установки глобальных пакетов

Посмотрим, что скажет нам команда npm config .

Мы получили основную информацию об установке. Теперь важно узнать место установки глобальных пакетов:

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

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

Сам npm по-прежнему установлен в каталог, владельцем которого является root. Но так как мы поменяли место установки глобальных пакетов, мы можем использовать полученное преимущество. Мы установим npm еще раз, но теперь в место, указанное нами. Заодно мы получим последнюю версию npm.

Наконец, нам надо добавить .node_modules_global/bin в нашу переменную окружения $PATH , чтобы мы могли запускать глобальные пакеты из командной строки. Сделаем это, добавив следующую строку в файл .profile или .bash_profile и перезапустив терминал.

Теперь командная оболочка будет сразу находить пакеты, установленные в .node_modules_global/bin и использовать корректную версию npm .

Глобальная установка пакетов

На данный момент у нас уже есть один глобальный пакет — это сам пакет npm. Изменим это и установим еще один пакет, это будет UglifyJS (инструмент для минификации JavaScript). Для глобальной установки используется флаг —global , его можно записывать сокращенно -g .

Как вы можете видеть из вывода в консоль, у нас установлены дополнительные пакеты — это зависимости UglifyJS.

Вывод списка установленных пакетов

Мы можем вывести список глобально установленных пакетов с помощью команды npm list с опцией —global :

Такой вывод списка, со всеми зависимостями, перенасыщен. Мы можем выводить его в более читаемом виде с помощью опции —depth=0 :

Стало лучше — теперь мы видим только список установленных пакетов с номерами их версий, без зависимостей.

Теперь мы можем обрабатывать файлы JavaScript в терминале с помощью UglifyJS. Например, следующая команда сделает из файла example.js минифицированный example.min.js :

Локальная установка пакетов

Локальная установка используется в npm по умолчанию, то есть достаточно не использовать флаг —global . Пакет будет установлен в каталог node_modules родительского каталога. Создадим каталог с проектом в нашем домашнем каталоге:

Вывод списка локальных пакетов

Также как и в случае с глобальными пакетами, список локальных выводится командой npm list :

Как видите, мы можем устанавливать локальные пакеты, где угодно. Это также значит, что мы можем создать другой каталог и установить туда другую версию пакета (в нашем случае это библиотека underscore).

Удаление локальных пакетов

Так как npm это пакетный менеджер, у него есть возможность удалять пакеты. Предположим, что установленная в предыдущем примере версия underscore вызывает проблемы с совместимостью. Мы можем удалить этот пакет и поставить более старую версию.

Установка определенной версии пакета

Теперь установим нужную версию underscore. В команде установки номер версии указывается после символа @ :

Обновление пакета

В последней версии underscore исправили мешавший нам баг и мы хотим обновить версию этого пакета.

Примечание: для этой статьи, библиотека underscore была указана как зависимость в package.json (см. управление зависимостями).

Поиск пакетов

Мы уже пару раз использовали команду mkdir . Есть ли пакет node с подобным функционалом?

Такой пакет нашелся (mkdirp), установим его.

Теперь создадим файл mkdir.js :

И запустим его в терминале:

Управление кэшем

После установки пакета npm сохраняет его копию в кэше, поэтому при следующей его установке вам не нужно беспокоить сеть. Кэш хранится в каталоге .npm вашего домашнего каталога.

Этот каталог со временем замусоривается старыми пакетами и иногда его полезно очищать.

Управление зависимостями

В нашем проекте пока только два пакета, но их количество очень быстро возрастает. Установка зависимостей вручную очень неудобна, поэтому для управления ими мы можем использовать файл package.json , расположив его в корне нашего проекта. Он генерируется с помощью команды npm init , которая выведет в консоль несколько вопросов для создания файла:

В результате мы получим файл со следующим содержимым:

Вы можете сгенерировать это файл и более простым способом, с помощью опции —yes (автоматический ответ “да” на все вопросы):

Файл package.json будет создан в качестве name будет использовано название каталога.

Вы также можете добавить private: true , чтобы предотвратить случайную публикацию частных репозиториев или подавления любых предупреждений при выполнении npm install . Создадим новый каталог и используем package.json для установки зависимостей.

Это показывает, как просто мы можем установить пакеты, нужные нам в другом каталоге на основе нашего файла package.json . Но как поддерживать его актуальность при установке новых пакетов? Для этого используется флаг —save .

Наш файл package.json также обновился:

Менеджеры версий

Есть пара инструментов, позволяющих использовать несколько версий Node.j на одном компьютере. Первая это n, другая — nvm(Node Version Manager). Если вас интересует эта возможность, подробнее о ней можно узнать из следующей статьи: Install Multiple Versions of Node.js using nvm.

Заключение

В этой статье освещены основы работы с npm. Я показал, как установить Node.js, как изменить место установки глобальных пакетов (так мы можем избежать использования sudo ) и как установить пакеты локально и глобально. Я также рассмотрел удаление, обновление и установку определенной версии пакета, а также управление зависимостями проекта.

В каталоге npm тысячи пакетов и их число будет расти, с учетом анонса jQuery о публикации всех плагинов как пакетов npm.

Описание современного JavaScript для динозавров

Это перевод статьи Питера Янга Modern JavaScript Explained For Dinosaurs. Она познакомит вас с инфраструктурой современной фронтэнд-разработки.

Наш курс JS: Настройка окружения выполняет схожую задачу, но чуть глубже, последовательно и без привязки только к фронтэнду. Этим темам также посвящена значительная часть первого проекта в JS Backend и JS Frontend. Там мы на деле устанавливаем и настраиваем среду для разработки, проверки, публикации, сборки и запуска своих приложений.


Изучать современный JavaScript — болезненно, если вы не знакомы с ним с самого его рождения. Экосистема разрастается и меняется с такой скоростью, что сложно разобраться с тем, какие проблемы пытаются решить разные инструменты. Я начал программировать в 1998 году, но к серьёзному изучению JavaScript приступил только в 2014. В то время я помню как анализировал Browserify и изумлённо смотрел на его слоган:

Browserify позволяет запрашивать (require) модули в браузере, объединяя все зависимости.

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

Цель этой статьи — показать исторический контекст развития инструментов JavaScript до их уровня в 2020. Начнём с самых первых моментов и построим шаблон веб-сайта, как бы это сделали динозавры — без инструментов, чистый HTML и JavaScript. Затем мы будем пошагово вводить различные инструменты, чтобы на практике видеть, какие задачи они решают — поочерёдно. Благодаря историческому контексту у вас будет больше возможностей изучить и лучше адаптироваться к бесконечно меняющемуся JavaScript. Давайте начнём!

Использование JavaScript старомодным способом

Давайте начнём со старомодного веб-сайта, написанного на HTML и JavaScript, что включает загрузку и помещение ссылок на файлы вручную. Вот простой index.html файл, который ссылается на JavaScript файл:

Строчка ссылается на отдельный JavaScript-файл с названием index.js в той же директории:

Это всё, что вам нужно, чтобы сделать веб-сайт!

Теперь давайте предположим, что вы хотите добавить библиотеку, которую написал кто-то другой, вроде moment.js (библиотеку, которая помогает превращать даты в понятные для чтения человеком). Например, вы можете использовать функцию moment в JavaScript вот так:

Но только при условии, что вы включите moment.js в код своего веб-сайта! На домашней странице moment.js вы найдёте такие инструкции:

Хмм, как много всего происходит в секции Install справа. Но давайте пока проигнорируем это — мы можем добавить moment.js на веб-сайт, загрузив файл moment.min.js в ту же директорию и включив его в файл index.html .

Заметьте, что moment.min.js загружается перед index.js , а это значит вы можете использовать функцию moment в index.js таким способом:

И вот таким образом мы раньше делали веб-сайты с JavaScript-библиотеками! Положительный момент в том, что всё было достаточно легко понимать. Отрицательный — было муторно искать и загружать новые версии библиотек каждый раз, когда они обновлялись.

Использование пакетного менеджера JavaScript (npm)

Начиная примерно с 2010 появилось несколько конкурирующих пакетных менеджеров JavaScript для автоматизации процесса загрузки и обновления библиотек из центрального репозитория. Bower был, возможно, самым популярным в 2013, но в итоге, примерно в 2015 его настиг npm. (Стоит отметить, что с конца 2020 yarn привлёк много внимания, как альтернатива интерфейсу npm, но он всё ещё использует npm пакеты).

Заметьте, что npm был изначально пакетным менеджером, созданным специально для node.js — среды исполнения JavaScript, предназначенной для запуска на сервере, а не во фронтенде. Что делает его очень странным выбором для фронтенд-пакетного менеджера JavaScript библиотек, предназначенных запускаться в браузере.

Заметьте: Использование пакетного менеджера обычно требует работы с командной строкой, что в прошлом никогда не требовалось от фронтенд-разработки. Если вы никогда ей не пользовались, можете прочитать этот туториал, чтобы составить представление о том, как начать. Так или иначе, умение пользоваться командной строкой — важная часть современного JavaScript (и ещё она открывает двери в другие области разработки).

На Хекслете как раз есть бесплатный курс Bash: Основы командной строки, — прим. ред.

Давайте взглянем как использовать npm, чтобы установить пакет moment.js автоматически, вместо того, чтобы загружать его вручную. Если у вас установлен node.js, у вас уже есть и npm, а это значит, что вы можете через командную строку перейти к папке, в которой находится файл index.html и ввести:

Будет выведено несколько вопросов (можно оставить умолчания: нажимать «Enter» после каждого вопроса) и сгенерируется новый файл с именем package.json . Это конфигурационный файл, который npm использует, чтобы хранить всю информацию о проекте. С настройками по-умолчанию содержимое package.json должно выглядеть подобно этому:

Чтобы установить JavaScript-пакет moment.js, мы теперь можем следовать инструкциям npm на их домашней странице, введя в командную строку:

Эта команда выполняет две задачи: в начале она загружает весь код из пакета moment.js в папку, называемую node_modules . Потом автоматически модифицирует файл package.json , чтобы мониторить moment.js как зависимость (зависимости — это пакеты и библиотеки, от которых зависит наше приложение).

Это будет полезно в будущем, когда вместо расшаривания проекта с остальными — а именно папки node_modules (которая может сильно разрастись) — вам понадобится расшарить только файл package.json , и другие разработчики смогут установить необходимые пакеты автоматически с помощью команды npm install .

Теперь мы больше не должны загружать moment.js вручную с веб-сайта, потому что можем сделать это автоматически и обновить, используя npm. Заглянув внутрь папки node_modules можно увидеть файл moment.min.js в директории node_modules/moment/min . Это значит, мы можем сослаться на npm загружаемую версию moment.min.js в файле index.html , как видно ниже:

Хорошие новости в том, что теперь мы можем использовать npm, чтобы загружать и обновлять пакеты с помощью командной строки. Плохие в том, что прямо сейчас мы обшариваем папку node_modules в поисках местоположения каждого пакета и вручную включаем их в HTML. Это достаточно неудобно, и следующее, что мы сделаем, это посмотрим как автоматизировать и этот процесс.

Использование модульного упаковщика JavaScript (webpack)

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

Это именно то, что мы делаем в приведенном выше примере с moment.js — весь moment.min.js файл загружается в HTML, что определяет глобальную переменную moment , которая становится доступна любому файлу, загруженному после moment (независимо от того, нужен ли к нему доступ).

В 2009 году был запущен проект CommonJS, определяющий экосистему для JavaScript за пределами браузера. Большая часть CommonJS была спецификацией для модулей и она, наконец, позволила JavaScript делать импорт и экспорт между файлами, как в большинстве языков программирования, без использования глобальных переменных. Самая известная реализация модулей CommonJS — это node.js.

Как говорилось ранее, node.js — это среда выполнения JavaScript, предназначенная для запуска на сервере. Вот как выглядел более ранний пример с использованием модулей node.js. Вместо того, чтобы загружать все moment.min.js с помощью HTML script тега, вы можете загрузить его напрямую в файле JavaScript вот так:

Опять же, так работает загрузка модуля в node.js, и это здорово, поскольку node.js — это серверный язык с доступом к файловой системе компьютера. Node.js также знает расположение каждого пути модуля npm, поэтому вместо необходимости писать require(‘./node_modules/moment/min/moment.min.js) , можно использовать require(‘moment’) — чудно.

Всё это подходит для node.js, но если вы попытаетесь использовать написанный выше код в браузере, вы получите сообщение об ошибке, в котором будет указано require not defined (не определено). Браузер не имеет доступа к файловой системе, это значит, что загрузка модулей таким способом очень проблематична — загрузка файлов должна выполняться динамически, синхронно (что замедляет исполнение), или асинхронно (что может вызвать проблемы с синхронизацией).

Мастер Йода рекомендует:  Представлен релиз DNS сервера KnotDNS 2.7.0

Тут вступает в действие упаковщик модулей. Упаковщик модулей JavaScript — это инструмент, который решает задачу с помощью этапа сборки (он имеет доступ к файловой системе) для создания конечно результата, совместимого с браузером (уже не нужен доступ к файловой системе). В этом случае нам нужен упаковщик модулей для поиска всех утверждений require (а это недопустимый синтаксис JavaScript для браузера) и замены их актуальным содержимым каждого требуемого файла. Конечный результат — один бандл (упакованный файл) JavaScript (без инструкций require)!

Самым популярным упаковщиком модулей был Browserify, он вышел в 2011 году и первым использовал стиль node.js для require во фронтенде (что, по сути, помогло npm стать самым используемым менеджером пакетов для фронтенда). Примерно в 2015 году более популярным стал упаковщик модулей webpack (его подпитывала популярность фронтенд-фреймворка React, который максимально пользовался различными функциями webpack).

Давайте посмотрим, как использовать webpack, чтобы заставить показанный выше пример с require(‘moment’) работать в браузере. Сначала нам нужно установить webpack в проект. Сам webpack — это npm-пакет, поэтому мы можем установить его из командной строки:

Обратите внимание на аргумент —save-dev , он сохраняется как development-зависимость. Это означает, что это пакет вам нужен в среде разработки, но не на production-сервере. Это можно наглядно увидеть в файле package.json , который был автоматически обновлен:

Теперь у нас есть webpack, установленный в папку node_modules , как один из пакетов. Вы можете вызывать webpack из командной строки:

Эта команда запустит инструмент webpack, который был установлен в папке node_modules , начнет с файла index.js , найдет любые require утверждения и заменит их соответствующим кодом, чтобы создать один выходной файл с именем bundle.js .

Это значит, что мы больше не будем использовать index.js в браузере, так как в нем содержатся недопустимые require утверждения. Вместо этого мы будем использовать вывод bundle.js в браузере, что должно будет отразиться в файле index.html :

Если вы обновите браузер, увидите, что всё работает, как работало раньше!

Обратите внимание, что нам нужно будет запускать команду webpack каждый раз, когда мы будем менять index.js . Это утомительно и станет ещё утомительней, когда мы станем использовать более сложные фичи webpack (например, генерацию source maps, чтобы помочь отлаживать исходный код из преобразованного кода). Webpack может считывать параметры из файла конфигурации в корневом каталоге проекта с именем webpack.config.js , который в нашем случае будет выглядеть так:

Теперь каждый раз, когда мы меняем index.js , мы можем запускать webpack с помощью команды:

Нам больше не нужно указывать параметры index.js и bundle.js , так как webpack загружает эти параметры из файла webpack.config.js . Уже лучше, но все же утомительно вводить эту команду при каждом изменении кода — позже мы сделаем этот процесс более плавным.

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

Полезные JavaScript-модули, на которые стоит обратить внимание

Эта статья представляет собой подборку наиболее полезных модулей и утилит для серверной и клиентской разработки на NodeJS и JavaScript, которые использует в своей работе программист Трэвис Фишер. По словам автора, перед ним не стояла цель создать еще один исчерпывающий awesome list, которые, несомненно, прекрасны, но порою перегружены информацией и содержат узкоспециализированные модули, которые пригодятся далеко не каждому разработчику. Этот же список содержит основные и только самые необходимые инструменты, которые автор использует сам и советует применять другим.

Инструменты командной строки

Для начала рассмотрим самые полезные модули для работы с командной строкой.

Если вы пишете модули для npm, я настоятельно рекомендую обратить внимание на np, который значительно упрощает управление версиями, добавление тегов для релизов на git, и публикацию в npm. Особенно полезным этот инструмент становится тогда, когда у вас на поддержке больше одного модуля. Не менее достойной альтернативой ему можно считать release от Zeit.

yarn — улучшенный пакетный менеджер, совместимый с npm .

Хотя новый npm v5 и выигрывает в скорости у предыдущей версии, для разработки на своем локальном сервере я по-прежнему выбираю yarn за его скорость и надежность. В любом случае, набор модулей npm у них под капотом одинаковый, и как по мне, однозначного победителя между ними нет. Вы должны сами выбрать, какой менеджер пакетов лучше всего соответствует потребностям конкретного проекта.

Однако, JavaScript-разработчику в 2020 году желательно быть знакомым как с npm , так и с yarn и уметь переключаться между ними при необходимости.

Prettier последовательно анализирует код и переписывает его по определенному набору правил, при этом учитывает максимальную длину строки и добавляет переносы там, где это необходимо.

Я люблю eslint и долго время использовал только его для приведения кода к стандарту JavaScript, но и идея автоматизированного форматирования кода, которая лежит в основе prettier и gofmt, кажется мне весьма привлекательной.

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

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

Отлично работает с веб-приложениями на Node.js и JavaScript. Я также очень рекомендую посмотреть другие продукты Zeit, так как их команда состоит из лучших JavaScript-разработчиков, которых может предложить комьюнити.

asciinema — бесплатный инструмент записи терминальных сессий.

В прошлом посте своего блога — «Делаем код красивым» — я подробно рассказал о том, как с помощью asciinema записывать качественные и профессиональные скринкасты и демонстрировать работу с кодом.

Promises

Эта глава заслуживает отдельной статьи, особенно сейчас, когда механизм async & await фактические уже становится стандартом параллельных вычислений в JavaScript. С учетом сказанного, я настоятельно рекомендую ознакомиться с promise-fun — превосходной коллекцией модулей от Sindre Sorhus, если вы еще этого не сделали.

Единственный недостаток этих модулей заключается в том, что они, вероятно, не будут работать из коробки с большинством инструментов для фронтенда, такими как create-react-app or rollup.

Вот несколько самых полезных утилит для работы с promise и асинхронным кодом в Node:


pify — оборачивает функции обратного вызова в объекты промис.

Существует много способов конвертации старых-добрых функций обратного вызова (коллбэки) в объекты промис, но лучшим решением я считаю библиотеку pify. Она легковесная и обладает специальными функциями вроде автоматического связывания, чего не хватает стандартному util.promisify.

Асинхронность — это прекрасно, но чаще всего требуется ограничивать число одновременно выполняемых запросов, чтобы на их выполнение хватило пропускной способности сети или вычислительных ресурсов. С этой задачей блестяще справится p-map. Я использую его в 99% случаев в качестве замены для конструкции Promise.all(…), которая не поддерживает установку ограничений.

До того, как я узнал о p-map, я написал свою утилиту async-await-parallel, но вы используйте p-map — она лучше.

p-retry — повторное выполнение асинхронных функций, или функций, возвращающих Premise.

Как правило, в целях подстраховки я любой HTTP-запрос или вызов внешних служб оборачиваю в p-retry. Используя при этом p-map, можно параллельно управлять большими потоками запросов, не беспокоясь об ошибках передачи данных, проблемах с сокетами или тайм-аутах серверов.

p-timeout — завершение Promise по истечении времени ожидания ответа от сервера.

Наряду с p-retry, p-timeout оказывается крайне полезным при работе со сторонними API и сервисами. Он позволяет запускать функции, которые отработают в случае завершения неудачного Promise, это лучше, чем бесконечно ждать ответа от сервера или получить его через неопределенное время.

p-cache или p-memoize — сохранение результата вызова асинхронной функции в LRU-кэше.

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

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

Веб-скрэпинг

Существует множество замечательных утилит для автоматизированного сбора данных с сайтов, некоторые из которых работают на чистом HTML, например cheerio, другие — puppeteer — имитируют всю среду окружения браузера. Ваш выбор в каждом случае будет индивидуальным, поскольку работа с чистым HTML намного быстрее и легче, тогда как автоматизация с помощью headless-браузера (т.е. браузера без графической оболочки) более надежна, но и настроить её тяжелее.

cheerio — быстрый, гибкий модуль на основе jQuery, разработанный специально для сервера.

Cheerio действительно отлично подходит для быстрого топороного веб-скрэпинга, достаточного для разбора HTML-кода страниц. Он предоставляет синтаксис, аналогичный синтаксису jQuery, с помощью которого удобно обрабатывать HTML. Cheerio особенно хорошо сочетается с модулем request-promise-native, который нужен для загрузки удаленных HTML-документов.

puppeteer — Node-решение для доступа к Headless Chrome API (программному интерфейсу браузера без пользовательского интерфейса)

В отличие от Cheerio, puppeteer представляет собой обертку для автоматизации использования Chrome без графической оболочки, что оказывается чрезвычайно полезным для работы с современными одностраничными сайтами на JavaScript.

Так как вы взаимодействуете напрямую с движком Chrome, то парсинг кода/отрисовка страниц/выполнение скриптов происходит в полном соответствии со стандартами. Headless Chrome появился относительно недавно, но имеет все шансы вытеснить PhantomJS уже в недалеком будущем.

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

Node.js

dotenv-safe — загружает переменные окружения из .env и проверяет их на существование.

Этот модуль расширяет возможности известного модуля dotenv, добавляя проверку существования переменных окружения посредством файла .env.example . Подобно оригиналу, он обеспечивает быструю, безопасную и надежную поддержку переменных окружения для Node.

Удобен в сочетании с утилитой деплоя now.sh от Zeit, где в файле настроек now.json можно прописать ”dotenv”: true .

Выполнение HTTP-запросов является чрезвычайно распространенной операцией, для выполнения которой я предлагаю модуль request-promise-native, который добавляет модулю request поддержку промисов стандарта ES6. В 95% случаев требуется работать с HTTP-запросами в виде промисов. В остальных 5% случаев мне необходимо работать с потоком ответов напрямую, и в этом случае я использую базовый модуль request, отказываясь от поддержки промисов.

Для надежности я часто оборачиваю вызовы request-promise-native в некую комбинацию p-retry, p-timeout, and p-cache.

Также следует упомянуть о более свежей альтернативе модулю request — модуль got, в который уже по умолчанию встроена поддержка Promise, хотя сам я им практически не пользовался.

Вычисления

D3 (Data-Driven Documents) — это широко известная фронтенд-библиотека для анимации и визуализации. Она также включает в себя несколько независимых пакетов для общих математических операций, которые я считаю лучшими, именно поэтому я предпочитаю эту библиотеку её аналогам.

d3-random — генерирует случайные числа из различных распределений

Когда Math.random не справляется, попробуйте d3-random. Эта библиотека поддерживает работы с различными типами распределений, включая равномерное, нормальное и экспоненциальное.

d3-ease — набор функций для создания плавной анимации.

d3-interpolate — интерполирует числа, цвета, строки, массивы, объекты, что угодно!

Этот модуль предоставляет множество методов интерполяции для создания переходов между двумя произвольными значениями. Эти значения могут быть числами, цветами, строками, массивами или даже глубоко вложенными объектами.

Тестирование

ava — превосходный инструмент для запуска JavaScript-тестов.

Учитывая качество продуктов, выпускаемых Sindre Sorhus, неудивительно, что для запуска юнит-тестов я использую еще один их инструмент. Ava — это новый тест-фреймворк, который вобрал в себя лучшее от mocha, tape, chai и других средств тестирования, чтобы на выходе получилось уже настроенное коробочное решение.

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

nock — библиотека для имитации HTTP-запросов.

Nock отлично подходит для изолированного тестирования модулей, которые выполняют HTTP-запросы. Если ваш модуль Node работает с HTTP-запросами, и вы хотите подготовить для него тесты надлежащего качества, то nock — это ваш лучший выбор.

sinon — JavaScript-библиотека для тестирования с использованием шпионов (spy), заглушек (stub) и имитаций (mock).

Библиотека Sinon содержит весьма полезные инструменты для написания изолированных тестов с использованием механизма внедрения зависимостей. Её можно порекомендовать всем Node-разработчикам.

В завершение

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

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

40+ полезных скриптов всплывающих подсказок для CSS, JavaScript и jQuery

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

Balloon.css — Balloon — это библиотека CSS, состоящая из SasS и LESS и позволяющая отобразить интерактивную подсказку. Содержимое и положение всплывающей подсказки настраиваются через атрибут data. Вы можете показать всплывающую подсказку слева, справа или слева направо. Вы даже можете добавить эмоджи к контенту. Balloon.css можно установить через NPM и загрузить с CDNJS.

Simptip — сделано с помощью SasS, позволяющим перенастроить и перекомпилировать код в соответствии с вашими требованиями. Позиция и содержимое подсказки настраиваются с помощью имени класса и атрибута tooltip. Simptip доступен в виде пакета NPM, Yarn и Bower.

Hint.css — одна из популярных библиотек CSS для отображения всплывающей подсказки, Hint.css используется многими популярными веб-сайтами, такими как Fiverr, Webflow и Tridiv. В отличие от двух других библиотек CSS, Hint.css использует атрибут aria-label. Вы можете настроить размер и цвет с помощью имен классов с использованием методологии BEM. Hint.css доступен на NPM, Bower и CDNJS.

Microtip — еще одна потрясающая библиотека CSS для создания всплывающей подсказки. Microtip использует aria-label для хранения содержимого всплывающей подсказки и атрибут data для настройки размера и положения всплывающей подсказки.

Скрипт использует переменную CSS, которая позволяет настраивать всплывающую подсказку с помощью простого файла CSS. Переменные CSS уже поддерживаются во многих веб-и мобильных браузерах. Microtip доступен на NPM, Yarn и CDN UNPkg.

Wenk– весит всего 733 байт. Суперлегкая библиотека, написанная в суперсовременном CSS с использованием CSSNext, LESS и SCSS, позволяет настраивать и перекомпилировать стили так, как вам нравится. Wenk можно загрузить с NPM, Yarn и таких бесплатных CDN-сервисов, как rawgit.com и unpkg.com.

Tooltippy — другая легкая библиотека CSS размером около 1 КБ. Tooltippy включает в себя несколько готовых тем для стилизации всплывающей подсказки. Она написана с помощью препроцессора CSS под названием Stylus.

ElegantTips — эта библиотека поставляется с несколькими предварительно созданными темами, которые можно изменить с предоставленными именами классов. В отличие от других библиотек, которые полагаются на данные HTML5 или атрибут aria-label, ElegantTips требует добавления дополнительного элемента для создания всплывающей подсказки. Это позволяет вам добавить буквально любой контент в подсказку кроме простого текста.

Tootik — эта библиотека CSS предоставляет не только стили в формате CSS, LESS и SasS, а также простой в использовании графический интерфейс для настройки всплывающей подсказки. Вы можете просто скопировать и вставить HTML-код, сгенерированный этим инструментом. Это так просто.

VanillaJS

TippyJS – работающая на Popper.js, TippyJS поставляется с множеством опций для настройки всплывающей подсказки. Вы можете настроить анимацию, стрелку всплывающей подсказки, ширину, размер, тему и многое другое. Скрипт также предоставляет функции обратного вызова, с помощью которых можно выполнить функцию, когда всплывающая подсказка показана и скрыта. Эти функции делают TippyJS одной из самых мощных библиотек JavaScript в нашем списке скриптов для создания всплывающей подсказки.

Мастер Йода рекомендует:  Найти три числа, которые встречаются в массиве по одному разу, при условии, что все другие числа

Darsain Tooltip — эта библиотека обеспечивает базовую реализацию всплывающей подсказки. Тем не менее, она предоставляет обширные возможности для настройки поведения подсказки и набора имен классов для изменения внешнего вида всплывающей подсказки. Всплывающая подсказка хорошо работает в старых браузерах, таких как IE9 и, если это необходимо, и даже в IE8 с несколькими настройками.

Bubb — скрипт хорошо подходит для продвинутых пользователей JavaScript. Используя обширные API-интерфейсы, помимо отображения простого текста, вы можете программно добавить более сложный HTML-контент во всплывающую подсказку. Это довольно круто; вы можете обратиться к Документам к примерам.

Popper — содержит техническую абстракцию для создания чего-то, что появляется, как всплывающая подсказка, всплывающее окно и выпадающие списки. TippyJS использует его в качестве основы библиотеки, кроме того скрипт используется известными именами в Интернете, такими как Bootstrap, Microsoft и Atlassian.

YY Tooltip — в отличие от других библиотек, YY Tooltip не требует добавления элементов или атрибутов HTML. Она полностью работает с JavaScript, а контент, положение и цвета определены в объекте, а не в элементе HTML. Идеально подходит для использования с полным веб-приложением JavaScript.

Position.js — еще одна отличная библиотека JavaScript для создания всплывающих подсказок, Position.js предоставляет графический интерфейс для настройки функции и просто копирует, а затем вставляет созданный там код. Position.js можно использовать в сочетании с React.js или Vue.js.


Bezet Tooltip — эта библиотека предоставляет 14 вариантов отображения всплывающей подсказки; например, справа, слева, снизу, слева в центр, снизу в центр и т. д. Кроме того, она также достаточно умна, чтобы могла отрегулировать положение всплывающей подсказки на основе доступного пространства вокруг самой подсказки.

MouseTip — эта библиотека JavaScrtipt создаст всплывающую подсказку, которая будет двигаться вместе с курсором. Всплывающая подсказка настраивается с нестандартным атрибутом mousetip вместо использования атрибута data в HTML5. Mousetip доступен как модуль NPM.

Internetips — подобно MousetTip, всплывающая подсказка, генерируемая этой библиотекой, следует за положением курсора. Все настроено через объект JavaScript вместо HTML, а атрибуты также созданы для современных браузеров. Скрипт легкий и быстрый.

MTip — библиотека JavaScript для всплывающих подсказок с отличной совместимостью с браузером. Она совместима с IE8, полностью настраиваемая с помощью параметров, и вы можете добавить подсказку к любому элементу даже на img (элемент изображения).

Bubblesee — легкая библиотека JavaScript, которая обеспечивает прямую функциональность «подсказки». Легко использует библиотеку JavaScript без сложных опций для настройки вывода. Файл Sass предоставляется, если вы хотите изменить внешний вид всплывающей подсказки.

Tipfy — построенный с использованием современного синтаксиса JavaScript, ES6, Tipfy имеет размер всего 2 КБ. Библиотека предоставляет две версии файлов: tipfy.min.js, обеспечивающий сценарий с современным синтаксисом ES6 и tipfy.es5.min.js, если вам нужна совместимость со старыми браузерами. Скрипт использует атрибут data для настройки всплывающей подсказки; Например, data-tipfy-side используется для установки направления всплывающей подсказки, а использования атрибута data-tipfy-text для добавления содержимого всплывающей подсказки.

JQuery

Tooltipster — эта библиотека предоставляет обширные возможности для настройки практически любых элементов, таких как тема, анимация, сенсорная поддержка, контент, триггер открыть/закрыть и т. д. Она также предоставляет пользовательский прослушиватель событий и обратные вызовы, позволяя разработчикам расширять всплывающую подсказку с помощью пользовательских функций. Кроме того, будучи плагином jQuery, всплывающая подсказка будет работать в более раннем браузере, таком как IE6, в зависимости от используемой версии jQuery.

Protip — еще один расширенный плагин jQuery, Protip поддерживает 49 позиций, HTML для содержимого всплывающей подсказки, поддержка иконок, пользовательские обратные вызовы и многое другое. Protip предоставляет графический интерфейс, позволяющий легко настраивать всплывающую подсказку.

PowerTip — этот плагин jQuery также предлагает опции и API-интерфейсы, предоставляя разработчикам ряд различных способов реализации всплывающих подсказок. Он поддерживает клавиатурную навигацию, чтобы всплывающее окно отображалось при навигации элементов с помощью клавиатуры Tab. PowereTip доступен как модуль NPM. Он может использоваться с RequireJS и Browserify.

Accessible Aria Tooltip — плагин jQuery со встроенной функцией специальных возможностей, всплывающая подсказка предназначена для отображения диалогового окна с заголовком, многострочным текстом и кнопкой закрытия.

TipsJS — простой плагин jQuery, но он имеет довольно отличительные особенности. Содержимое всплывающей подсказки задается атрибутом data-tooltip. Более того, вы можете также обернуть контент специальными символами для форматирования содержимого, подобного форматированию Markdown. Вы можете использовать *, чтобы сделать содержание полужирным,

для курсивом и ^ для заголовка.

Dark Tooltip — эта библиотека предоставляет некоторые действительно полезные функции для включения всплывающей подсказки. Например, вы можете добавить кнопку подтверждения — «Да» и «Нет», уменьшить фон во время отображения всплывающей подсказки и добавить элементы HTML в контент.

Aria Tooltip — еще одна подсказка со встроенной функцией доступности, этот плагин jQuery совместим с WAI-ARIA 1.1. Он реагирует таким образом, что вы можете предоставить различные конфигурации для разных размеров видового экрана. Aria Tooltip доступен как модуль NPM с именем t-aria-tooltip.

Toolbar.js. — в то время как другой плагин jQuery может отображать только простой текст или HTML-контент во всплывающей подсказке, этот плагин jQuery создает панель инструментов. Всплывающая подсказка будет содержать две или более ссылки с иконкой, которая обычно выполняет действие при нажатии, как и любая панель инструментов.

VueJS

V-Tooltip — это компонент Vue.js, работающий от Popper.js. Он предоставляет новую директиву с именем v-tooltip, которая может быть добавлена к любому элементу для создания всплывающей подсказки. V-tooltip может содержать контент всплывающей подсказки или параметры. Помимо пользовательской директивы v-tooltip вы также можете добавить всплывающую подсказку с помощью компонента v-popover. С помощью этого компонента вы можете добавить более сложный контент во всплывающую подсказку с компонентом Vue.js или HTML.

Vue-Bulma Tooltip — компонент Vue.js для создания всплывающей подсказки, основанной на платформе UML Bulma. Эта библиотека является частью Vue Bulma. Но компонент tooltip доступен как модуль NPM с именем vue-bulma-tooltip, который вы можете использовать как автономный компонент.

Vue-Directive-Tooltip — в целом он похож на компонент V-Tooltip на основе Popper.js и предоставляет ту же директиву, что и v-tooltip. Однако он не обеспечивает компонент v-popover.

Vue-Tippy — эта библиотека оборачивает Tippy.js в компонент Vue.js. Она имеет настраиваемую директиву Vue.js, называемую v-tippy, которая работает как атрибут HTML; вы можете добавить контент для всплывающей подсказки или параметры для ее настройки. Скрипт также отображает пользовательский компонент Vue.js в содержимом всплывающей подсказки с помощью параметра html.

VueJS-Popover — пользовательский Vue.js с настраиваемой директивой, называемой v-popover, и двумя настраиваемыми компонентами, а именно

и , предоставляющими разработчикам возможность добавлять всплывающие подсказки в приложении Vue.js.

Vue-Hint — плагин Vue.js, который распаковыввет Hint.css. В плагине имеется директива v-hint-css для добавления всплывающей подсказки. Он предоставляет тот же набор параметров, что и Hint.css, поэтому вы можете добавить их как объект JavaScript или модификатор Vue.js.

ReactJS

React Joyride — компонент React, чтобы отобразить набор подсказок, которые помогут новым пользователям ознакомиться с вашим новым приложением.

React Floater — эта библиотека оборачивает Popper.js в компонент React с именем Floater, поэтому он обладает такими же замечательными функциями, как и у Floater. Вы можете добавить всплывающие подсказки и всплывающие окна, и вы также можете играть с этим компонентом через эту песочницу.

React Autotip — простой компонент React с функцией автоматического позиционирования, React Autotip автоматически отрегулирует положение всплывающей подсказки при изменении доступного пространства вокруг него.

React Tippy — построен на базе Tippy.js и Popover.js. В этой библиотеке представлен компонент Tooltip, который можно включить в приложение React.

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

Больше

Ember Tooltips — компонент Ember.js для создания всплывающих подсказок, он построен на базе Popper.js. Компонент также разработан с учетом доступности и продолжает улучшаться, чтобы соответствовать требованиям 508 по данному вопросу.

D3 Tip — плагин D3.js. D3.js — это библиотека JavaScript для визуализации данных, такая как схемы, карты, диаграммы и т. д. Этот плагин позволяет вам показывать всплывающую подсказку поверх этих данных.

Всем успешной работы!

Node.js — NPM

Дата публикации: 2020-12-18

От автора: Node Package Manager (NPM) предоставляет две основные функции: 1) online-хранилище для пакетов/модулей node.js, которые можно найти на search.nodejs.org; 2) утилита командной строки для установки пакетов Node.js, управления версиями и управления зависимостями пакетов Node.js.

Node js NPM поставляется в комплекте с установочным пакетом начиная с версии v0.6.3. Чтобы проверить версию Node, откройте консоль и введите следующую команду:

Должны ли быть сокращены пакеты jpm npm?

Я создал довольно много пакетов npm, но я до сих пор не знаю правильного ответа на этот вопрос: «Должны ли быть уменьшены пакеты jpm jpm?»

Я всегда понимал, что минимизация минифицированного кода — плохая идея, поэтому не делал этого в моих пакетах npm. Тем не менее, я вижу, что некоторые npm-пакеты axios, стилизованные компоненты предоставляют мини-версии своих файлов «dist» наряду с неминифицированными версиями, в то время как Lodash этого не делает.

Что правильно? Кто будет использовать сокращенные версии?

Все зависит от среды ваших потребителей пакетов

NodeJS

Для аудитории NodeJS ваш пакет не обязательно должен быть минимизирован, поскольку время выполнения узлов обычно имеет прямой доступ к node_modules папке node_modules . Сетевые передачи не требуются, и до запуска кода не выполняется никаких дополнительных преобразований кода.

Бундлеры/строить трубопроводы

Для потребления через среду dev, которая использует комплектщик в своем конвейере сборки, ваш пакет лучше всего не минимизировать. В большинстве случаев потребители пакетов реализуют собственный процесс минимизации. Кроме того, при предоставлении полного формата модуля, например:

  • дерево зависимостей реализации кодовых баз может быть гораздо лучше проанализировано
  • Общие зависимости между пакетами на самом деле являются одинаковыми символами для всех таких пакетов (модули являются «одиночными»)

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

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

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

Для плагинов/расширений для фреймворков, таких как Angular, Vue, Ember и т.д., Обычно не нужно минимизировать ваш код, поскольку все они реализуют собственный конвейер сборки, часто через cli.

Скриптовые теги /CDN

Это случаи, в которых минимизация ориентирована в первую очередь. Если вы размещаете файл на CDN или предоставляете его для прямого использования тега

1. Node.js модули, о которых вы должны знать: dnode¶

Всем привет! Я начинаю новую серию статей под названием Node.js модули, о которых вы должны знать . Я использую node.js более двух лет, а так же я я являюсь автором стартапа Browserling, который использует node.js. Так что, я знаю про node.js практически всё. Кроме того, я являюсь автором более 20 модулей для node.js (мой профиль на GitHub)

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

Первым модулем в серии будет dnode. dnode — это библиотека для создания RPC (freestyle rpc). Автор — James Halliday , являющийся сооснователем Browserling и Testling.

Вот, что dnode из себя представляет. Это server.js :

Теперь, если запустить client.js , то будет следующее:

Итак, что оно делает? Происходит вызов функции mul на серверной стороне со стороны клиента. При этом передаются аргументы 10 и 20 . Переданные аргументы перемножаются на серверной стороне, после чего результат отсылается на клиента с помощью вызова функции cb .

Обратите внимание, что никакого кода не передается между клиентом и сервером Всё происходит с использованием ссылок. Посмотреть на реализацию dnode-протокола вы можете в репозитарии dnode-protocol github.


Теперь давайте посмотрим на более сложный пример, где клиент вызывает сервер, который в свою очередь вызывает клиента, который передает результат обратно на сервер, который вызывает клиента и печатает результат.

Если запустить client.js , то будет получен результат: 41 . Вот как это происходит. Сначала вы подключаетесь к dnode-серверу на 5050 порту. После того, как соединение установлено, dnode-клиент вызывает функцию calculate на стороне сервера, в которую передаёт аргументы 10 и 20 , а так же функцию обратного вызова (callback), которая выводит на экран результат. После того, как сервер получил аргументы 10 и 20 , он их перемножает и вызывает функцию div со стороны клиента, которая делит полученный аргумент на 5 . Результат возвращается на сервер (через функцию обратного вызова), который прибавляет 1 к полученному результату и вызывает первоначальную функцию обратного вызова, которая печатает результат.

Мы повсеместно используем dnode в Browserling. Каждый сервис — это dnode-сервер. Все сервисы связаны друг с другом. Например, аутентификация — это dnode-сервер. Мы можем легко его оставить и обновить, в то время, как остальная часть сайта исправно работает. Просто супер!

Установить dnode можно с помощью npm:

В силу того, что dnode имеет четко описанный протокол, вы можете его реализовать на любом языке программирования! Так, уже есть реализации на Perl, Ruby, PHP, Java.

Самые (бес)полезные JavaScript пакеты: 7 с половиной NPM модулей, от которых смешно

Кроме встроенных и кастомных модулей Node.js существует огромный пласт различных библиотек и фреймворков, разнообразных утилит, которые создаются сторонними производителями и которые также можно использовать в проекте, например, express, grunt, gulp и так далее. И они тоже нам доступны в рамках Node.js. Чтобы удобнее было работать со всеми сторонними решениями, они распространяются в виде пакетов. Пакет по сути представляет набор функциональностей.

Для автоматизации установки и обновления пакетов, как правило, применяются систему управления пакетами или менеджеры. Непосредственно в Node.js для этой цели используется пакетный менеджер NPM (Node Package Manager). NPM по умолчанию устанавливается вместе с Node.js, поэтому ничего доустанавливать не требуется. Но можно обновить установленную версию до самой последней. Для этого в командной строке/терминале надо запустить следующую команду:

Чтобы узнать текущую версию npm, в командной строке/терминале надо ввести следующую команду:

Для нас менеджер npm важен в том плане, что с его помощью легко управлять пакетами. К примеру, создадим на жестком диске новую папку modulesapp (В моем случае папка будет находиться по пути C:\node\modulesapp ).

Далее для примера установим в проект express . Express представляет легковесный веб-фреймворк для упрощения работы с Node.js. В данном случае мы не будем пока подробно рассматривать фреймворк Express, так как это отдельная большая тема. А используем его лишь для того, чтобы понять, как устанавливаются сторонние модули в проект.

Для установки функциональности Express в проект вначале перейдем к папке проекта с помощью команды cd . Затем введем команду

После установки express в папке проекта modulesapp появится подпапка node_modules , в которой будут хранится все установленные внешние модули. В частности, в подкаталоге node_modules/express будут располагаться файлы фреймворка Express.

Далее определим файл простейшего сервера. Для этого в корневую папку проекта modulesapp добавим новый файл app.js :

Первая строка получает установленный модуль express, а вторая создает объект приложения.

В Express мы можем связать обработку запросов с определенными маршрутами. Например, «/» — представляет главную страницу или корневой маршрут. Для обработки запроса вызывается функция app.get() . Первый параметр функции — маршрут, а второй — функция, которая будет обрабатывать запрос по этому маршруту.

И чтобы сервер начал прослушивать подключения, надо вызвать метод app.listen() , в который передается номер порта.

Запустим сервер командой node app.js :

И в адресной строке браузера введем адрес https://localhost:3000/ :

Файл package.json

Для более удобного управления конфигурацией и пакетами приложения в npm применяется файл конфигурации package.json . Так, добавим в папку проекта modulesapp новый файл package.json :

Мастер Йода рекомендует:  Разработчики Slack анонсировали глобальное обновление

Здесь определены только две секции: имя проекта — modulesapp и его версия — 1.0.0. Это минимально необходимое определение файла package.json. Данный файл может включать гораздо больше секций. Подробнее можно посмотреть в документации.

Далее удалим из проекта каталог node_modules . То есть в папке проекта modulesapp будут два файла app.js и package.json .

Теперь снова добавим express с помощью следующей команды:

Флаг —save указывает, что информацию о добавленном пакете надо добавить в файл package.json.

И после выполнения команды, если мы откроем файл package.json , то мы увидим информацию о пакете:

Информация обо всех добавляемых пакетах, которые используются при запуске приложения, добавляется в секцию dependencies .

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

Эта команда возьмет определение всех пакетов из секций dependencies и загрузит их в проект.

devDependencies

Кроме пакетов, которые применяются в приложении, когда оно запущено, например, express, то есть в состоянии «production», есть еще пакеты, которые применяются при разработке приложения и его тестировании. Такие пакеты добавляются в другую секцию — devDependencies . В вышеприведенном примере она не определена, но если бы мы добавили какой-нибудь grunt или gulp, то они бы были именно в секции devDependencies.

Например, загрузим в проект пакет jasmine-node , который используется для тестирования приложения:

Флаг —save-dev указывается, что информацию о пакете следует сохранить в секции devDependencies файла package.json:

Удаление пакетов

Для удаления пакетов используется команда npm uninstall . Например:

Эта команда удаляет пакет из папки node_modules , в то же время в файле package.json информация о данном пакете остается. Чтобы удалить информацию также и из package.json, применяется флаг —save :

Семантическое версионирование

При определении версии пакета применяется семантическое версионирование. Номер версии, как правило, задается в следующем формате «major.minor.patch». Если в приложении или пакете обнаружен какой-то баг и он исправляется, то увеличивается на единицу число «patch». Если в пакет добавляется какая-то новая функциональность, которая совместима с предыдущей версией пакета, то это небольшое изменение, и увеличивается число «minor». Если же в пакет вносятся какие-то большие изменения, которые несовместимы с предыдущей версией, то увеличивается число «major». То есть глядя на разные версии пакетов, мы можем предположить, насколько велики в них различия.

В примере с express версия пакета содержала, кроме того, дополнительный символ карет: «^4.14.0». Этот символ означает, что при установке пакета в проект с помощью команды npm install будет устанавливаться последняя доступная версия от 4.14.0. Фактически это будет последняя доступная версия в промежутке от 4.14.0 до 5.0.0 (>=4.14.0 и app.js :

В данном случае мы получаем переданные при запуске приложению параметры.

И определим следующий файл package.json :

Здесь добавлена секция scripts , которая определяет две команды. Вообще команд может быть много в соответствии с целями и задачами разработчика.

Первая команда называется start . Она по сути выполняет команду node app.js , которая выполняет код в файле app.js

Вторая команда назвывается dev . Она также выполняет тот же файл, но при этом также передает ему два параметра.

Названия команд могут быть произвольными. Но здесь надо учитывать один момент. Есть условно говоря есть зарезервированные названия для команд, например, start , test , run и ряд других. Их не очень много. И как раз первая команда из выше определенного файла package.json называется start. И для выполнения подобных команд в терминале/командной строке надо выполнить команду

Например, для запуска команды start

Команды с остальными названия, как например, «dev» в вышеопределенном файле, запускаются так:

Например, последовательно выполним обе команды:

7. Введение в NPM — менеджер пакетов для Node.JS

Всем привет! Эта статья посвящена «NPM». Менеджеру пакетов для Node.JS. Модуль «NPM» идет вместе со стандартной инсталляцией Node.JS. Если вы поставили Node.JS то «NPM» вы поставили тоже. И в этом модуле, кроме всего прочего содержится консольная утилита которая дает доступ к громадной базе данных модулей, поддерживаемых сообществом. Сейчас на главном сайте «NPM» — www.npmjs.com, как они пишут, более четверти миллиона модулей. Это достаточно много, с одной стороны, с другой стороны, это не о чем, поскольку многие модули давно заброшены и не разрабатываются. Но даже если их вычесть, все равно полезных модулей очень много и как правило, если стандартная программистская задача, то модуль для ее решения мы можем найти. Это первое, что вообще надо сделать, поискать готовый модуль.

Сейчас нашей задачей будет понять, что же такое эти самые пакеты с которыми работает «NPM». Для этого мы сейчас познакомимся с программистом, которого зовут Константин. Константин сидит за своим компьютером и только что он создал замечательный модуль. Назвал его «supermodule». Константин хотел бы поделиться этим модулем с другими людьми, конечно же используя «NPM». Для этого Константину не достаточно просто создать директорию с модулем, нужно еще создать для них специальный файл, описание пакета. С названием «package.json». Этот файл содержит самую главную информацию о том, что за пакет здесь находится.

«name : supermodule » как правило «name» совпадает с названием директории и версия здесь самая, что ни на есть первая. Если Константин достаточно ленив, то он может не создавать «package.json» руками а воспользоваться вызовом «npm init» из консоли. «npm init» спросит основные характеристики пакета и их надо будет ввести или пропустить.

И с генерирует «package.json». Основные поля это

Остальные мы с вами посмотрим чуть позже. Наш проект выглядит так

Итак «package.json» готов и можно опубликовать модуль в центральной базе данных. Для этого существует команда «npm publish» если сейчас ее вызвать то будет ошибка, потому что, чтобы ее опубликовать нужен юзер. По этому Константин набирает «npm adduser» и создает юзера отвечая на появляющиеся поля. NPM отправляет соответствующие запросы и вожделенного юзера Константин получил.

Теперь вся работа с «NPM» будет от имени этого юзера. Это конечно же имеет значение только если Константин как то работает на изменение в центральной базе данных. Для установки модуля это не нужно, а вот для публикации как раз очень даже важно.

Давайте себе представим, что нас отвлекли и мы отложили публикацию нашего модуля на завтра. Завтра мы возвращаемся в нашу директорию «supermodule» с намерением опубликовать его. Юзера то мы вчера уже создали, нам соответственно надо залогиниться. Очень просто, вводим команду «npm login» далее свой username и password и email. И вот мы снова здесь. Со списком команд вы можете ознакомится введя команду «npm help».

Возвращаемся к Константину. Вводим «npm publish», он делает запрос к базе данных и отправляет в базу модуль Константина. И что же мы видим

В чём дело? Почему не работает? Давайте разбираться! Читаем внимательно, говорит, может я не залогинен, хм… Давайте проверим — вводим «npm whoami»

Всё верно, это я. Ну все ясно, оказывается до нас, некий Илья уже создал модуль с таким названием. Ну конечно же двух модулей с одинаковыми названиями быть не может в одной базе данных «NPM», иначе получилась бы полная неразбериха. Заходим в файл описания пакета, даем новое имя нашему модулю меняя «name : supermodule» на «name : supermodule1234567», пробуем

Ура! Отлично, модуль создан, теперь кто угодно может его поставить, ну а Константин, конечно же если он залогинен, может вносить в него изменения.

А в это время, где то далеко, далеко сидит Петя. Петя пишет проект и в этом проекте ему нужен модуль, который ну просто супер. Петя хочет его найти в базе данных «NPM» и он пишет в консоле «npm search super module» или просто «npm s super module». «npm search» подтягивает изменения в базе данных в локальный кеш и потом делает поиск. В данном случае в качестве супер модуля вот сколько всего нашлось и конечно нашелся наш модуль «supermodule1234567»


Петя решил, что хочет поставить именно его. Петя вводит команду «npm install supermodule1234567″ или просто «npm i supermodule1234567». «NPM» скачивает модуль

Скачивает он его в директорию «node_modules» если ее не существует, то «NPM» её создаёт. В Петином проекте теперь появилась директория «node_modules» и в ней находится супер модуль от Константина. И теперь, конечно, Петя может сделать «require(‘supermodule1234567)»

Отлично, вот модуль и пригодился. Обратим внимание на небольшую тонкость, связанную с местом установки модуля. Вернемся в консоль и видите, тут в конце вывода «npm install supermodule1234567» написано куда поставился модуль

Например Петя сделал директорию «db» и перешел в эту директорию. И захотел поставить какой то модуль в ней. И он вводит «npm install supermodule1234567» и что же произойдет? Модуль поставиться не в ту же директорию из которой Петя вызвал «npm install» а в директорию выше, где у нас находится папка «node_modules». Так происходит потому, что модули ставятся по следующему принципу. А именно «NPM» ищет директорию «node_modules» или файл «package.json» в текущей директории, если не находит, ищет на уровень выше, и выше, аж пока не найдет и поставит туда. И вот если не найдет ни директорию «node_modules» ни файл «package.json», только тогда «NPM» сам создаст папку в текущей директории. Смысл в том, что «NPM» таким образом ищет корень пакета, чтоб разместить там нужный нам модуль и как правило именно такое поведение и является желательным. Ну а что если я все таки хочу поставить модуль в папку «db», очень просто, достаточно «node_modules» руками создать и вызвать находясь в этой директории «npm install».

Со временем Константин выпустит новый модуль. Для того чтобы Пети обновить этот модуль из репозитория, достаточно выполнить команду «npm update» и «npm» обновит все модули находящиеся в директории «node_modules», если их авторы выпустили новые версии. Ну и наконец, если Пете надоело использовать наш супер модуль, он может удалить его из директории «node_modules» руками или использовать команду «npm remove supermodule1234567″ или «npm r supermodule1234567».

Итак мы рассмотрели основной жизненный цикл пакета «NPM».

Основные команды NPM

Жирным выделены короткие варианты команд, можно вводить и так и так.

  • npm init -> создает package.json
  • npm adduser -> создает пользователя, регистрация своего профиля в NPM
  • npm publish -> публикация пакета в центральной базе данных NPM, ее так же называют репозиторием.
  • npm search -> команда, для поиска пакета.
  • npm install -> поставит модуль по названию.
  • npm update -> обновит модуль по названию, если вызвать без имени модуля, она обновит все модули что есть.
  • npm remove -> удалить модуль по названию.
  • npm help -> позволяет получать встроенный help npm.

Иногда в «npm help» достаточно интересные вещи, например если посмотреть «npm help search» то тебя кидает на локальную доку и тут есть такая информация, что можно искать не просто по ключевым словам, а и по регулярным выражениям.

Где npm устанавливает пакеты?

может кто-нибудь сказать мне, где я могу найти узел.модули js, которые я установил с помощью npm ?

16 ответов

глобальные библиотеки

вы можете запустить npm list -g чтобы увидеть, где установлены глобальные библиотеки.

в системах Unix они обычно размещаются в /usr/local/lib/node или /usr/local/lib/node_modules при установленных по всему миру. Если вы установите NODE_PATH переменная окружения к этому пути, модули могут быть найдены узлом.

Windows XP — %USERPROFILE%\AppData\npm\node_modules
Windows 7, 8 и 10 — %USERPROFILE%\AppData\Roaming\npm\node_modules

не глобальные библиотеки

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

вы можете запустить npm list чтобы увидеть установленные нелокальные библиотеки для вашего текущего местоположения.

команда npm root сообщит вам эффективный каталог установки ваших пакетов npm.

Если ваш текущий рабочий каталог является пакетом узлов или подкаталогом пакета узлов, npm root сообщит вам локальный каталог установки. npm root -g покажет глобальный корень установки независимо от текущего рабочего каталога.

использовать npm root -g команда для выяснения вашего глобального npm путь.

пример:

для глобально установленных модулей:

другие ответы дают вам специфические для платформы ответы, но общий из них таков:

при установке глобального модуля с npm install -g something , npm ищет переменную конфигурации prefix чтобы узнать, где установить модуль.

вы можете получить это значение, под управлением npm config get prefix

для отображения всех глобальных модулей, доступных в этой папке использовать npm ls -g —depth 0 ( depth 0 чтобы не отображать их зависимости.)

если вы хотите изменить путь к глобальным модулям, используйте npm config edit и поставить prefix = /my/npm/global/modules/prefix в файле.

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

в windows я использовал npm list -g чтобы узнать, по умолчанию мои (глобальные) пакеты были установлены в C:\Users\[Username]\AppData\Roaming\npm .

в более ранних версиях модули NPM всегда помещались в /usr/local/lib / node или везде, где вы указали корень npm внутри .файл npmrc. Однако в NPM 1.0+ модули устанавливаются в двух местах. Вы можете иметь модули, установленные локально для вашего приложения в /.node_modules или вы можете установить их глобально, который будет использовать выше.

Если модуль был установлен с глобальным флагом (-g), вы можете получить родительское местоположение, выполнив следующую команду

npm получить префикс

который будет печатать местоположение вместе со списком установленных модулей

не прямой ответ, но может помочь .

у npm также есть папка кэша, которую можно найти, запустив npm config get cache ( %AppData%/npm-cache в Windows).

модули npm сначала загружаются здесь, а затем копируются в глобальную папку npm ( %AppData%/npm/Roaming в Windows) или конкретной папке проекта ( your-project/node_modules ).

поэтому, если вы хотите отслеживать пакеты npm и некоторые способы, список всех загруженных пакетов npm (если кэш npm не очищен) посмотрите на эту папку. Папка структура как //

Если вы ищете исполняемый файл, установленный npm, возможно, потому, что вы хотели бы поместить его на свой путь, вы можете просто сделать

самый простой способ сделать

в список и места их установки.

Я установил npm через chololatey, поэтому местоположение

C:\MyProgramData\ является местоположением РЕПО chocolatey.

вы можете найти установленные модули по команде

он предоставит вам местоположение, где узел.установлены модули js.

Если вы устанавливаете узел.модули js локально в папке, вы можете набрать следующую команду, чтобы увидеть расположение.

в npm 1.0 есть два способа установки вещей:

глобально — это сбрасывает модули в /lib/node_modules , и помещает исполняемые файлы в /bin , где обычно что-то вроде /usr/local . Он также устанавливает страниц в /share/man , если они поставляются.

локально — это устанавливает ваш пакет в текущий рабочий каталог. Модули узла входят ./node_modules , исполняемые пойти в ./node_modules/.bin/ , а man-страницы вообще не установлены.

вы можете получить свой С npm config get prefix . (Полезно при установке узла с nvm).

пакеты удаляются в папку node_modules под префиксом. При установке локально это означает, что вы можете требовать («packagename») для загрузки своего основного модуля, или требовать («packagename/lib/path/to/sub/module») для загрузки других модулей.

глобальные установки в системах Unix перейдите к /lib / node_modules. Глобальные установки в Windows переходят к /node_modules (то есть нет папку lib.)

пакеты с областью действия устанавливаются одинаково, за исключением группирования вместе в подпапке соответствующей папки node_modules с имя этого префикса области с помощью символа@, например npm install @myorg / package разместит пакет в <префикс>/ node_modules / @myorg / package. Возможности для более детали.

Если вы хотите требовать() пакет, то установите его локально.

Вы можете получить свой с npm config get prefix . (Полезно при установке узел с НВМ).

читать про локально.
Читайте о .

в Ubuntu 14.04 они установлены в

/ usr/lib / node_modules

как говорят другие ответы, лучший способ сделать

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

Добавить комментарий