npx — запуск пакетов без установки

Зачем нужно

npx позволяет запускать CLI-инструменты из npm без глобальной установки. Вместо npm install -g create-react-app && create-react-app my-app -- одна команда: npx create-react-app my-app. npx скачивает пакет, выполняет его и удаляет. Так вы всегда используете последнюю версию и не засоряете систему глобальными пакетами.

Где используется

  • Scaffolding проектов: npx create-react-app, npx create-next-app, npx degit
  • Одноразовые утилиты: npx http-server, npx json-server, npx serve
  • Запуск локально установленных CLI: npx jest, npx eslint, npx tsc
  • Проверка совместимости кода: npx -p node@18 node app.js
  • Быстрые инструменты: npx cowsay "hello", npx license

Предпосылки

Как работает npx

npx <package-name> [args]

1. Ищет пакет в локальных node_modules/.bin/
2. Если не найден — ищет в глобальных пакетах
3. Если не найден — скачивает из npm registry во временную папку
4. Выполняет команду
5. (Временные файлы удаляются автоматически)

# Без npx: установить глобально → запустить → засоряет систему
npm install -g create-react-app
create-react-app my-app
# ❌ Версия может устареть, занимает место

# С npx: скачать → запустить → удалить
npx create-react-app my-app
# ✅ Всегда последняя версия, ничего не остаётся

Основные сценарии

Scaffolding проектов

# React
npx create-react-app my-app
npx create-react-app my-app --template typescript

# Next.js
npx create-next-app@latest my-nextapp

# Vite
npx create-vite@latest my-vite-app

# Express generator
npx express-generator my-api

# Nest.js
npx @nestjs/cli new my-nest-app

# Astro
npx create-astro@latest

# Скопировать шаблон из GitHub (degit)
npx degit user/repo my-project
npx degit sveltejs/template my-svelte-app

Запуск утилит

# Быстрый HTTP-сервер для текущей директории
npx http-server
npx http-server -p 8080 -o     # порт 8080, открыть в браузере
npx serve                       # альтернатива

# JSON REST API из файла (для прототипирования)
npx json-server db.json() --port 3001

# Проверить размер npm-пакета
npx bundlephobia express

# Красивый вывод в терминале
npx cowsay "Hello Node.js"

# Сгенерировать .gitignore
npx gitignore node

# Сгенерировать LICENSE
npx license MIT

Запуск локальных CLI-инструментов

# Когда пакет установлен локально (devDependencies)
npm install -D jest eslint typescript

# Без npx — нужен полный путь
./node_modules/.bin/jest
./node_modules/.bin/eslint src/
./node_modules/.bin/tsc --init

# С npx — находит в node_modules/.bin автоматически
npx jest
npx eslint src/
npx tsc --init
npx prettier --write .

# Это эквивалент npm scripts:
# "scripts": { "test": "jest" }
# npm test → запускает jest из node_modules/.bin

Флаг --yes (-y)

# npx может спросить подтверждение перед скачиванием
npx create-next-app@latest
# Need to install the following packages:
#   create-next-app@15.0.0
# Ok to proceed? (y)

# --yes автоматически соглашается (для CI/CD и скриптов)
npx --yes create-next-app@latest my-app
npx -y http-server

# --no — автоматически отказывается
npx --no some-suspicious-package

Указание версии

# Запустить конкретную версию
npx create-react-app@5.0.0 my-app

# Последняя версия (тег latest)
npx create-vite@latest

# Диапазон версий
npx typescript@^5.0.0 --version

npx vs npm exec

# npm exec (npm 7+) — аналог npx, часть npm CLI
npm exec -- jest --coverage
npm exec -- eslint src/

# Главное отличие: npm exec передаёт всё после -- как аргументы
npx jest --coverage              # проще синтаксис
npm exec -- jest --coverage      # нужен --

# npm exec может запускать пакеты с другим именем бинарника
npm exec --package=@angular/cli -- ng new my-app
npx --package=@angular/cli ng new my-app     # эквивалент

# Для большинства случаев npx удобнее

Флаг --package (-p)

# Когда имя пакета отличается от имени команды
npx --package=@angular/cli ng new my-app
# Пакет: @angular/cli, команда: ng

npx -p typescript tsc --init
# Пакет: typescript, команда: tsc

# Несколько пакетов
npx -p typescript -p ts-node ts-node script.ts

Запуск с другой версией Node.js

# Запустить скрипт под другой версией Node.js
# (без nvm, для быстрой проверки)
npx -p node@18 node -e "console.log(process.version)"
# v18.19.0

npx -p node@20 node app.js

Запуск из GitHub

# Запустить пакет напрямую из GitHub gist
npx https://gist.github.com/user/abc123

# Из GitHub репозитория
npx github:user/repo

Безопасность npx

# ⚠️ npx скачивает и ВЫПОЛНЯЕТ код из интернета
# Убедитесь, что имя пакета правильное

# ❌ Опечатка может привести к выполнению вредоносного пакета
npx craete-react-app my-app    # typosquatting!
npx create-react-app my-app   # правильно

# ✅ Проверяйте имя пакета на npmjs.com перед запуском
# ✅ Используйте --yes только для известных пакетов
# ✅ Для CI/CD — фиксируйте версии: npx create-react-app@5.0.1

Практические примеры

Быстрый API-сервер для разработки

# Создать db.json()
echo '{"users": [{"id": 1, "name": "Anna"}], "posts": }' > db.json()

# Запустить REST API
npx json-server db.json() --port 3001

# Теперь доступно:
# GET    /users
# GET    /users/1
# POST   /users
# PUT    /users/1
# DELETE /users/1

Инициализация TypeScript-проекта

# Создать tsconfig.json
npx tsc --init

# Или полная инициализация
npm init -y
npm install -D typescript @types/node
npx tsc --init

Проверка кода перед коммитом

# Запустить prettier без установки
npx prettier --check src/

# Запустить eslint
npx eslint src/ --fix

Частые ошибки

  1. Опечатки в имени пакета — npx craete-react-app может запустить вредоносный пакет-двойник (typosquatting)
  2. Путают npx и npm — npm create-react-app не работает, нужен npx
  3. npx не находит локальный пакет — пакет не установлен, npm install -D jest перед npx jest
  4. Используют устаревший глобальный пакет — npx может использовать глобально установленную старую версию вместо последней. Решение: npx create-react-app@latest
  5. Забывают --yes в CI — скрипт зависает на запросе подтверждения

Практика

  1. Создать React-приложение через npx create-react-app my-app
  2. Запустить npx http-server для текущей директории
  3. Установить jest локально и запустить через npx jest
  4. Создать REST API из JSON-файла через npx json-server
  5. Инициализировать TypeScript-проект: npx tsc --init

Связанные темы

  • npm basics — установка пакетов через npm
  • package.json — npm scripts как альтернатива npx для локальных пакетов
  • Установка и nvm — глобальная установка vs npx

Ресурсы