Как установить зависимости npm из package json

Как установить зависимости npm из package json

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

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

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

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

Если в дальнейшем нам больше не потребуется express, то мы его можем удалить следующей командой:

Файл package.json

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавление множества пакетов

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

Например, изменим файл package.json следующим образом:

Здесь добавлены определения двух пакетов, которые представляют библиотеку React.

Затем для загрузки всех пакетов выполнить команду

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

devDependencies

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

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

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

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

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

При этом не важно, где располагается информация о пакете — в секции dependencies или devDependencies, пакет удаляется из любой из этих секций.

Если нам надо удалить не один пакет, а несколько, то мы можем удалить их определение из файла package.json и ввести команду npm install , и удаленые из package.js пакеты также будут удалены из папки node_modules.

Например, изменим файл package.json следующим образом:

Здесь больше нет определения никаких пакетов. И введем команду

Причем мы также можем одновременно некоторые пакеты добавлять в package.json, а некоторые, наоборот, удалять. И при выполнении команды npm install пакетный менеджер новые пакеты установит, а удаленные из package.json пакеты удалит.

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

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

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

Команды npm

NPM позволяет определять в файле package.json команды, которые выполняют определенные действия. Например, определим следующий файл app.js :

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

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

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

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

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

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

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

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

Менеджер зависимостей NPM

Дмитрий Фитискин Нетология

Дмитрий Фитискин

руководитель направления «Программирование»

Пример использования сторонних библиотек

Задача

Получить курс валют и вывести в консоль курс Евро и Доллара США.

Простое решение

Решение с использованием модуля request

Но модуля request нет в ядре Node.js. Это сторонний модуль. Как нам его получить?

Установка request

Шаг 1: выполним команду в консоли:

Шаг 2: наше приложение готово к запуску:

Как мне кажется, польза и мощь пакетов очевидна.

Менеджер пакетов NPM

Система управления пакетами — набор программного обеспечения, позволяющего управлять процессом установки, удаления, настройки и обновления различных компонентов программного обеспечения. Системы управления пакетами активно используются в различных дистрибутивах операционной системы Linux и других UNIX-подобных операционных системах.

Зачем нужен менеджер пакетов?

• Позволяет использовать в вашем проекте различные библиотеки и плагины (зависимости)
• Позволяет легко устанавливать, обновлять, удалять зависимости
• Позволяет легко понять, какие зависимости используются в вашем проекте
• Позволяют автоматизировать рутинные задачи

Что умеет NPM?

• Поиск пакетов
• Просмотр информации о пакете
• Установка пакетов
• Удаление установленных пакетов
• Создание и публикация нового пакета

Команды NPM

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

Также можно искать пакеты на npmjs.com

Просмотр информации о пакете

Команда show . Показывает информацию в JSON формате:

Установка пакетов

Есть несколько вариантов установки:

• Простая установка пакета
• Глобальная установка пакета в систему
• Установка пакета в качестве зависимости для вашего приложения

Простая установка пакета

Команда install или сокращенный вариант i

После этого в текущей директории появится новая директория node_modules , а в ней директория nodemon .

При установке пакетов в директории node_modules могут появляться не только директории установленных вами пакетов, но и их зависимостей. В случае nodemon в node_modules появится также директория chokidar , minimatch , undefsafe и другие.

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

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

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

Установка пакета в качестве зависимости

Установка с флагом —save или -S :

Для установки пакетов, которые необходимы только при разработке проекта, и не актуальны при использовании, можно подключить как зависимость для разработки с флагом —save-dev или -D :

Установка всех зависимостей

Команда install без дополнительных параметров устанавливает все зависимости:

Зависимости прописываются в файле package.json , который мы изучим далее.

Обновление ранее установленных зависимостей

Команда update позволяет установить более новые версии тех пакетов, которые прописаны как зависимости.

Обновление происходит с учетом ограничения по версиям, заданным в package.json .

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

Команда uninstall удаляет ранее установленный пакет:

Для того, чтобы удалить пакет и из зависимостей тоже, используйте ключи —save или —save-dev :

Описание проекта в package.json

Ошибка при установке пакета в качестве зависимости

Что такое package.json и для чего он нужен?

package.json

Если коротко, то package.json — это JSON-файл с «аннотацией» вашего проекта (название, версия, зависимости и многое другое). Его можно создать вручную или же воспользоваться командой:

Название проекта name

Уникальное имя вашего проекта, записанное в нижнем регистре. Это свойство — обязательное.

