Зарегистрируйтесь для доступа к 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, и посмотрите новый размер и содержимое.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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