Що це таке NPM та Node.js (частина 1)

Вступ

Node.js та npm є ключовими інструментами для розробки сучасних веб-додатків. Node.js дає можливість запускати JavaScript поза браузером, а npm є менеджером пакетів, який дозволяє управляти залежностями в проєкті. У цій статті розглянемо, що таке ці технології і як вони працюють разом.

Node.js — це середовище виконання для JavaScript, яке дозволяє запускати JavaScript на сервері. Замість того, щоб обмежуватися лише клієнтським кодом, розробники можуть використовувати JavaScript для створення серверних додатків. У нього:

Однопотокова модель: Node.js працює в одному потоці і використовує асинхронні операції для обробки запитів.

Висока продуктивність: Завдяки асинхронному виконанню Node.js здатний обробляти велику кількість запитів одночасно.

Модульна архітектура: Node.js надає велику кількість вбудованих модулів для роботи з файлами, мережевими запитами та іншими функціями.

npm (Node Package Manager) — це менеджер пакетів для Node.js, який дозволяє розробникам керувати зовнішніми бібліотеками та інструментами в проєкті. За допомогою npm можна встановлювати, оновлювати та видаляти залежності, що робить роботу з проектами зручнішою. Ним можливо:

Управління залежностями: npm дозволяє встановлювати потрібні пакети для проекту, наприклад, бібліотеки для роботи з базами даних чи обробки запитів.

Скрипти для автоматизації задач: npm дозволяє створювати та запускати скрипти для автоматизації повторюваних задач, таких як компіляція коду чи запуск тестів.

Публікація пакетів: За допомогою npm можна публікувати свої власні бібліотеки для використання іншими розробниками.

Як працюють Node.js та npm разом?

Node.js і npm взаємодіють, доповнюючи один одного. Node.js — це середовище виконання для коду, а npm забезпечує зручне керування зовнішніми бібліотеками та залежностями для цього коду. Вони працюють разом, щоб полегшити процес розробки та створення додатків.

Node.js дозволяє писати серверний код на JavaScript.

npm допомагає встановлювати й керувати бібліотеками, які використовуються в проекті.

Як почати роботу з Node.js та npm?

Для цього треба перейти на офіційний сайт Node.js і завантажити останню стабільну версію. Під час установки також буде встановлено npm.

Після установки вам потрібно відкрити командний рядок і прописати туди наступні команди:

node -v 
npm -v

Результат повиннен бути на кшталт того:

!(data:image/png;base64,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)

Як зібрати проєкт через бандлер Vite?

Щоб зібрати проєкт за допомогою Vite, виконайте наступні кроки:

Ініціалізація проєкту (якщо ви ще не створили проєкт):

Для початку потрібно ініціалізувати новий проєкт, використовуючи команду:
```
Після цього у першому виберіть Vanilla, а у другому JavaScript.
```

Після створення проєкту, перейдіть до каталогу проєкту:


Встановіть усі залежності, які визначені в package.json, за допомогою npm:
```npm i``` або ```npm install```

**І тепер у вас є базовий проєкт на Vite!**


## А тепер як його запустити?

```npm run dev```
__Ця команда запустить локальний сервер, і ви зможете переглядати зміни в реальному часі за адресою http://localhost:3000 (або інший порт, якщо він конфігурований по-іншому).__

## Збірка проєкту для продакшену:

Коли проєкт готовий до продакшену, ви можете зібрати його за допомогою команди:

``` npm run build ```
Ця команда створить оптимізовану версію проєкту в директорії dist/. Всі файли будуть мінімізовані та підготовлені до розгортання на сервері.

## Перевірка зібраного проєкту:

Для перевірки того, як виглядає ваш проєкт після збірки, можна запустити локальний сервер:

```npm run serve```

[nodejs],javascript,npm,eslint,vite,package,production 28-04-2025