0Pricing
Frontend Academy · Урок

npm и package.json: зависимости и скрипты

Инициализируйте проект с помощью npm init, добавляйте зависимости для выполнения и разработки, создавайте повторно используемые npm-скрипты и разбирайтесь в semver.

«npm и package.json: зависимости и скрипты» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое npm

npm (диспетчер пакетов Node) управляет зависимостями и сценариями проекта. Он читает package.json, чтобы определить, что установить, и записывает package-lock.json, чтобы сохранить точные версии. В реестре npm опубликовано более двух миллионов пакетов.

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

npm init -y создаёт package.json со значениями по умолчанию. Флаг -y принимает все значения по умолчанию без запросов.

mkdir my-project && cd my-project
npm init -y
# Creates package.json

Файл package.json

Основные поля: name, version, description, main (точка входа), scripts, dependencies, devDependencies.

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.3.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Установка пакетов

npm install package добавляет пакет в зависимости. npm install -D package добавляет его в devDependencies (в производственной среде не требуется). npm install без аргументов устанавливает всё из package.json.

npm install react react-dom      # production dep
npm install -D vite jest eslint  # dev deps only
npm install                      # install all from package.json

Семантическое версионирование

npm использует semver: major.minor.patch. Префикс ^ разрешает совместимые обновления (с той же основной версией). Префикс ~ разрешает только обновления исправлений. У точных версий префикса нет.

"react": "^18.3.0"  // 18.3.0 to < 19.0.0 (compatible)
"lodash": "~4.17.21" // 4.17.21 to < 4.18.0 (patch only)
"fixed": "1.2.3"     // exactly 1.2.3

Сценарии npm

Определяйте команды в поле scripts. Запускайте их с помощью npm run scriptname. Встроенные сценарии (test, start) можно запускать напрямую с помощью npm test или npm start.

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "test": "jest --coverage",
  "lint": "eslint src",
  "typecheck": "tsc --noEmit"
}

npm run и npx

npm run запускает сценарий из package.json. npx выполняет пакет из node_modules или временно загружает и запускает его — это удобно для разовых команд, таких как npx create-vite@latest.

package-lock.json

package-lock.json записывает точную версию каждого установленного пакета (и их транзитивных зависимостей). Зафиксируйте этот файл в системе контроля версий, чтобы все разработчики и CI использовали одинаковые версии. Никогда не редактируйте его вручную.

node_modules и .gitignore

Никогда не фиксируйте node_modules в системе контроля версий — его размер может достигать сотен MB. Всегда добавляйте его в .gitignore. Восстановить каталог можно с помощью npm install.

# .gitignore
node_modules/

Обновление и удаление пакетов

npm update обновляет пакеты в пределах их диапазона версий. npm outdated показывает, что можно обновить. npm uninstall package удаляет пакет.

npm outdated                # show outdated packages
npm update react             # update to latest compatible
npm uninstall lodash         # remove package

npm vs yarn vs pnpm

Альтернативы npm: yarn (быстрее, рабочие пространства, Plug'n'Play), pnpm (экономящее место хранилище символических ссылок, строгие зависимости, самый быстрый вариант для монорепозиториев). Основные команды у всех трёх инструментов похожи.

# pnpm equivalents:
pnpm install
pnpm add react
pnpm add -D vite
pnpm run dev

Быстрая проверка

Что делает флаг -D при выполнении команды npm install -D jest?

Итоги: npm и package.json

npm init создаёт package.json. npm install добавляет зависимости. Флаг -D добавляет их в devDependencies. Символ ^ в semver означает совместимые обновления. Скрипты запускают команды с помощью npm run. package-lock.json фиксирует точные версии — добавляйте его в систему контроля версий. node_modules указывайте в .gitignore. npx запускает одноразовые команды пакетов.

Часто задаваемые вопросы

Урок «npm и package.json: зависимости и скрипты» бесплатный?

Да — полный текст урока «npm и package.json: зависимости и скрипты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «npm и package.json: зависимости и скрипты»?

Инициализируйте проект с помощью npm init, добавляйте зависимости для выполнения и разработки, создавайте повторно используемые npm-скрипты и разбирайтесь в semver. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «npm и package.json: зависимости и скрипты»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. ES-модули: import, export и динамический import
  2. npm и package.json: зависимости и скрипты
  3. Vite: сервер разработки и сборка
  4. Основы сборки: tree shaking и разделение кода
← Назад к Frontend Academy