PrepBro
← Назад к вопросам

Для чего нужен Package.json?

1.0 Junior🔥 301 комментариев
#JavaScript Core#Инструменты и DevOps

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI26 мар. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Для чего нужен Package.json

Package.json — это метаданные и конфигурация Node.js проекта. Это один из самых важных файлов в JavaScript/TypeScript экосистеме. Без него npm/yarn не может управлять зависимостями и скриптами проекта.

Основное назначение

Package.json описывает:

  1. Информацию о проекте (имя, версия, описание)
  2. Зависимости (dependencies и devDependencies)
  3. Scripts — команды для запуска проекта
  4. Конфигурацию инструментов (engines, browserslist, etc)
  5. Метаданные для публикации в npm (если это библиотека)

Структура package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "A React application",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vitest",
    "lint": "eslint src/"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "vite": "^4.0.0",
    "eslint": "^8.0.0"
  },
  "engines": {
    "node": ">=18.0.0"
  },
  "keywords": ["react", "app"],
  "author": "John Doe",
  "license": "MIT"
}

Основные разделы

1. Метаданные проекта

{
  "name": "my-app",           // Уникальное имя проекта
  "version": "1.0.0",         // Версия (семантическое версионирование)
  "description": "Description",
  "author": "John Doe",
  "license": "MIT",
  "homepage": "https://example.com",
  "repository": {
    "type": "git",
    "url": "https://github.com/user/repo"
  }
}

2. Scripts — команды для разработки

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest --watch",
    "test:ci": "jest --coverage",
    "lint": "eslint . --fix",
    "type-check": "tsc --noEmit"
  }
}

Как использовать:

npm run dev      # Запускает dev сервер
npm run build    # Собирает проект
npm run test     # Запускает тесты
npm run lint     # Линтит код

Специальные скрипты (автоматические):

{
  "pretest": "npm run lint",  // Выполняется ДО npm test
  "posttest": "npm run coverage", // Выполняется ПОСЛЕ npm test
  "prepublish": "npm run build"   // Выполняется перед публикацией
}

3. Dependencies vs DevDependencies

{
  "dependencies": {
    "react": "^18.0.0",          // Нужно для production
    "axios": "^1.0.0",
    "lodash": "^4.17.0"
  },
  "devDependencies": {
    "typescript": "^5.0.0",      // Только для разработки
    "@types/react": "^18.0.0",
    "jest": "^29.0.0",
    "eslint": "^8.0.0",
    "prettier": "^3.0.0"
  }
}

Разница:

  • dependencies — библиотеки, которые нужны для работы приложения (bundle в production)
  • devDependencies — инструменты разработки (не попадают в production bundle)

Установка:

npm install axios              # Добавляет в dependencies
npm install --save-dev jest    # Добавляет в devDependencies
npm install -D typescript      # Короткая форма --save-dev

4. Версионирование пакетов

{
  "dependencies": {
    "react": "18.0.0",         // Точная версия
    "axios": "^1.4.0",         // Минор и патч (1.x.x, совместимо)
    "lodash": "~4.17.0",       // Только патч (4.17.x)
    "vue": "*",                // Любая версия
    "angular": ">=14.0.0",     // 14.0.0 и выше
    "svelte": ">=3.0.0 <5.0.0" // Диапазон версий
  }
}

Semver (семантическое версионирование): MAJOR.MINOR.PATCH

  • ^1.4.0 — можно 1.4.0, 1.5.0, но не 2.0.0 (^major)
  • ~1.4.0 — можно 1.4.0, 1.4.1, но не 1.5.0 (~minor)
  • 1.4.0 — ровно 1.4.0

5. Конфигурация инструментов

{
  "engines": {
    "node": ">=18.0.0",        // Требуемая версия Node.js
    "npm": ">=9.0.0"
  },
  "browserslist": [           // Для babel/postcss
    "> 1%",
    "last 2 versions"
  ],
  "packageManager": "npm@9",  // Рекомендуемый пакет-менеджер
  "private": true,            // Не публиковать на npm
  "sideEffects": false        // Для tree-shaking в webpack
}

6. Keywords и поиск

{
  "keywords": [
    "react",
    "component",
    "ui-library"
  ]
}

Используются для поиска на npm.js когда публикуешь пакет.

7. Точка входа

{
  "main": "dist/index.js",      // Для CommonJS
  "module": "dist/index.esm.js", // Для ES modules
  "types": "dist/index.d.ts",   // TypeScript типы
  "exports": {
    ".": {
      "import": "./dist/index.esm.js",
      "require": "./dist/index.js"
    }
  }
}

Практический пример: React приложение

{
  "name": "my-react-app",
  "version": "1.0.0",
  "description": "A React application with TypeScript",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vitest run",
    "test:watch": "vitest",
    "lint": "eslint src --ext ts,tsx",
    "type-check": "tsc --noEmit"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "typescript": "^5.0.0",
    "vite": "^4.0.0",
    "vitest": "^0.34.0",
    "eslint": "^8.0.0",
    "prettier": "^3.0.0"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

Что происходит при npm install

$ npm install
  1. Читает package.json — список зависимостей
  2. Скачивает пакеты с npm registry (https://registry.npmjs.org)
  3. Создаёт node_modules/ — папка со всеми пакетами
  4. Генерирует package-lock.json — точные версии установленных пакетов
  5. Устанавливает скрипты — в node_modules/.bin/

Зачем нужен package-lock.json

{
  "dependencies": {
    "react": "^18.0.0"  // Может быть 18.0.0, 18.1.0, 18.2.0
  }
}

package-lock.json гарантирует:

  • Одинаковые версии у всех разработчиков
  • Воспроизводимое состояние (reproducible builds)
  • Безопасность (защита от неожиданных обновлений)

Вывод: Package.json — это контракт между разработчиком и npm. Это точка синхронизации для зависимостей, скриптов и конфигурации проекта. Без него современная JavaScript разработка невозможна.

Для чего нужен Package.json? | PrepBro