Для чего нужен devDependency в package.json?

Для чего нужен devDependency в package.json

Краткий ответ

devDependencies — это зависимости, которые нужны только для разработки и тестирования приложения, но не нужны в production. Они не будут включены в финальный bundle, что уменьшает размер приложения и скорость установки для пользователей.

Разница между dependencies и devDependencies

dependencies

{
  "dependencies": {
    "react": "^19.0.0",
    "next": "^16.0.0",
    "axios": "^1.6.0"
  }
}

Когда используется:

• При разработке
• При тестировании
• В production — приложение их использует

Примеры:

• React, Vue, Angular
• HTTP клиенты (axios, fetch)
• UI библиотеки
• Утилиты (lodash, dayjs)

devDependencies

{
  "devDependencies": {
    "typescript": "^5.0.0",
    "vitest": "^1.0.0",
    "@testing-library/react": "^14.0.0",
    "eslint": "^8.0.0",
    "prettier": "^3.0.0"
  }
}

Когда используется:

• При разработке
• При тестировании
• НЕ в production — приложение их не использует

Примеры:

• TypeScript компилятор
• Тестовые фреймворки (Jest, Vitest, Mocha)
• Линтеры (ESLint, Stylelint)
• Форматеры кода (Prettier)
• Build инструменты (Webpack, Vite)

Реальный пример: проект React + TypeScript

{
  "name": "prepbro-frontend",
  "version": "1.0.0",
  
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "^16.0.0",
    "typescript": "^5.0.0",
    "tailwindcss": "^4.0.0",
    "axios": "^1.6.0",
    "zustand": "^4.4.0"
  },
  
  "devDependencies": {
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "@types/node": "^20.0.0",
    "typescript": "^5.0.0",
    "vitest": "^1.0.0",
    "@testing-library/react": "^14.0.0",
    "@testing-library/jest-dom": "^6.0.0",
    "eslint": "^8.0.0",
    "prettier": "^3.0.0",
    "@playwright/test": "^1.40.0"
  }
}

Анализ:

dependencies (нужны в production):
✓ react, react-dom — основа приложения
✓ next — фреймворк
✓ tailwindcss — стили
✓ axios — HTTP запросы
✓ zustand — управление состоянием