Это же свойство задаёт имя проекта в публичном каталоге, когда проект будет опубликован.

Версия проекта version

Записывается в формате MAJOR.MINOR.PATCH, части которого увеличиваются, когда в проекте появились изменения:

• MAJOR — не имеющие обратной совместимости с предыдущими версиями.
• MINOR — изменения с обратной совместимостью или новые функции.
• PATCH — обратно-совместимые исправления ошибок.

Основной файл проекта main

То, что вы обычно запускаете node server/app.js . Основная точка входа:

Подключив пакет require(‘my-cool-package’) , мы получим именно этот файл. Рекомендуется не делать побочных действий (например, запуск веб-сервера). Также, если в папке проекта запускать node . , то запустится именно этот файл.

Автор проекта author

Ваше имя и контактные данные:

NPM скрипты

Что такое npm-скрипт

Одним из параметров в файле package.json является параметр scripts . Этот параметр описывает команды, которые доступны при использовании вашего пакета.

Частью ядра NPM является команда npm run-script (или npm run ). Эта команда позволяет вызвать команды из scripts , прописанные в файле package.json .

Получаем список скриптов

Команда run без параметров выведет все доступные скрипты, описанные в package.json

Запускаем скрипт

Указав после команды run название скрипта из package.json :

Создадим свой скрипт

Добавим в файл package.json следующий фрагмент:

И вызовем наш новый скрипт hw :

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

• Некоторые пакеты предоставляют консольные утилиты для использования (например, nodemon ).
• Чтобы использовать эти утилиты в командной строке, необходимо установить эти пакеты глобально (с флагом -g ).
• Если же вы планируете их использовать как npm-скрипты, то глобальная установка не требуется.

Вызов npm скрипта из другого скрипта

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

Добро пожаловать в ад…зависимостей JavaScript

Начало любого JavaScript проекта сопровождается амбициозным намерением— использовать как можно меньше npm пакетов в процессе разработки. Но сколько бы усилий мы не предпринимали, рано или поздно пакеты начинают накапливаться. Со временем строк в package.json становится всё больше, а благодаря package-lock.json пул реквесты приобретают все более устрашающий вид со всеми своими дополнениями или удалениями в процессе добавления зависимостей.

“И нормально”, — скажет лидер команды разработчиков, а все остальные только кивнут в ответ. А что еще остается делать в такой ситуации? Ведь у нас есть счастливая возможность наблюдать, как оживает и процветает экосистема JavaScript. Нам не нужно каждый раз изобретать колесо и ломать голову над вопросами, которые уже давно решены сообществом открытого ПО.

Хорошая новость: вышла первая версия AppSignal для Node.js. Это приложение предполагает интеграцию с Express и включает интерфейс для автоматических модулей Node.js.

Предположим, вы захотели создать блог и выбрали для этого Gatsby.js. Попробуйте установить и сохранить его в число ваших зависимостей. Поздравляю! Вместе с этим фреймворком вы только что получили 19000 дополнительных зависимостей. Как вам такой подарок? До какой же степени может разрастаться дерево зависимостей JavaScript? Как же мы оказываемся в аду зависимостей? Давайте копнем поглубже и выясним.

Что же такое пакет JavaScript?

npm, менеджер пакетов, входящий в состав Node.js, содержит самый полный реестр пакетов JavaScript в мире! Он больше, чем RubyGems, PyPi и Maven вместе взятые! Данные приведены согласно исследованиям веб-сайта Module Counts, который отслеживает количество пакетов самых популярных реестров.

“Ничего себе сколько кода”, — подумали вы. Так и есть. Чтобы фрагмент вашего кода стал npm пакетом, в проекте нужно использовать package.json . Именно так код становится пакетом, который вы можете отправить в npm реестр.

Что такое package.json?

Согласно определению package.json:

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

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

Пока звучит немного хаотично. Представьте себе бесконечную череду пакетов, зависящих друг от друга. Вот почему при установке одного пакета Gatsby вы получили 19 тысяч дополнительных зависимостей.

Типы зависимостей в package.json

Чтобы прояснить вопрос накопления зависимостей с течением времени, рассмотрим разные типы зависимостей проекта. В пакете package.json встречаются несколько из них:

