npm - это стандартный менеджер пакетов для среды исполнения Node.js. По сути, это гигантское облачное хранилище (репозиторий), где разработчики со всего мира делятся своими библиотеками. Вам не нужно писать код для работы с датами или запросами к серверу с нуля - вы просто «берете» готовый пакет из npm и подключаете его к себе.
Как запустить проект с нуля
Первым делом в любом проекте нужно создать «паспорт» вашего приложения. Без него npm не будет знать, что ваша папка - это полноценный JavaScript-проект. Для этого используется командаnpm init.
Когда вы вводите эту команду, терминал превращается в анкету. Он спросит вас: как назвать проект? Какая будет версия? Кто автор? Если вы не хотите тратить время на ответы и вам нужны настройки по умолчанию, используйте «ленивый» вариант: npm init -y. Флаг -y (yes) мгновенно создает файл с базовыми параметрами, который вы всегда сможете поправить позже вручную.
Важный момент: название проекта в файле должно быть написано в нижнем регистре. Если вы напишете «My-Super-App», npm может начать ругаться. Лучше использовать my-super-app.
Разбираем package.json по косточкам
Файл package.json - это конфигурационный файл в формате JSON, который описывает проект и его зависимости . Поскольку это JSON, будьте внимательны с запятыми и кавычками: одна лишняя запятая в конце списка может «сломать» установку всех библиотек. Вот основные разделы, которые вам встретятся чаще всего:- name и version: идентификация вашего проекта. Это критично, если вы решите опубликовать свою библиотеку в общий доступ.
- scripts: ваши личные сокращения для длинных команд.
- dependencies: список библиотек, без которых ваш сайт просто не откроется.
- devDependencies: инструменты, которые нужны только во время разработки (например, для проверки кода или его сборки), но не нужны конечному пользователю.
Установка библиотек и управление зависимостями
Чтобы добавить в проект новую библиотеку, используйте командуnpm install название_пакета. Но здесь есть важный нюанс, который часто путает новичков: разница между обычными зависимостями и зависимостями для разработки.
Если вы устанавливаете библиотеку, которая будет работать в браузере у пользователя (например, React), используйте обычную установку. Если же вы ставите инструмент для сборки кода, такой как
Webpack - это мощный сборщик модулей, который объединяет множество файлов JavaScript в один или несколько итоговых бандлов
, добавьте флаг --save-dev или -D.
Зачем это разделять? Представьте, что ваш проект весит 100 МБ из-за инструментов разработки, а сам сайт - всего 1 МБ. Когда вы будете загружать сайт на сервер, вам не нужны инструменты для сборки, вам нужен только работающий код. Разделение в package.json позволяет установить только необходимые зависимости для продакшена.
| Критерий | dependencies | devDependencies |
|---|---|---|
| Что это? | Необходимые для работы приложения | Инструменты для разработчика |
| Пример | React, Axios, Lodash | Webpack, ESLint, Jest |
| Команда установки | npm install пакет |
npm install -D пакет |
| Нужны на сервере? | Да, обязательно | Нет, только локально |
Автоматизация рутины через scripts
Ручной ввод длинных команд в терминале - это скучно и чревато ошибками. В секцииscripts в файле package.json вы можете создать свои «горячие клавиши».
Например, вместо того чтобы каждый раз писать node index.js, вы можете добавить в скрипты:
"start": "node index.js".
Теперь достаточно ввести npm run start, и ваш проект запустится.
Существуют также специальные pre- и post-скрипты. Если вы создадите скрипт prestart, npm автоматически запустит его прямо перед основным скриптом start. Это удобно, если перед запуском приложения нужно, например, очистить временную папку или проверить версию Node.js.
Секретное оружие: npx
Бывает так, что вам нужно запустить какой-то инструмент всего один раз. Например, создать структуру проекта с помощью генератора. Устанавливать такую утилиту глобально в систему - значит засорять компьютер. Тут на помощь приходит npx - это инструмент, который позволяет запускать пакеты Node.js без их предварительной установки в проект или систему . Командаnpx cowsay "Привет!" скачает временную версию пакета, выведет сообщение и тут же удалит пакет. Это идеальный способ попробовать новую библиотеку, не раздувая ваш package.json.
Перенос проекта и папка node_modules
Самая большая ошибка новичков - пытаться переслать проект другу или загрузить в Git вместе с папкойnode_modules. Эта папка может содержать десятки тысяч файлов и весить сотни мегабайт.
Правильный подход такой: вы передаете только файл package.json и package-lock.json. Почему? Потому что в этих файлах записаны все «рецепты» вашего проекта. Когда ваш коллега скачает ваш репозиторий и введет простую команду npm install, npm прочитает список зависимостей из вашего файла и автоматически скачает все нужные версии библиотек.
Кстати, package-lock.json - это «замороженный» снимок всех версий. Он гарантирует, что у вас, у вашего коллеги и на сервере будут установлены абсолютно идентичные версии пакетов, что предотвращает ситуацию «у меня работает, а у него нет».
Типичные ошибки и как их леี่ยง
Работа с npm не всегда проходит гладко. Иногда вы столкнетесь с конфликтами версий. Если вы видите в терминале бесконечный список ошибок красным цветом, первым делом попробуйте обновить пакеты командойnpm update.
Если же проект совсем «сломался» и зависимости конфликтуют между собой, есть проверенный радикальный метод:
- Удалите папку
node_modulesвручную. - Удалите файл
package-lock.json. - Снова запустите
npm install.
Почему нельзя просто скопировать папку node_modules с одного компьютера на другой?
Потому что некоторые пакеты при установке компилируются под конкретную операционную систему (например, под Windows или macOS). Если вы скопируете папку с Windows на Mac, такие библиотеки просто не заработают. Правильный путь - передавать только package.json и запускать установку через npm install на каждой новой машине.
В чем разница между npm install и npm update?
npm install устанавливает пакеты, указанные в package.json, соблюдая версии в lock-файле. npm update проверяет наличие более новых версий пакетов (в рамках разрешенного диапазона, указанного символами ^ или ~ в JSON-файле) и обновляет их до актуальных.
Что значат символы ^ (caret) и ~ (tilde) перед версией пакета?
Символ ^ означает, что npm может обновлять пакет до следующей мажорной версии (например, с 1.2.0 до 1.9.0, но не до 2.0.0). Символ ~ более строгий: он позволяет обновлять только патчи (например, с 1.2.0 до 1.2.5). Это защита от того, чтобы обновление библиотеки внезапно не сломало ваш код из-за серьезных изменений в её API.
Что делать, если npm init запрашивает слишком много данных?
Просто нажимайте Enter, чтобы оставить значения по умолчанию. Вы всегда сможете открыть файл package.json в текстовом редакторе (например, VS Code) и изменить описание, версию или автора в любой удобный момент.
Зачем нужен npx, если можно просто установить пакет глобально через -g?
Глобальная установка засоряет систему и может привести к конфликтам версий между разными проектами. npx позволяет запустить конкретную версию инструмента один раз, не оставляя следов в системе, что гораздо чище и безопаснее.
Что делать дальше?
Теперь, когда вы понимаете, как работает эта связка, попробуйте следующее:- Создайте тестовую папку и инициализируйте её через
npm init -y. - Установите библиотеку
chalkдля раскрашивания текста в консоли илиlodashдля работы с массивами. - Добавьте простой скрипт в
package.json, который будет запускать ваш JS-файл, и попробуйте его вызвать черезnpm run .... - Попробуйте установить какой-нибудь линтер, например ESLint, используя флаг
-D, чтобы увидеть разницу в разделах зависимостей.