NPM для начинающих. Полный гайд: установка, команды, флаги, разбор package.json, версионирование

✏️ Узнаем что такое NPM и зачем он нужен. Установим NPM на компьютер и попрактикуемся в основных командах: init, install, uninstall и других. Обсудим назначение файлов package.json, package-lock.json и папки node_modules. Поговорим про семантическое версионирование и научимся устанавливать библиотеки с конкретной "фиксированной" версией. Узнаем о флагах в командах и о сокращенных версиях команд и флагов. Обсудим разницу dependencies и devDependencies зависимостей. Разберёмся, как запускать скрипты, описанные в package.json. Научимся использовать установленные зависимости. Узнаем, как очистить кэш NPM. Обсудим специфичные команды npx и npx create и их назначение. Поговорим о том, где искать существующие NPM-команды и флаги.

🔴 Timeline:
▶ 00:00​ | Введение
▶ 00:29​ | Что такое NPM
▶ 01:36​ | Зачем нужен NPM
▶ 04:11​ | Установка NPM на компьютер
▶ 04:52​ | Инициализация NPM в проекте — команда npm init
▶ 06:02​ | Файл package.json — общая информация
▶ 06:31​ | Добавление одной или нескольких библиотек в проект — команда npm install packagename
▶ 08:11​ | Файл package-json.lock
▶ 08:50​ | Папка node_modules
▶ 09:59​ | Файл package.json — поле dependencies
▶ 10:48​ | Установка всех зависимостей — команда npm install
▶ 12:21​ | Удаление зависимости из проекта — команда npm uninstall packagename
▶ 13:12​ | Добавление библиотеки с конкретной версией
▶ 16:02​ | Фиксация конкретной версии библиотеки — символ ^ перед номером версии в dependencies в package.json
▶ 18:31​ | Семантическое версионирование
▶ 20:10​ | Флаги в командах
▶ 21:01​ | Разница dependencies и devDependencies
▶ 24:50​ | Сокращенные команды и флаги — npm i, npm i packagename, npm i packagename -D
▶ 26:04​ | Запуск скриптов — поле scripts в файле package.json, команда npm run somecommand
▶ 31:22​ | Как использовать установленные зависимости
▶ 36:53​ | Очистка кэша — команда npm cache clean --force
▶ 37:33​ | Что такое NPX
▶ 38:52​ | Команда npm create
▶ 39:52​ | Где искать NPM-команды и флаги — официальная документация NPM
▶ 40:44​ | Альтернативные менеджеры пакетов — Yarn, pnpm, bun и другие
▶ 42:30​ | Заключение

📚 Ссылки:
➖ Код из урока: https://github.com/aleksanderlamkov/n...
➖ NodeJS (скачать): https://nodejs.org/en/
➖ NPMJS (поиск библиотек): https://www.npmjs.com/
➖ NPM документаци: https://docs.npmjs.com/
➖ Семантическое версионирование: https://semver.org/lang/ru/
➖ Пример команды NPX при установке React: https://react.dev/learn/start-a-new-r...
➖ Пример команды NPM CREATE при установке Vite: https://vitejs.dev/guide/#scaffolding...

💬 Чат в телеграмме (помощь новичкам):
https://t.me/friendlyFrontendChat

🔸 Boosty (поддержать канал):
https://boosty.to/friendly-frontend

🗂️ Бесплатные курсы на канале:
🟠 HTML:    • HTML курс 2025  
🔵 CSS:    • CSS курс 2025  
🟡 JS:    • JavaScript курс 2025  
🟢 A11y:    • Accessibility курс 2025  
🗺 Frontend Roadmap 2024:    • Frontend Roadmap 2024 | Что должен уч...  
⚪️ Мастер-класс по верстке для новичков:    • Адаптивная верстка сайта с нуля для н...  
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS):    • Вёрстка сайта с 0 до результата | HTM...  
⚫️ Мастер-класс по верстке с практикой по JavaScript:    • Вёрстка сайта с нуля • HTML, SCSS, JS...  
🔴 Мастер-класс по верстке на стеке JSX, SCSS, JS, Vite, Minista (SSG), БЭМ: https://stepik.org/a/228315

📌 Автор:
➖ Личный сайт: https://aleksanderlamkov.ru/
➖ Telegram: https://t.me/friendlyFrontend
➖ Boosty: https://boosty.to/friendly-frontend
➖ GetMentor: https://getmentor.dev/mentor/aleksand...
➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315

#frontend #фронтенд #npm