package.json scripts

Стандартный набор npm-скриптов для frontend-проекта на Vite/Webpack — dev, build, preview, lint, test, format.

Задача

Нужно стандартизировать команды разработки так, чтобы любой разработчик в команде знал: npm run dev — запуск, npm run build — сборка, npm test — тесты.

Решение

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",

    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",

    "format": "prettier --write .",
    "format:check": "prettier --check .",

    "test": "vitest run",
    "test:watch": "vitest",
    "test:coverage": "vitest run --coverage",

    "typecheck": "tsc --noEmit",

    "prepare": "husky",

    "ci": "npm run typecheck && npm run lint && npm run format:check && npm run test"
  }
}

Запуск нескольких команд последовательно (&&) или параллельно (&):

{
  "scripts": {
    "validate": "npm run typecheck && npm run lint && npm run test",
    "dev:all": "concurrently \"npm run dev\" \"npm run test:watch\""
  }
}

Для параллельного запуска нужен пакет concurrently:

npm install -D concurrently

Переменные окружения в скриптах:

{
  "scripts": {
    "build:prod": "NODE_ENV=production vite build",
    "build:staging": "VITE_API_URL=https://api.staging.com vite build"
  }
}

На Windows переменные окружения задаются через cross-env:

npm install -D cross-env

"build:prod": "cross-env NODE_ENV=production vite build"

Ключевые моменты

  • npm test и npm start — специальные псевдонимы, не требуют run; остальные — npm run <script>.
  • pre<script> и post<script> — lifecycle hooks: prebuild запускается автоматически перед build.
  • ci скрипт с полной проверкой — запускать в CI/CD перед деплоем.
  • cross-env нужен для кроссплатформенной установки env-переменных (Windows + Unix).

Варианты

  • Makefile — альтернатива для сложных сценариев с зависимостями между задачами.
  • Turborepo / Nx — для монорепо, кэширование результатов задач.

Связанные рецепты / темы