Учебное пособие по началу работы с npx

Если вы только начинаете изучать JavaScript или Node.js, вы, вероятно, уже сталкивалисьnpmс установкой различных инструментов и библиотек. Иногда хочется просто быстро запустить инструмент и посмотреть, как он работает, не устанавливая его глобально, верно?

Есть и другая ситуация: разным проектам нужны разные версии инструментов командной строки, и глобальная установка всегда вызывает конфликты?

npxЭто мощный инструмент, созданный для решения этих проблем.

npxЭто инструмент командной строки, представленный в npm 5.2.0, который позволяет запускать пакеты npm без глобальной установки.

Проще говоря,npx — это удобный инструмент для запуска пакетов Node.js,и его основная философия дизайна:Использовать временно, без постоянной установки。

Яркая метафора

Представьте свою домашнюю коробку с инструментами:

• npm... это как вашменеджер склада инструментов. Когда выnpm install -g some-tool, это равносильно тому, что вы говорите менеджеру: купи этот инструмент и положи его навсегда в наш гараж (глобальную среду).
• npx... это какслужба выполнения поручений по требованию. Когда выnpx some-tool, это равносильно тому, что вы говорите посыльному: найди мнеsome-toolчтобы использовать, а после использования верни, не клади его в мой дом.

Использованиеnpx, вы можете запустить любой пакет из реестра npm, не устанавливая его сначала на свой компьютер.

Традиционные болевые точки	Решение npx
Нужно устанавливать глобально	Запуск напрямую
Конфликты версий	Использовать указанную версию каждый раз
Загрязнение окружения	Очистка после использования
Локальные команды трудно найти	Автоматический поиск

---

Зачем использовать npx?

1. Решение проблемы глобального загрязнения пакетами и конфликтов версий

ВnpxДо появления npx, если вы хотели использовать такие инструменты командной строки, какcreate-react-app、vue-cliинструменты для создания каркаса проекта, вам приходилось сначала устанавливать их глобально:npm install -g create-react-app。

Это порождает две проблемы:

• Загрязнение глобальной среды: установленный пакет будет занимать ваше дисковое пространство долгое время, даже если вы не использовали его некоторое время.
• Конфликты версий: если вы разрабатываете два проекта, одному требуетсяcreate-react-app@3, а другому требуетсяcreate-react-app@5, глобальная установка может хранить только одну версию, что приведёт к тому, что один из проектов не сможет нормально работать.

npxОн позволяет напрямую указать версию для запуска и не остаётся после использования, идеально избегая этих проблем.

2. Легко запускайте пакеты, установленные локально в проекте

В каталоге проекта выnpm install some-cli-toolустановили пакеты (появятся вnode_modules/.bin/каталоге), обычно их можно вызвать только через сложные пути или скрипты npm. Аnpxон может разумно отдавать приоритет использованию локальной версии в текущем проекте, делая вызов очень простым.

3. Безопасно и удобно пробуйте новые инструменты

Хотите протестировать недавно выпущенный инструмент командной строки? Просто используйтеnpx new-cool-toolчтобы попробовать! Если он не подойдёт, он не оставит никакого следа на вашем компьютере.

---

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

Когда вы выполняетеnpx <command>, он найдёт и выполнит команду согласно следующей логике:

Этот процесс полностью прозрачен для пользователя; вам просто нужно наслаждаться удобством, которое он приносит.

---

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

Подготовка окружения

Убедитесь, что ваша версия Node.js >= 5.2.0. Вы можете проверить с помощью следующей команды:

node --version
npm --version
# 如果 npm 版本 >= 5.2.0，npx 就已经可用了
npx --version

Базовый синтаксис

npx [选项] <命令>[@版本] [命令的参数...]

Описание распространённых параметров опций

Опция	Полное название	Описание
--no-install		Заставить npx использовать только локально существующие пакеты. Если пакет недоступен локально, сообщить об ошибке и не скачивать.
--ignore-existing		Игнорировать локально существующие пакеты и принудительно скачать последнюю версию из удалённого источника.
-p, --package <包名>		Указать пакеты для установки. Это очень полезно, когда нужно использовать несколько пакетов одновременно.
-c <命令字符串>		При использовании-pПри указании нескольких пакетов используйте-cчтобы указать npx конкретную команду для выполнения.
--yes		Автоматически отвечать «да», когда известно, что будет вызван запрос (например, create-react-app спрашивает, продолжать ли).

---

Примеры практического применения