devDependencies (только для разработки):
✓ @types/* — TypeScript типы
✓ vitest — тестирование
✓ @testing-library/react — тестовые утилиты
✓ eslint — проверка кода
✓ prettier — форматирование
✓ @playwright/test — E2E тестирование

Почему это важно

1. Размер приложения

Примерные размеры пакетов:
- react: 50 KB
- next: 200 KB
- typescript: 500 KB (devDep!)
- vitest: 300 KB (devDep!)
- eslint: 400 KB (devDep!)

Финальный bundle (production):
✓ С React, Next — 250 KB
✗ Без TypeScript, vitest, eslint — не добавляются в bundle

Экономия: Если TypeScript был бы в dependencies, bundle был бы на 500KB больше!

2. Скорость установки

# Разработчик устанавливает ВСЕ зависимости
npm install
# Установит и dependencies, и devDependencies
# Время: может быть 2-3 минуты

# Production сервер (Dokku, Vercel, etc)
npm install --production
# Установит ТОЛЬКО dependencies
# Время: быстрее, меньше трафика

3. Безопасность

Меньше зависимостей = меньше потенциальных уязвимостей

Если eslint (400KB) имеет баг безопасности:
- devDep: Влияет только на CI/разработчиков
- dependencies: Влияет на пользователей! КРИТИЧНО

Как правильно классифицировать зависимости

dependencies (production)

// ✅ Используется в runtime коде
import React from 'react';
import { useState } from 'react';

const Button = ({ onClick, children }) => {
  const [clicked, setClicked] = useState(false);
  return (
    <button onClick={() => {
      onClick();
      setClicked(true);
    }}>
      {children}
    </button>
  );
};

// ✅ Используется в API запросах
import axios from 'axios';

const fetchQuestions = async () => {
  const response = await axios.get('/api/v1/questions');
  return response.data;
};

devDependencies (development only)

// ✅ Используется только в тестах
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { Button } from './Button';

describe('Button', () => {
  it('renders', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });
});
// Этот импорт НЕ попадёт в production код

// ✅ Используется для типизации (удаляется при компиляции)
import type { ReactNode } from 'react';
// @types/react — это devDependency
// Во время компиляции TypeScript удаляет все type импорты

// ✅ Используется в build процессе (не в runtime)
// eslint.config.js, vitest.config.ts, next.config.js
// Эти файлы выполняются только во время build, не в production

Как добавлять зависимости

# Добавить в dependencies (production)
npm install react
npm install --save react
# Результат: "react": "^19.0.0" в dependencies

# Добавить в devDependencies (development)
npm install --save-dev typescript
npm install -D typescript
# Результат: "typescript": "^5.0.0" в devDependencies

# Удалить зависимость
npm uninstall react
npm uninstall --save-dev typescript

Типичные devDependencies в фронтенд проектах

Тестирование:
- vitest, jest, mocha
- @testing-library/react, @testing-library/dom
- @playwright/test

Типизация:
- typescript
- @types/* (для всех библиотек)

Линтинг и форматирование:
- eslint, stylelint
- prettier
- @typescript-eslint/eslint-plugin

Build инструменты:
- vite, webpack, parcel
- next (может быть в dependencies для production SSR)
- esbuild

Development сервер:
- nodemon

Документация:
- storybook
- typedoc

Quality ассurance:
- husky (git hooks)
- lint-staged
- commitlint

Пример реальной установки

# Разработчик клонирует проект
git clone https://github.com/user/prepbro.git
cd prepbro

# Устанавливает ВСЕ зависимости
npm install
# Устанавливает:
# - react, next, tailwindcss (dependencies)
# - typescript, vitest, eslint (devDependencies)

# Запускает dev сервер
npm run dev
# Использует: React, Next, Tailwind, TypeScript

# Запускает тесты
npm test
# Использует: vitest, @testing-library/react

# Проверяет код
npm run lint
# Использует: eslint, @typescript-eslint/eslint-plugin

# Production сервер (например Dokku)
npm install --production
# Устанавливает ТОЛЬКО:
# - react, next, tailwindcss
# - НЕ typescript, vitest, eslint

# Запускает production сервер
NODE_ENV=production npm start
# Использует ТОЛЬКО production зависимости

Ошибки при неправильной классификации

Ошибка 1: testing-library в dependencies

{
  "dependencies": {
    "@testing-library/react": "^14.0.0" // ❌ НЕПРАВИЛЬНО!
  }
}

Проблема:

• Тестовая библиотека попадёт в production bundle
• Увеличит размер приложения на 300KB+
• Ненужный код для пользователей

{
  "devDependencies": {
    "@testing-library/react": "^14.0.0" // ✅ ПРАВИЛЬНО
  }
}

Ошибка 2: react в devDependencies

{
  "devDependencies": {
    "react": "^19.0.0" // ❌ НЕПРАВИЛЬНО!
  }
}

Проблема:

• На production сервере будет ошибка: Cannot find module 'react'
• Приложение не запустится

{
  "dependencies": {
    "react": "^19.0.0" // ✅ ПРАВИЛЬНО
  }
}

Проверка правильности классификации

# 1. Есть ли в package.json экспортированный код?
# Если да — это production зависимость

# 2. Есть ли в import производственном коде?
grep -r "import.*from 'package-name'" src/
# Если да — dependencies

# 3. Используется только в тестах/конфиге?
# Если да — devDependencies

# 4. Проверить build output
npm run build
grep -r "package-name" dist/
# Если найдено в dist — dependencies
# Если не найдено — devDependencies

Заключение

devDependencies критичны потому что:

1. Уменьшают размер приложения — быстрее загружается
2. Ускоряют installation — меньше зависимостей на сервере
3. Повышают безопасность — меньше потенциальных уязвимостей
4. Улучшают performance — в production только нужный код

Правило:

• Если пакет используется в production коде → dependencies
• Если пакет используется только для разработки, тестирования, линтинга → devDependencies