Браузерные приложения: dependencies vs devDependencies

Как правильно устанавливать зависимости — как dependencies или devDependencies? Ответ зависит от типа вашего приложения.

Разработка браузерных приложений

При создании простого браузерного приложения, например, приложения-часов, способ добавления пакетов не имеет принципиального значения. Эти пакеты используются только для сборки конечного приложения. В примере с часами часть пакета moment.js была вручную скопирована в файл index.js, после чего приложение запущено в браузере.

Распространённое заблуждение: фреймворки, такие как jQuery или React (фронтенд-пакеты), должны добавляться как dependencies, а инструменты тестирования (например, Mocha) или Babel — как devDependencies. Это неверно. Браузер не различает devDependencies и dependencies; он использует только предоставленные JavaScript-файлы. Если используется функциональность jQuery или React, её необходимо включить в JavaScript-файлы приложения.

Таким образом, все пакеты, используемые в приложении, можно добавить как devDependencies с последующим созданием финальной сборки (бандла). Подробнее о бандлинге будет рассказано в разделах, посвящённых Webpack. Сейчас важно понять: не нужно смешивать dependencies и devDependencies. Для standalone-приложения это некритично, но важно при создании публичных пакетов.

Разработка публичных пакетов

Ситуация меняется при создании публичного пакета, от которого зависят другие пакеты. Например, пакет browserslist зависит от caniuse-lite. browserslist использует функции из caniuse-lite в своём коде, поэтому caniuse-lite указан как dependency в browserslist. Если ваш пакет зависит от browserslist, то caniuse-lite также будет установлен; в противном случае приложение работать не будет.

Большинство пакетов используются только во время разработки других пакетов или приложений. Поэтому внешние пакеты обычно имеют длинный список devDependencies и короткий список dependencies. Использование внешнего пакета с зависимостями не обязательно означает, что эти зависимости необходимы вашему браузерному приложению. В примере с приложением-часами пакет moment.js имеет длинный список devDependencies, которые не используются в финальной сборке. Если бы какие-либо пакеты были необходимы для финального кода, они были бы добавлены как dependencies.

Резюме

  • Standalone браузерное приложение: Добавьте все пакеты как devDependencies. В принципе, можно использовать и dependencies, но следует выбрать один способ и придерживаться его.
  • Публичный пакет: Если пакет использует функции из внешних пакетов в скомпилированном коде, добавьте эти внешние пакеты как dependencies. Все остальные пакеты добавьте как devDependencies.

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

Что будем искать? Например,программа