package.json что должно быть в dependencies а что devDependencies

@Чипс · Регистрация: 21.08.2015

Студворк — интернет-сервис помощи студентам

Добрый день.
Пишу приложение при помощи React, делал package.json руками (не через creacte app)
Закидывал всё в devDependencies
Сейчас файл имеет следующий вид:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
{
  "name": "featuresliceddesign",
  "version": "1.0.0",
  "description": "base pack",
  "main": "index.tsx",
  "scripts": {
    "start": "webpack server",
    "build-dev": "webpack",
    "build-prod": "webpack --node-env=production",
    "clear": "rd /s /q dist"
  },
  "author": "Anton",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.3",
    "@babel/node": "^7.22.19",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/preset-env": "^7.23.3",
    "@babel/preset-react": "^7.23.3",
    "@babel/preset-typescript": "^7.23.3",
    "@reduxjs/toolkit": "^1.9.7",
    "@types/react": "^18.2.38",
    "@types/react-dom": "^18.2.17",
    "@types/react-redux": "^7.1.31",
    "@types/webfontloader": "^1.6.38",
    "autoprefixer": "^10.4.16",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.8.1",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.3",
    "less": "^4.2.0",
    "less-loader": "^11.1.3",
    "mini-css-extract-plugin": "^2.7.6",
    "postcss-loader": "^7.3.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-localization": "^1.0.19",
    "react-redux": "^8.1.3",
    "react-router-dom": "^6.20.0",
    "sass": "^1.69.5",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "ts-loader": "^9.5.1",
    "tsconfig-paths-webpack-plugin": "^4.1.0",
    "typescript": "^5.3.2",
    "webfontloader": "^1.6.28",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

Настало время prod сборки и если я правильно понимаю, то часть зависимостей необходимо перенести в раздел dependencies, но я не могу понять какие зависимости должны быть в devDependencies, а какие в dependencies?
Подскажите, по какому принципу мне их раскидать?
Поделитесь своими ссылками на информацию.

@DrType · 01.01.2024, 20:05

Предлагаю в dependencies перенести

JSON
1
2
3
4
5
6
7
"@reduxjs/toolkit": "^1.9.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-localization": "^1.0.19",
"react-redux": "^8.1.3",
"react-router-dom": "^6.20.0",
"webfontloader": "^1.6.28"

@mr_dramm · 02.01.2024, 09:15

Сообщение от Чипс

Настало время prod сборки и если я правильно понимаю, то часть зависимостей необходимо перенести в раздел dependencies, но я не могу понять какие зависимости должны быть в devDependencies, а какие в dependencies?

devDependencies - только те что нужны во время разработки например
- babel который будет заниматься транформацией нового js в совместимый js только на этапе сборки
- ts и и типы для него
- eslint
- и т.д.

dependencies - это то что будет в продакшн

и читай доку к пакетам в разделе инстал написано как ставить пакет --save-dev илипродакшн

Сообщение от Чипс

Пишу приложение при помощи React, делал package.json руками (не через creacte app)
Закидывал всё в devDependencies

лучше все пакеты переустановить, чтобы потом какой то баг не словить, удалить папку node_modules и файл package-lock.json,

в файле package.json оставить только

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "featuresliceddesign",
  "version": "1.0.0",
  "description": "base pack",
  "main": "index.tsx",
  "scripts": {
    "start": "webpack server",
    "build-dev": "webpack",
    "build-prod": "webpack --node-env=production",
    "clear": "rd /s /q dist"
  },
  "author": "Anton",
  "license": "ISC"
}

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

Code
1
npm i пвекты через пробел

и для разработки

Code
1
npm i -D пвекты через пробел

@Чипс · 02.01.2024, 11:24 **[ТС]**

Сообщение от DrType

Предлагаю в dependencies перенести

Спасибо, я ценю ваш совет, но вы дали мне рыбу, а мне нужно умение ловить рыбу.
Подскажите, по какому принципу вы определили эти зависимости в dependencies ?

Сообщение от mr_dramm

devDependencies - только те что нужны во время разработки например

Сообщение от mr_dramm

dependencies - это то что будет в продакшн

Да, это везде написано, но как мне мне понять, какой пакет надо засунуть в dev, а какой нет?
Вот например:
- babel - почему вы его определили в dev? Как вы поняли, что ему место в dev?
Где написано, что его надо размещать в dev?

Добавлено через 11 минут

Сообщение от mr_dramm

и читай доку к пакетам в разделе инстал написано как ставить пакет --save-dev илипродакшн

Специально все складывал в dev, так как не понимал, что надо в prod и сейчас не понимаю

В документации к пакету написано куда его ставить? (dev или нет)

@mr_dramm · 02.01.2024, 12:04

Сообщение от Чипс

Где написано, что его надо размещать в dev?

по логике =)

Если библиотека должна работать в собранном проекте или нет, т.е. используешь апи этой библиотеки в своем коде, тогда это точно должно быть в продакшн и соответственно в dependencies, это самый верный способ.

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

И кроме того читай доки по инсталу babel например

Code
1
npm install @babel/preset-env --save-dev

есть опция save dev это дев зависимость на этапе разработки в проде ее используют только если знают зачем она там.

Добавлено через 11 минут
ЗЫ
Webpack старается не включать не используемые зависимости в прод и также есть утилиты для анализа бандла, например какие то ибиблиотеки не поддерживают модульность и могут быть импортированы полность а тебе от туда нужен только небольшой кусок кода, тогда это можно будет заметить и оптимизировать разными способами

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия SDL 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual. . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

package.json что должно быть в dependencies а что devDependencies

Решение