Що відбувається, коли ви запускаєте команди npm?

Ви натискаєте Enter після команди npm. Ваш проєкт збирається. Це здається магією.

Це не магія. Це серія мережевих запитів, парсингу коду та оптимізації файлів.

Перестаньте запускати команди наосліп. Замість цього зрозумійте, як працює цей механізм.

Ось що відбувається під капотом 6 основних команд, які ви використовуєте щодня.

  1. npm install

Ця команда зчитує ваш файл package.json. Вона звертається до хмарного реєстру, щоб знайти потрібні версії ваших інструментів.

  • Вона завантажує пакети з реєстру.
  • Вона створює папку node_modules.
  • Вона будує дерево залежностей.
  • Вона оновлює package-lock.json, щоб зафіксувати точні версії.
  1. npm run format:check

Це етап перевірки. Він перевіряє, чи відповідає ваш код правилам стилю, не вносячи жодних змін.

  • Він будує віртуальну структуру ваших файлів.
  • Він порівнює ваші файли з такими правилами, як Prettier.
  • Він позначає помилки, якщо пробіли або синтаксис є неправильними.

Щоб виправити ці помилки, запустіть npm run format. Ця команда використовує Prettier, щоб переписати ваші файли відповідно до правильного стилю.

  1. npm run lint

Сприймайте це як перевірку орфографії для вашого коду. ESLint шукає помилки, які порушують вашу логіку.

  • Він знаходить синтаксичні помилки.
  • Він виявляє невикористані змінні.
  • Він виявляє відсутні імпорти.
  • Він позначає неправильне використання React Hook.
  1. npm run build

Ця команда готує ваш застосунок до реального світу. Вона створює папку dist.

  • Вона використовує бандлер для виконання tree shaking. Це видаляє код, який ви імпортували, але ніколи не використовували.
  • Вона виконує мініфікацію. Це видаляє зайві пробіли та перейменовує змінні, щоб заощадити байти.
  • Вона обробляє CSS та активи.
  • Вона видає оптимізовані статичні файли, готові до роботи на сервері.
  1. npm run dev

Це запускає ваш локальний сервер розробки. Якщо ви використовуєте Vite, він використовує Native ES Modules.

  • Він компілює файли лише тоді, коли їх запитує ваш браузер.
  • Він використовує WebSockets для Hot Module Replacement (HMR).
  • Він миттєво замінює відредагований код у вашому браузері без повного перезавантаження сторінки.
  1. npm run preview

Використовуйте це, щоб перевірити свою роботу перед розгортанням. Ця команда ігнорує ваш вихідний код. Вона дивиться лише на вашу папку dist.

  • Вона симулює поведінку вашого застосунку на Vercel або AWS.
  • Вона надає вашу production-збірку на локальному сервері.

Термінал — це не «чорна скринька». Коли ви розумієте свої інструменти, ви дебажите швидше.

Яка команда змінила ваш робочий процес, коли ви дізналися, як вона працює? Напишіть мені нижче.

Магія під терміналом: що насправді відбувається, коли ви запускаєте команди npm

Ви коли-небудь замислювалися, що відбувається за лаштунками, коли ви вводите npm install або npm start? Це здається магією, але насправді під капотом відбувається складна оркестрація процесів.

У цій статті ми розберемо крок за кроком, що саме робить npm, коли ви даєте йому команду.

1. Оболонка (The Shell)

Коли ви вводите команду в терміналі, першим ділом її отримує оболонка (shell), така як bash, zsh або PowerShell. Оболонка відповідає за інтерпретацію вашого введення. Вона шукає виконуваний файл npm у вашому системному шляху (PATH). Якщо вона знаходить npm, вона запускає цей процес.

2. Інтерфейс командного рядка npm (The npm CLI)

npm — це інструмент командного рядка (CLI), написаний на JavaScript, який працює на платформі Node.js. Коли ви запускаєте команду, npm починає аналізувати ваші аргументи, щоб зрозуміти, що саме ви хочете зробити (наприклад, встановити пакет, запустити скрипт або видалити щось).

3. Файл package.json

package.json — це маніфест вашого проєкту. Коли ви запускаєте команду, npm звертається до цього файлу, щоб отримати інформацію про ваш проєкт: його назву, версію, скрипти та, що найважливіше, залежності (dependencies та devDependencies).

4. Реєстр npm (The npm Registry)

Якщо пакет, який ви хочете встановити, ще не знаходиться у вашій локальній папці node_modules, npm звертається до npm Registry. Це величезна онлайн-база даних, де зберігаються мільйони пакетів. npm надсилає HTTP-запити до реєстру, щоб знайти потрібний пакет і отримати посилання на його завантаження.

5. Розв'язання залежностей (Dependency Resolution)

Це один із найскладніших етапів. Пакети часто мають власні залежності, які, своєю чергою, мають інші залежності. Це створює величезне дерево залежностей. npm має вирішити, які саме версії кожного пакета потрібно встановити, щоб уникнути конфліктів і забезпечити стабільну роботу вашого застосунку.

6. Папка node_modules

Після того, як усі необхідні пакети завантажені та версії визначені, npm розпаковує їх у папку node_modules. Саме тут зберігаються всі файли, які ваш проєкт використовує під час виконання.

7. Файл package-lock.json

Щоб гарантувати, що кожен розробник у команді та кожен сервер розгортання отримують абсолютно однакові версії пакетів, npm використовує package-lock.json. Цей файл фіксує точну структуру дерева залежностей та версії кожного встановленого пакета, забезпечуючи детерміноване встановлення.

Висновок

Тож наступного разу, коли ви введете npm install, пам'ятайте: це не просто магія. Це чітко налагоджений процес взаємодії оболонки, Node.js, реєстру та складних алгоритмів розв'язання залежностей.