import/export).Ще 10-15 років тому розробнику було достатньо відкрити “Блокнот”, написати HTML, підключити файл script.js і відкрити його в браузері. Сьогодні розробка React-додатку вимагає запуску складного конвеєра інструментів (Tooling pipeline). Ми навряд чи можемо прямо виконати JSX-код або сучасний TypeScript у браузері без попередньої трансформації. Ця лекція детально аналізує, з чого складається сучасне середовище веб-інженера (Development Environment), як інструменти взаємодіють між собою і чому Vite прийшов на зміну класичному Webpack.
Першою великою помилкою початківців є думка, що оскільки ми створюємо фронтенд, нам потрібен лише браузер. Node.js — це середовище виконання (runtime) мови JavaScript поза браузером (на сервері або на вашому комп’ютері). У фронтенд-розробці ми використовуємо Node.js виключно для запуску скриптів-помічників: збірки проекту, компіляції SASS в CSS, перевірки якості коду (лінтери) або запуску локального Dev-сервера. Весь ваш React-код розробляється та тестується інструментами, які живуть в екосистемі Node.js.
package.jsonПочинаючи з першого дня створення проекту npm init або ініціалізації Vite, у корені проекту лежить package.json. Це “паспорт” проекту:
dependencies: бібліотеки, життєво необхідні для роботи додатку в браузері користувача (наприклад, react, react-router-dom).devDependencies: інструменти, потрібні лише вам як розробнику (наприклад, vite, eslint). Вони не потраплять у фінальний стиснутий код для користувачів.scripts: автоматизація рутинних консольних команд. Наприклад виклик npm run dev ховає за собою довгуу конфігурацію запуску локального середовища.Пакети оновлюються постійно. Для збереження стабільності проекти використовують специфікацію SemVer формату MAJOR.MINOR.PATCH:
18.0.0 -> 19.0.0): Вводить зміни, що ламають сумісність (Breaking changes). Потрібна зміна вашого коду.18.1.0 -> 18.2.0): Додає нові функції безпечно (назад-сумісна версія).18.2.0 -> 18.2.1): Виправлення багів, без нових фіч.Знак каретки ^ у package.json (напр. ^18.2.0) дозволяє автооновити версію до мінорних та патчів, але блокує мажорні зміни, щоб не зламати додаток.
Найперший і вбудований у Node.js стандарт. У ранніх версіях страждав від “Node Modules Black Hole” (чорна діра) — папка node_modules розросталася до гігабайтів, бо кожен пакет стягував свою ізольовану версію залежностей, дублюючи їх. Версія 5 вирішила проблеми надійності впровадивши package-lock.json — файл, який гарантує детермінізм (кожен розробник команди гарантовано завантажить до байту однакові версії).
У 2016 році, незадоволені швидкістю та безпекою npm, інженери FB випустили Yarn. Він вперше впровадив паралельне завантаження, офлайн-кеш та концепцію yarn.lock. Yarn суттєво прискорив CI/CD (збірку проекту на серверах) і змусив npm еволюціонувати.
Сучасний стандарт ефективності на 2024-2025 роки. На відміну від ‘лінійної’ папки (hoisting) npm та Yarn, pnpm використовує концепцію “жорстких посилань” (symlinks) операційної системи. Якщо ви створите 10 React-проектів через npm, у вас на диску буде лежати 10 копій бібліотеки React (в папках node_modules). pnpm тримає бібліотеку React в унікальному загальному сховищі (store) і створює 10 посилань. Результат: блискавична швидкість встановлення (до 3 разів швидше) і економія сотень гігабайтів дискового простору.
Браузер (зазвичай) не вміє використовувати import React from 'react'. Він також не знає що таке SASS модулів і JSX. Тож вам потрібен Bundler (Збирач).
Webpack, серце класичного інструменту create-react-app (CRA), збирав код “жадібно” (Bundle-based).
Коли ви викликали npm start, Webpack мусив проаналізувати КОЖЕН ФАЙЛ вашого проекту, пропустити його через плагіни (Babel, PostCSS), з’єднати в один великий файл bundle.js і лише потім віддати браузеру.
Для великих додатків час очікування Dev-сервера міг досягати 1–5 хвилин!
Сучасні браузери (Google Chrome, Firefox) навчилися нативно розуміти ECMAScript Modules (<script type="module">). Vite (створений Еваном Ю) змінив парадигму (Native ESM-based):
App.jsx, Vite перетворює цей і тільки цей файл на льоту і віддає його браузеру як ESM-модуль.(Примітка: На етапі виробництва або команди npm run build, Vite також збирає код через швидкий збирач Rollup, щоб створити найоптимальніші бандли для продакшену).
Транспайлер (Source-to-Source компілятор) переписує код високого рівня з однієї версії синтаксису в іншу.
Багаторічний лідер індустрії. Babel бере ваш код написаний на останніх стандартах JavaScript (ES2024, JSX, TypeScript), аналізує його (будує Абстрактне Синтаксичне Дерево - AST) і “деградує” (переписує) назад на старий ES5 (зрозумілий всім браузерам). Babel написаний на JavaScript, тому страждав на продуктивність у дуже великих проектах.
Новий гравець, що поступово витісняє Babel. SWC написаний на мові системного програмування Rust. Завдяки особливостям управління пам’яттю та багатопотоковості Rust, SWC компілює код у 20-40 разів швидше, ніж Babel. Сучасний Vite за замовчуванням пропонує плагіни саме на базі SWC (@vitejs/plugin-react-swc).
Сліпе написання коду призводить до хаосу в архітектурі, коли над проектом починають працювати більше ніж 2 людини.
console.log на Production або перевіряє правила залежностей у React-хуках типу useEffect)."" / '', кількість пробілів для відступу, чи потрібна крапка з комою). Працює агресивно і заміняє те, що ви написали.Приклад налаштування package.json:
// Виклик цих команд гарантує чистоту коду
"scripts": {
"lint": "eslint src --ext js,jsx",
"format": "prettier --write \"src/**/*.{js,jsx,css}\""
}
Щоб гарантувати, що “брудний” код взагалі ніколи не потрапить у загальний репозиторій (Git), використовують інтеграцію (Git Hooks) за допомогою інструменту Husky.
При виконанні команди git commit -m "update", автоматично тригериться “pre-commit” хук. Інструмент lint-staged перевіряє лише ті файли, які змінені. Якщо в них є помилки ESLint — коміт блокується. Це створює надійну дисципліну серед розробників (Continuous Quality).
package.json — є центром екосистеми, фіксуючи наявність зовнішніх бібліотек із жорстким контролем версіонування (SemVer) через lock-файли (pnpm-lock).2.4.1 до 3.0.0?pnpm вважається більш ефективним порівняно зі звичайним npm щодо використання жорсткого диску та швидкості установки?