Давайте рассмотрим несколько конкретных примеров, чтобы увидеть, какnpxон может продемонстрировать свою мощь.

Пример 1: Запуск одноразовой команды (самый распространённый сценарий)

Вы хотите использоватьcowsayэтот забавный маленький инструмент, чтобы заставить корову говорить в терминале, но не хотите устанавливать его.

Шаг 1: Запуск напрямую с помощью npx

npx cowsay hello

Пояснение кода：npxОн проверит, существует ли локальныйcowsayпакет. Если нет, он автоматически скачает его из npm и автоматически удалит за собой после выполнения команды.

Ожидаемый вывод：

npx cowsay hello

Need to install the following packages:
[email protected]
Ok to proceed? (y) y
 _______
< hello >
 -------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

Шаг 2: Запуск с определённой версиейЕсли вы хотите использовать определённую версию:

npx [email protected] hello1.4.0

Вывод:

 ____________
< hello1.4.0 >
 ------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

Пример 2: Использование шаблона для создания проекта

Возьмём в качестве примера создание проекта React:

Традиционный способ (больше не рекомендуется)：

npm install -g create-react-app  # 全局安装
create-react-app my-app          # 使用

Проблемы с этим способом установки:

• Глобально устанавливает кучу инструментов
• Путаница с версиями
• Компьютер становится всё более захламлённым

Современный способ (с использованием npx)：

npx create-react-app my-app

Пояснение кода：npxОн временно загрузит последнюю версиюcreate-react-app, использует её для создания скелета проекта, и после завершения она не останетсяcreate-react-appв вашей глобальной среде. В следующий раз, когда вы создадите проект, он всё равно загрузит последнюю версию.

Пример 3: Запуск локальных инструментов проекта

Предположим, вы установилиwebpackкак зависимость для разработки (npm install webpack --save-dev).

Традиционный вызов (хлопотный)：

# 需要输入冗长的路径
./node_modules/.bin/webpack --version

# 或者在 package.json 中配置 scripts
# "scripts": { "build": "webpack" }
# 然后运行
npm run build

Использование npx (очень лаконично)：

npx webpack --version
# 或直接运行构建
npx webpack

Пояснение кода：npxОн будет разумно отдавать приоритет поиску проектныхnode_modulesподwebpackдля выполнения.

Пример 4: Выполнение скрипта из GitHub

npxВы даже можете запускать код из GitHub gists или репозиториев.

npx https://gist.github.com/username/abcdefg

Обратите внимание: запуск неизвестного кода из интернета связан с рисками безопасности; убедитесь, что источник заслуживает доверия.

---

Три основные возможности npx

1. Запуск любого npm-пакета напрямую

Общий формат:

npx 包名

Пример:

npx cowsay hello

Он напрямую запустит маленькую коровку командной строки 🐮

2. Запуск локальных зависимостей проекта

Многие инструменты устанавливаются только в проект:

npm install vite

Раньше нужно было:

./node_modules/.bin/vite

Теперь:

npx vite

Автоматически находит для вас локальные исполняемые файлы

3. Запуск с последней версией (не засоряет систему)

npx create-next-app@latest my-app

Всегда используйте последнюю версию инструмента для создания проектов

Не нужно обновлять глобальные инструменты

---

Самые распространённые сценарии npx

Создание проектов

npx create-react-app my-app
npx create-next-app
npx vue-cli create my-vue
npx degit user/repo

Временные инструменты

npx eslint .
npx prettier --write .
npx serve .

Запуск сервера разработки

npx vite
npx nodemon app.js

---

Продвинутые советы и соображения

1. Объединение нескольких пакетов

Иногда команда должна зависеть от нескольких пакетов. Например, вы хотите запустить простой HTTP-сервер в каталоге и одновременно использоватьbrowser-syncчтобы реализовать live reload. Хотя это не часто встречается,npxэто можно сделать:

npx -p http-server -p browser-sync -c 'http-server & browser-sync start --proxy "localhost:8080" --files "**/*"'

Пояснение кода：

• -pУкажите пакеты для подготовки.
• -cУкажите полную строку команды для запуска.

2. Что следует учесть

• Сетевое подключение: При первом запуске пакета его нужно скачать из сети, и скорость зависит от вашей сети.
• Безопасность：npxОн автоматически скачает и выполнит код.Запускайте только те источники и пакеты, которым доверяете.。
• Временный каталог: Скачанные пакеты хранятся во временном каталоге операционной системы и могут периодически очищаться системой.

Другие расширения