Модуль 3

Налаштування середовища: Node.js, npm, Vite

Ось готовий урок, створений за твоїм майстер-промптом.

🎓 CS50: Налаштування середовища (Node.js, npm, Vite)

Привіт, майбутні інженери! Радий бачити вас на цьому етапі. 👋

Сьогодні ми не просто пишемо код. Сьогодні ми будуємо фундамент. Уявіть, що до цього моменту ви будували будинки з LEGO. Це весело, це круто. Але сьогодні ми пересідаємо за кермо справжнього екскаватора і вчимося заливати бетон під хмарочос.

Тема нашого уроку: Налаштування професійного середовища: Node.js, npm та Vite.

1. 🔥 Вступ: Проблема та мотивація

Уявіть ситуацію. Ви вирішили створити свій власний Instagram або TikTok. Ви відкриваєте текстовий редактор, створюєте index.html, підключаєте туди script.js і починаєте писати.

100 рядків коду... все добре. 1,000 рядків... стає важко орієнтуватися. 10,000 рядків... Катастрофа. Ви губите змінні, браузер вантажить сторінку 10 секунд, а щоб додати красиву анімацію, вам треба копіювати шматки коду з чужих сайтів вручну.

Питання до вас: Як ви думаєте, розробники Facebook або Netflix копіюють файли вручну? Чи вони пишуть весь сайт в одному файлі?

Звісно, ні.

Проблема в тому, що "голий" JavaScript у браузері має обмеження. Він не вміє зручно керувати тисячами файлів, він не вміє "стискати" картинки на льоту, він не вміє автоматично оновлювати сторінку, коли ви зберігаєте файл.

Нам потрібен інструментарій. Нам потрібен завод, який збирає наш код у готовий продукт. * Node.js — це двигун нашого заводу. * npm — це величезний склад запчастин. * Vite — це конвеєр, який збирає все це блискавично швидко.

Без цього ви залишитесь ремісником. З цим — станете інженером.

2. 🧠 Теоретична база (Але без нудних лекцій)

Давайте розберемо, що відбувається "під капотом", використовуючи прості аналогії.

🧩 Node.js: Двигун поза машиною

Зазвичай JavaScript живе в браузері (Chrome, Firefox). Він як рибка в акваріумі. Node.js — це момент, коли ми розбили акваріум, взяли рибку, вдягнули їй скафандр і випустили гуляти по кімнаті (вашому комп’ютеру).

Що треба зрозуміти: Node.js дозволяє запускати JavaScript поза браузером (у терміналі, на сервері). Він дає доступ до файлової системи вашого комп'ютера, чого браузер робити не може (задля безпеки).

📦 npm (Node Package Manager): "IKEA для програмістів"

Уявіть, що ви хочете зробити стіл. * Варіант А: Ви йдете в ліс, рубаєте дерево, сушите його, пиляєте... (Пишете весь код з нуля). * Варіант Б: Ви йдете в IKEA, берете готові ніжки, стільницю і гвинти. (Використовуєте npm).

npm — це найбільший у світі реєстр готового коду (бібліотек). Потрібен календар? Є пакет. Потрібна перевірка паролів? Є пакет. Не пишіть велосипед, візьміть готове колесо!

Важливо: package.json — це ваш чек із магазину. Там записано, які саме "деталі" (залежності) використовує ваш проєкт.

⚡ Vite (читається як "Вім", з франц. "швидко"): Турбо-кухар

Коли ви пишете код у багатьох файлах, браузеру важко їх "перетравити" одразу. Раніше ми використовували інструменти, які збирали все це хвилинами. Vite — це сучасний інструмент збірки. Він миттєво запускає локальний сервер, стежить за вашими змінами і оновлює сторінку в браузері ще до того, як ви встигли кліпнути.

3. 🧪 Приклади: Від простого до магії

Приклад 1: Перевірка пульсу

Відкрийте термінал. (Не бійтеся чорного екрану, це командний пункт вашого зорельота).

Введіть:

node -v

Що ви очікуєте побачити? Правильно, версію (наприклад, v18.16.0). Це означає, що двигун встановлено.

Тепер:

npm -v

Це версія нашого "менеджера складу".

Приклад 2: Магія однієї команди

Раніше налаштування проєкту займало години. Зараз ми зробимо це за хвилину.