• dependencies — основные зависимости, которые вы можете использовать и вызывать в коде проекта.
• devDependencies — зависимости разработки, например библиотека Prettier для форматирования кода.
• peerDependencies — равноправные зависимости, при включении которых в package.json, вы сообщаете человеку, устанавливающему ваш пакет, что ему нужна та же зависимость с указанной версией.
• optionalDependencies — это необязательные зависимости. Если во время установки с ними возникнут какие-то проблемы, то это не повлияет на удачное завершение всего установочного процесса.
• bundledDependencies — это массив пакетов, которые объединяются с вашим пакетом. Они пригодятся, если вы захотите использовать стороннюю библиотеку, не входящую в npm, или включить некоторые проекты в качестве модулей.

Назначение package-lock.json

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

Рассмотрим проект, имеющий среди своих зависимостей React. Если вы перейдете в package-lock.json , то увидите:

package-lock.json является длинным списком зависимостей в проекте. Он указывает их версию, положение модуля (URI), хэш, отображающий взаимодействие модулей и необходимых для них пакетов. Продолжив чтение списка, вы найдете каждую запись для каждого пакета, необходимого для React и т.д. Вот тут-то и находится настоящий ад зависимостей. Он определяет все, что нужно проекту.

Разбираемся с зависимостями Gatsby.js

Итак, как же нам выйти из ситуации, в которой при установке одной зависимости мы получили в нагрузку 19 000? Ответ — зависимости зависимостей. Вот что происходит при установке Gatsby.js:

В package.json можно увидеть только одну зависимость. Но присмотревшись к package-lock.json, нельзя не заметить новорожденного монстра, раскинувшего свои 14 тысяч строк. Более детальную информацию можно получить в package.json, расположенном в GitHub репозитории Gatbsy.js. По подсчетам npm число прямых зависимостей составляет 136. А теперь представьте, что каждая из этих зависимостей имеет еще одну зависимость, и в итоге вы получаете 272 зависимости. И это я еще преуменьшил! В действительности у каждой зависимости может быть больше одной зависимости, так что их список продолжит пополняться.

Например, посмотрим, сколько библиотек требует lodash .

К счастью, большинство из них используют одну и ту же версию lodash , которая требует установки лишь одной библиотеки lodash в node_modules . Но в реальных проектах продакшена ситуация не такая оптимистичная: иногда разные пакеты требуют разных версий других пакетов. В связи с этим как только не шутили по поводу тяжелого веса директории node_modules ! В нашем же случае не все так плохо:

200 мегабайт, как я уже говорил, совсем неплохой результат. Бывали случаи, когда размер директории мог легко перевалить за 700 мегабайт. Если вам интересно, какие модули занимают большую часть памяти, можете выполнить следующую команду:

Ага, rxjs, ну и хитрая же ты штучка. Есть одна простая команда, которая поможет вам с размером node_modules и уменьшением дублирования зависимостей — npm dedup :

Действие дедупликации призвано упростить структуру дерева зависимостей путем поиска общих пакетов между ними и их перемещением для последующего переиспользования. Как раз то, что происходит в нашем примере с lodash . Большинство пакетов останавливаются на [email protected] , поэтому нет других версий lodash для установки. Мы добились этого результата в самом начале, так как только что установили наши зависимости, но если вы в течение какого-то времени добавляли зависимости в package.json , то лучше выполнить npm dedup . В случае использования yarn можете запустить yarn dedupe , хотя в этом нет необходимости, так как этот процесс уже запускается при yarn install .

Визуализация зависимостей

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

npm.anvaka.com

На изображении можно увидеть взаимодействие пакетов друг с другом, и в целом оно напоминает гигантскую паутину. Такое большое количество зависимостей Gatsby.js почти обрушило мой браузер. Здесь вы увидите, как взаимодействуют зависимости Gatsby.js. Там же можно увидеть их в 3D режиме.

npm.broofa.com

Данный способ изображения зависимостей напоминает блок-схему. В случае с Gatsby.js он быстро оказался довольно замысловатым, но если любопытно, то смотрите здесь. На npms.io можно поставить оценку каждой зависимости по нескольким критериям, и, согласно полученным результатам, они будут выделены разными цветами. Вы можете также загрузить туда свой package.json и получить его визуальное отображение.

Package Phobia

Это превосходный инструмент для предварительной проверки размера пакета перед запуском npm install . Он показывает размер публикации в реестре npm и размер на диске после его установки в проекте.

Чем больше сила, тем больше ответственность

Подводя итоги, без преувеличения скажу, что JavaScript и npm просто супер, а возможность гибкого подхода при выборе из океана зависимостей — еще лучше. Сущий пустяк — выполнить npm install для сохранения пары строк кода, но иногда мы почему-то забываем, что скрывается за этим действием.

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