Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Зависимости для разработки JS: Настройка окружения

У любого проекта есть как минимум два режима использования. Их обычно называют средами. Например, когда разработчик работает над проектом у себя на компьютере, то он запускает его в среде разработки. Когда же проект попадает в то место, где им пользуются, то тогда среду называют продакшеном (production).

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

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

# jest – тестовый фреймворк,
# с помощью которого пишутся автоматизированные тесты кода
npm install --save-dev jest

Процедура установки здесь практически не отличается от установки обычных пакетов. Разница только в том, что описание зависимости появится не в dependencies, а в devDependencies.

"devDependencies": {
  "jest": "^26.4.1"
}

С точки зрения использования, эти пакеты ничем не отличаются от пакетов, устанавливаемых в dependencies. Разница только в том, где их импортируют. Как правило, для тестирования кода создается отдельная директория, внутри которой находится код тестов, которые запускаются только в среде разработки. Поэтому импорты этого кода не пересекаются с импортами кода самого проекта.

Все это можно своими глазами увидеть в специальном пакете, созданным Хекслетом как пример эталонного проекта.

Флаг --production

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

# Вот теперь зависимости из devDependencies устанавливаться не будут
npm install --production

# Продакшен режим можно задать и с помощью переменной окружения
NODE_ENV=production npm install

Когда же проект собирается для деплоя на сервер (например, через Github Actions), то флаг нужно применять с npm ci:

npm ci --production

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


Самостоятельная работа

  1. Склонируйте проект nodejs-package
  2. Установите его зависимости
  3. Запустите код на выполнение bin/nodejs-package.js 10. На экран должно вывестись число
  4. Запустите тесты npm test. Они должны завершиться успехом
  5. Посмотрите какие зависимости есть в проекте, и в директориях src и __tests__ как они импортируются
  6. Изучите размер и содержимое node_modules, затем удалите её, установите зависимости с флагом --production, и посмотрите новый размер и содержимое.

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

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

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
25 мая 16 месяцев

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»