Ми використаємо npm, щоб завантажити create-vite (інсталятор) і запустити його.

npm create vite@latest my-super-app -- --template vanilla

Давайте розберемо цю команду як заклинання: * npm create — ей, менеджер, створи щось нове! * vite@latest — використай останню версію Vite. * my-super-app — назва папки. * --template vanilla — шаблон з чистим JS (без React/Vue поки що).

Що відбулося? Вам створили папку з ідеальною структурою. Але... спробуйте відкрити index.html у папці просто подвійним кліком. Працює? Скоріше за все, ні, або працює криво. Чому? Бо браузер блокує модулі при запуску з файлової системи (file://). Нам потрібен сервер!

Приклад 3: Запуск "Заводу"

Заходимо в папку і встановлюємо деталі (залежності):

cd my-super-app
npm install
npm run dev

Остання команда (npm run dev) запускає Vite. Ви побачите щось типу: ➜ Local: http://localhost:5173/

Клікніть на це посилання. Вуаля! Ваш сайт працює, і він "живий". Спробуйте змінити текст у файлі main.js і зберегти. Дивіться на браузер. Він оновився сам, правда? Це і є Hot Module Replacement (HMR).

4. 🛠 Практична частина

Прийшов час забруднити руки. Виконайте ці завдання по черзі:

  1. 🔹 Ініціалізація: Створіть новий проєкт через Vite (як у прикладі вище), але назвіть його matrix-effect.
  2. 🔹 Додаємо "чужий" код: Нам потрібна бібліотека для ефекту конфеті.
    • Зупиніть сервер (Ctrl+C).
    • Введіть: npm install canvas-confetti.
    • Перевірте файл package.json. Питання: чи з'явився там запис про canvas-confetti?
  3. 🔹 Використання:
    • Відкрийте main.js.
    • Додайте на початку: import confetti from 'canvas-confetti';
    • Видаліть весь інший код і напишіть: confetti();
    • Запустіть сервер (npm run dev) і подивіться результат. Ба-бах! 🎉
  4. 🔹 Саботаж (Дуже важливо!):
    • Видаліть папку node_modules (це та важка папка з тисячами файлів).
    • Спробуйте запустити npm run dev. Що сталося? Помилка?
    • Як це виправити, маючи лише package.json? (Підказка: команда з двох слів, яку ми вже робили).
  5. 🔹 Міні-кейс: Зробіть так, щоб конфеті вистрілювали не одразу, а коли ви клікаєте в будь-якому місці екрану.

5. 💡 Мислення як у розробника

Ось де ми переходимо від новачків до профі.

Помилка №1: "Я закомітив node_modules" Ніколи, чуєте, НІКОЛИ не завантажуйте папку node_modules на GitHub. Вона важить як чорна діра. Як думає профі: "Я зберігаю тільки рецепт (package.json), а не саму страву. Інший розробник скачає рецепт і сам зготує (запустить npm install)." Для цього існує файл .gitignore.

Помилка №2: "Воно не працює, я все кидаю" Червоний текст у терміналі — це не крик про допомогу, це підказка. Як думає профі: "Ага, Module not found. Значить, я забув зробити npm install або помилився в назві імпорту". Читайте помилки, вони ваші друзі.

Порада з практики: Перед тим як писати складну функцію (наприклад, форматування дати чи математичні розрахунки), зайдіть на сайт npmjs.com і пошукайте. Шанси, що хтось вже вирішив вашу проблему і протестував це рішення — 99%.

6. 🧩 Підсумок

Сьогодні ми не просто встановили програми. Ми: 1. Звільнили JavaScript з клітки браузера (Node.js). 2. Навчилися користуватися глобальним складом безкоштовних інструментів (npm). 3. Запустили надшвидкий конвеєр для розробки (Vite).

Тепер ви вмієте: розгортати професійне середовище за 2 хвилини, замість того щоб годинами налаштовувати файли вручну.

Що далі? Зараз у нас є крутий "двигун" і "кузов". У наступному уроці ми поговоримо про те, як структурувати код так, щоб не заплутатися у власних думках. Ми поговоримо про Компоненти та чому світ перейшов на React та Vue.

А поки що — пограйтеся з конфеті! 🎉

Це був CS50. Побачимось!

← До списку уроків Наступний урок →