Что такое package json
Добро пожаловать в ад…зависимостей 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, который отслеживает количество пакетов самых популярных реестров.
Что такое package.json?
Согласно определению package.json:
Пока звучит немного хаотично. Представьте себе бесконечную череду пакетов, зависящих друг от друга. Вот почему при установке одного пакета Gatsby вы получили 19 тысяч дополнительных зависимостей.
Типы зависимостей в package.json
Чтобы прояснить вопрос накопления зависимостей с течением времени, рассмотрим разные типы зависимостей проекта. В пакете package.json встречаются несколько из них:
Назначение package-lock.json
Всем известен тот самый файл, который получает много дополнений и удалений в пул реквестах, и это принимается как должное. package-lock.json автоматически создается каждый раз при изменении файла package.json или директории node_modules. Он сохраняет в неизменном виде дерево зависимостей, созданное при установке, чтобы все последующие зависимости могли создавать идентичное дерево. Это решает проблему, при которой у меня одна зависимость, а у вас другая.
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 зависимости. И это я еще преуменьшил! В действительности у каждой зависимости может быть больше одной зависимости, так что их список продолжит пополняться.
200 мегабайт, как я уже говорил, совсем неплохой результат. Бывали случаи, когда размер директории мог легко перевалить за 700 мегабайт. Если вам интересно, какие модули занимают большую часть памяти, можете выполнить следующую команду:
Ага, rxjs, ну и хитрая же ты штучка. Есть одна простая команда, которая поможет вам с размером node_modules и уменьшением дублирования зависимостей — npm dedup :
Визуализация зависимостей
Если вам интересно, как выглядят зависимости вашего проекта, можете воспользоваться парочкой инструментов. В моем арсенале есть несколько таких, которые показывают зависимости совсем иначе.
npm.anvaka.com
На изображении можно увидеть взаимодействие пакетов друг с другом, и в целом оно напоминает гигантскую паутину. Такое большое количество зависимостей Gatsby.js почти обрушило мой браузер. Здесь вы увидите, как взаимодействуют зависимости Gatsby.js. Там же можно увидеть их в 3D режиме.
npm.broofa.com
Данный способ изображения зависимостей напоминает блок-схему. В случае с Gatsby.js он быстро оказался довольно замысловатым, но если любопытно, то смотрите здесь. На npms.io можно поставить оценку каждой зависимости по нескольким критериям, и, согласно полученным результатам, они будут выделены разными цветами. Вы можете также загрузить туда свой package.json и получить его визуальное отображение.
Package Phobia
Чем больше сила, тем больше ответственность
Подводя итоги, без преувеличения скажу, что JavaScript и npm просто супер, а возможность гибкого подхода при выборе из океана зависимостей — еще лучше. Сущий пустяк — выполнить npm install для сохранения пары строк кода, но иногда мы почему-то забываем, что скрывается за этим действием.
Теперь, прочитав всю статью, вы сможете лучше разбираться в дереве зависимостей JavaScript. Устанавливаете ли вы слишком большую библиотеку или просто выясняете насколько сложные зависимости у проекта, моя статья станет вашим руководством по анализу зависимостей разной степени сложности.
npm для простых смертных
Эта статья предназначена для тех, кто не очень дружит с Node.js, но хочет использовать приложения вроде Grunt, Gulp и тому подобные. Процесс работы с этими приложениями подразумевает редактирование файла package.json и использование команд npm, так что понимание принципов работы npm поможет вам справиться с трудностями.
Node.js за 5 минут
Понимание того, что такое Node.js поможет вам лучше разобраться с npm. В двух словах — Node.js это интерпретатор языка JavaScript. Сам по себе Node.js является приложением, которое получает на входе и выполняет его.
Давайте создадим простую программу. Создайте файл helloworld.js и поместите в него следующий код:
Программа просто выведет строку «Hello World» в терминал.
Пакеты в Node.js
Файл package.json
Файл package.json содержит в себе информацию о вашем приложении: название, версия, зависимости и тому подобное. Любая директория, в которой есть этот файл, интерпретируется как Node., даже если вы не собираетесь публиковать его.
Способ использования файла package.json зависит от того, собираетесь ли вы скачивать пакет или публиковать его.
Скачивание пакетов
Если вы хотите скачать пакет вручную, вам необязательно использовать для этого package.json. Вы можете выполнить в терминале команду npm с названием нужного пакета в качестве аргумента команды, и пакет будет автоматически скачан в текущую директорию. Например:
Также для скачивания пакетов вы можете использовать package.json. Создайте в директории вашего проекта файл package.json, и добавьте в него следующий код (мы не указываем название нашего пакета и версию, мы не собираемся его публиковать; мы указываем название и версию пакетов для загрузки):
Публикация пакета
Чтобы опубликовать пакет, вам потребуется собрать все исходные коды и файл package.json в одной директории. В package.json должны быть указаны название, версия и зависимости пакета. Например:
Использование пакета в качестве исполняемого файла
Теперь вы знаете, что такое пакет и как он может зависеть от других пакетов. Также вы узнали, как npm работает с пакетами. Давайте перейдём от теории к практике и установим Grunt.
Установка Grunt с помощью npm
Руководство по package.json
Если вы работаете с JavaScript или когда-либо взаимодействовали с проектом JavaScript, Node.js или внешним интерфейсом, вы наверняка встречали package.json файл.
Что то, что для? Что вы должны знать об этом и какие интересные вещи вы можете с ним сделать?
В package.json файл является своего рода манифестом для вашего проекта. Он может делать многое, совершенно не связанное с этим. Например, это центральный репозиторий конфигурации для инструментов. Это также где npm и yarn сохранить имена и версии установленного пакета.
Файловая структура
Вот пример файла package.json:
Если вы создаете пакет Node.js, который хотите распространять по npm все кардинально меняется, и у вас должен быть набор свойств, которые помогут другим людям его использовать. Позже мы увидим об этом больше.
Это еще один package.json:
Он определяет name свойство, которое сообщает имя приложения или пакета, который содержится в той же папке, где находится этот файл.
Вот гораздо более сложный пример, который я извлек из образца приложения Vue.js:
Существуютлотыо том, что здесь происходит:
Все эти свойства используются либо npm или другие инструменты, которые мы можем использовать.
Разбивка свойств
В этом разделе подробно описаны свойства, которые вы можете использовать. Я имею в виду «пакет», но то же самое относится и к локальным приложениям, которые вы не используете в качестве пакетов.
Большинство этих свойств используются только наhttps://www.npmjs.com/, другие сценарии, которые взаимодействуют с вашим кодом, например npm или другие.
Устанавливает имя пакета.
Если вы опубликовали этот пакет публично на GitHub, хорошим значением для этого свойства будет имя репозитория GitHub.
author
Перечисляет имя автора пакета
Также может использоваться с этим форматом:
contributors
Помимо автора, у проекта может быть один или несколько участников. Это свойство представляет собой массив, в котором они перечислены.
Также может использоваться с этим форматом:
Ссылки на средство отслеживания проблем с пакетами, скорее всего, на страницу проблем с GitHub.
homepage
Устанавливает домашнюю страницу пакета
version
Указывает текущую версию пакета.
В этих числах есть смысл: выпуск, который только исправляет ошибки, является выпуском с исправлениями, выпуск, который вводит обратно совместимые изменения, является второстепенным выпуском, основной выпуск может иметь критические изменения.
license
Указывает лицензию пакета.
keywords
Это свойство содержит массив ключевых слов, связанных с тем, что делает ваш пакет.
Это помогает людям найти ваш пакет при навигации по похожим пакетам или при просмотреhttps://www.npmjs.com/интернет сайт.
description
Это свойство содержит краткое описание пакета
Это особенно полезно, если вы решили опубликовать свой пакет в npm чтобы люди могли узнать, о чем этот пакет.
repository
Это свойство указывает, где находится этот репозиторий пакетов.
Обратите внимание на github префикс. Есть и другие популярные сервисы:
Вы можете явно установить систему контроля версий:
Вы можете использовать разные системы контроля версий:
Устанавливает точку входа для пакета.
Когда вы импортируете этот пакет в приложение, именно здесь приложение будет искать экспорт модуля.
private
если установлено на true предотвращает случайную публикацию приложения / пакета на npm
scripts
Определяет набор скриптов узла, которые вы можете запустить
Вы можете использовать любое имя для команды, а скрипты могут делать буквально все, что захотите.
dependencies
Устанавливает список npm пакеты устанавливаются как зависимости.
Когда вы устанавливаете пакет с помощью npm или yarn:
этот пакет автоматически добавляется в этот список.
devDependencies
Устанавливает список npm пакеты, установленные как зависимости разработки.
Они отличаются от dependencies потому что они предназначены для установки только на машине разработки, а не для запуска кода в производственной среде.
Когда вы устанавливаете пакет с помощью npm или yarn:
этот пакет автоматически добавляется в этот список.
engines
Устанавливает, с какими версиями Node.js и других команд работает этот пакет / приложение.
browserslist
Используется, чтобы указать, какие браузеры (и их версии) вы хотите поддерживать. На него ссылаются Babel, Autoprefixer и другие инструменты, чтобы добавить только полифилы и резервные варианты, необходимые для браузеров, на которые вы нацеливаетесь.
Эта конфигурация означает, что вы хотите поддерживать последние 2 основные версии всех браузеров с использованием не менее 1% (изCanIUse.comstats), кроме IE8 и ниже.
Свойства, зависящие от команды
В package.json файл также может содержать конфигурацию для конкретной команды, например для Babel, ESLint и других.
Версии пакета
В приведенном выше описании вы видели такие номера версий:
Этот символ указывает, какие обновления принимает ваш пакет, исходя из этой зависимости.
Есть и другие правила:
Использование модулей Node.js с npm и package.json
Published on April 13, 2020
Автор выбрал фонд Open Internet/Free Speech для получения пожертвования в рамках программы Write for DOnations.
Введение
Благодаря таким функциям, как оперативное выполнение ввода/вывода и его широко известному синтаксису JavaScript, Node.js быстро стал популярной рабочей средой для разработки веб-приложений на стороне сервера. Но по мере роста интереса создаются более крупные приложения, а управление сложностью базы кода и ее зависимостей становится сложнее. Node.js организует эти сложные процессы с помощью модулей, которые являются любым отдельным файлом JavaScript, содержащим функции или объекты, используемые другими программами или модулями. Группа из одного или нескольких модулей часто называется пакетом, а эти пакеты организованы менеджерами пакетов.
При создании более сложных проектов Node.js управление своими метаданными и зависимостями при помощи файла package.json позволит обеспечить более предсказуемые сборки, поскольку все внешние зависимости одинаковы. Файл будет автоматически отслеживать эту информацию. Хотя вы можете изменять файл напрямую для обновления метаданных вашего проекта, вам будет редко требоваться взаимодействовать с ним напрямую для управления модулями.
Предварительные требования
Для данного обучающего руководства вам потребуется следующее:
Шаг 1 — Создание файла package.json
Начнем это обучающее руководство с проекта в качестве примера — гипотетический модуль локатора Node.js, получающий IP-адрес пользователя и возвращающий страну происхождения. Вы не будете кодировать модуль в этом обучающем руководстве. Однако пакеты, которыми вы управляете, будут актуальны, если вы их разрабатывали.
Использование команды init
Вначале настройте проект, чтобы можно было попрактиковаться в управлении модулями. В своей оболочке создайте новую папку под названием locator :
Затем перейдите в новую папку:
Теперь инициализируйте интерактивную командную строку, введя следующее:
Результат будет выглядеть следующим образом:
Затем команда init запросит репозиторий GitHub проекта. Вы не будете использовать его в данном примере, поэтому оставьте и его пустым.
Шаг 2 — Установка модулей
Обычно в разработке программного обеспечения используются внешние библиотеки для выполнения вспомогательных задач в проектах. Это позволяет разработчику сосредотачивать внимание на бизнес-логике и создавать приложения более быстро и эффективно.
Рассмотрим это на примере. В вашем приложении локатора вы будете использовать библиотеку axios, которая поможет вам выполнять запросы HTTP. Установите ее, введя следующее в оболочке:
После установки библиотеки вы увидите примерно следующее:
Теперь откройте файл package.json в текстовом редакторе по вашему выбору. В этом обучающем руководстве мы будем использовать nano :
Вы увидите новое свойство, как подчеркнуто ниже:
в начале номера версии, это означает, что только более высокие номера версий PATCH удовлетворяют это ограничение.
После завершения просмотра package.json выйдите из файла.
Зависимости разработки
Пакеты, используемые для разработки проекта, но не для его создания или запуска, называются зависимостями разработки. Они не требуются для вашего модуля или приложения в производственной среде, но могут оказаться полезными при написании кода.
Например, разработчики часто используют инструменты статического анализа кода, чтобы обеспечить соответствие кода передовым практикам и единообразие стиля. Хотя это полезно для разработки, это только увеличивает размер дистрибутива без предоставления ощутимых выгод при развертывании в производственной среде.
Установите инструмент статического анализа кода в качестве зависимости разработки для вашего проекта. Попробуйте это в оболочке:
В результате вы получите следующий вывод:
Автоматически сгенерированные файлы: node_modules и package-lock.json
Папка node_modules содержит все установленные зависимости для вашего проекта. В большинстве случаев вы не должны назначать эту папку вашему репозиторию с контролем версии. По мере того как вы будете устанавливать больше зависимостей, размер этой папки будет быстро расти. Кроме того, файл package-lock.json хранит записи точных версий, установленных более сжато, поэтому включение node_modules не требуется.
Установка из package.json
С помощью ваших файлов package.json и package-lock.json вы можете быстро задать те же самые зависимости проекта, прежде чем начать разработку нового проекта. Чтобы продемонстрировать это, перейдите на один уровень выше в дереве директорий и создайте новую папку с именем cloned_locator на том же уровне директории, что и locator :
Перейдите в новую директорию:
Теперь скопируйте файлы package.json и package-lock.json из locator в cloned_locator :
Чтобы установить требуемые модули для этого проекта, введите следующее:
При развертывании в производственную среду вы можете пропустить зависимости разработки. Вспомните, что зависимости разработки хранятся в разделе devDependencies файла package.json и не влияют на управление вашим приложением. При установке модулей в рамках процесса непрерывной интеграции и разработки, чтобы развернуть приложение, пропустите зависимости разработки, введя следующее:
Прежде чем перейти к следующему разделу, вернитесь в папку locator :
Глобальная установка
Проверьте, что пакет успешно установлен, введя следующее:
Вы увидите примерно следующий результат:
Теперь, когда вы можете устанавливать модули, в следующем разделе вы будете практиковать методы управления своими зависимостями.
Шаг 3 — Управление модулями
Полный менеджер пакетов способен на гораздо большее, чем установка модулей. В npm имеется 20 команд, связанных с управлением зависимостями. На этом шаге вы:
Указание модулей
Если вы хотите знать, какие модули установлены в проекте, проще использовать команду list или ls вместо чтения package.json напрямую. Для этого введите следующее:
Результат должен выглядеть следующим образом:
По умолчанию ls отображает все дерево зависимостей — модули, от которых зависит ваш проект, и модули, от которых зависят ваши зависимости. Это может быть довольно неудобно, если вы хотите получить общий обзор того, что установлено.
Чтобы вывести только модули, которые вы установили, без их зависимостей, введите следующее в оболочке:
Результат будет выглядеть следующим образом:
Обновление модулей
Вывод будет выглядеть следующим образом:
Похоже, вы можете обновить eslint до последней версии. Используйте команду update или up следующим образом:
Вывод команды будет содержать установленную версию:
Если хотите обновить все модули одновременно, введите следующее:
Удаление модулей
Удаление зависимостей из проекта — обычное мероприятие в жизненном цикле разработки программного обеспечения. Зависимость может не решить проблему, как заявлено, или может не предоставить удовлетворительный опыт разработки. В этих случаях может быть лучше удалить зависимость и создать собственный модуль.
Вывод будет выглядеть следующим образом:
Здесь не указано явно, что axios был удален. Чтобы убедиться, что он был удален, еще раз укажите зависимости:
Теперь мы видим только то, что установлен eslint :
Проверка модулей
После установки устаревшей версии request вы должны увидеть примерно следующий результат:
npm указывает, что у вас есть уязвимости в ваших зависимостях. Для получения более подробных сведений проверьте весь ваш проект:
Команда audit показывает таблицы вывода, указывающие на недостатки безопасности:
Вы увидите примерно следующий результат:
npm смог безопасно обновить два пакета, тем самым устранив две уязвимости. Но у вас все еще есть четыре уязвимости в ваших зависимостях. Команда audit fix не всегда устраняет каждую проблему. Хотя версия модуля может иметь уязвимость безопасности, если вы обновите ее до версии с другим API, то это может нарушить код выше в дереве зависимостей.
Как упоминалось ранее, это не рекомендуется, если вы не уверены, что это не нарушит функциональность.
📦 Что такое npm? Гайд по Node Package Manager для начинающих
Miroslav Kungurov
Программная платформа Node.js появилась в 2009 г., и с тех пор на ней были построены сотни тысяч приложений. Одной из причин успеха стал npm – популярный пакетный менеджер, позволяющий JS-разработчикам быстро делиться пакетами.
На момент написания статьи в npm содержится 1.3 млн пакетов с общим количеством скачиваний 16 млрд.
1. Что такое npm?
npm (Node Package Manager) – дефолтный пакетный менеджер для JavaScript, работающий на Node.js. Менеджер npm состоит из двух частей:
Структуру репозитория npmjs.com можно представить, как центр исполнения заказов, который получает товары (npm-пакеты) от продавцов (авторы пакетов) и распространяет эти товары среди покупателей (пользователи пакетов).
В центре исполнения заказов ( npmjs.com ) в качестве персональных менеджеров для каждого покупателя работает армия вомбатов ( npm CLI ).
Зависимости поставляются следующим образом (Рис. 1).
npm install » data-src=»https://media.proglib.io/posts/2020/07/19/85d0ec896b3ad06d69bc27c49c317612.png» > Рис. 1. Процесс установки пакета через npm install
Процесс размещения пакета выглядит, как показано на Рис. 2.
npm publish » data-src=»https://media.proglib.io/posts/2020/07/19/5e2cd72e42190a38f0f46cf7da1d018d.png» > Рис. 2. Процесс размещения пакета через npm publish
Теперь детально рассмотрим работу вомбатов.
1.1. Файл package.json
package.json можно представить, как стикеры (список пакетов нужных версий) на npm-коробке (проект). Файл генерируется командой npm init при создании JavaScript/Node.js проекта со следующими метаданными:
1.2. Скрипты npm
В package.json включено поле scripts для автоматизации сборки, например:
1.3. dependencies и devDependencies
dependencies и devdependencies представляют собой словари с именами npm-библиотек (ключ) и их семантические версии (значение). Пример из шаблона TypeScript Action :
1.4. Файл package-lock.json
Файл package-lock.json описывает версии пакетов, используемые в JavaScript-проекте. Если package.json включает общее описание зависимостей (название товара), то package-lock.json более детальный – всё дерево зависимостей.
2. Установка пакетов
Так как пользователи чаще скачивают пакеты (16 млрд скачиваний против 13 млн публикаций), хорошо бы разобраться, как их устанавливать.
2.1. npm install
npm install – команда, устанавливающая пакеты.
По умолчанию npm install
npm сделал установку пакетов JavaScript настолько простой, что команда часто используется некорректно и в сообществе разрабов появились мемы на эту тему:
Рис. 3. Мем про node_modules
2.2. npm ci
2.3. npm audit
Пример аудита для пакета static-eval
Если исправления доступны в следующих версиях пакета, npm audit fix автоматически обновит версии затронутых зависимостей.
3. Размещение пакетов
Перейдем от потребления пакетов к их размещению.
3.1. npm publish
Еще более важно следовать вышеуказанным правилам при публикации собственных пакетов, чтобы гарантировать, что вы не нарушаете чью-либо совместимость, так как по умолчанию в npm берется версия ^ (следующая младшая версия).
Заключение
В этой публикации мы познакомились со структурой npm и узнали:
Если самостоятельная работа с npm-пакетами вызывает трудности, и вам требуется помощь наставника, мы советуем обратить внимание на курс факультета Веб-разработки GeekBrains, где вы получите готовую базу навыков и необходимую поддержку. Вы не только освоите работу с Node.js, но и научитесь целиком разрабатывать безопасные веб-приложения.
Курс поможет освоить профессию веб-разработчика, получить диплом и создать портфолио с рабочими проектами. В случае успешного прохождения команда университета поможет с трудоустройством. Ознакомиться с программой и отзывами можно, нажав расположенную ниже кнопку.