Vite (зборщик збирач)
Vite - інструмент збірки проєкту для розробки вебдодатків на базі JavaScript. Він був створений для того, щоб забезпечити швидку та ефективну розробку вебпроєктів, а також максимально використовувати можливості сучасних вебстандартів.
Ініціалізація проєкту з Vite
Перейди в терміналі до папки, в якій лежатимуть усі проєкти, наприклад, нехай вона називається projects. Це можна зробити командою cd (Change Directory).
npm create vite@latest
- Вводимо команду початку створення проєкту й натискаємо Enter.
- На наступному кроці система може запитати, чи потрібно встановити пакет create-vite@latest, вводимо символ y (від слова “yes”) і натискаємо Enter.
- Далі вводимо ім'я папки нашого проєкту, воно може бути довільним, у прикладі це my-vite-project. УВАГА ! - якщо треба створиити проект у поточній папці - то в імені вводимо точку «.»
- Тепер стрілками вгору/вниз обираємо стек технологій проєкту, (Vanilla - чистий javascript, react - реакт), підтверджуємо вибір і натискаємо Enter.
- Останнім кроком обираємо мову проєкту, у нашому випадку це JavaScript, підтверджуємо Enter.
Встановлення залежностей
Наступним кроком після ініціалізації проєкту в терміналі нам потрібно перейти до папки проєкту і встановити його залежності. Папку node_modules ніколи не додають до системи контролю версій (не завантажують в репозиторій на github), у всіх розробників вона буде своя. Під час ініціалізації проєкту Vite було створено файл .gitignore, до якого додано правило, що виключає папку node_modules з переліку того, що необхідно завантажити в репозиторій на github.
npm install
Типи залежностей
Залежностями проєкту деякі будуть використані у фінальному продукті, інші необхідні тільки на стадії розробки. Саме для цього команди npm install і npm uninstall мають два прапорці.
- –save — вказує, що додається залежність, яка увійде до фінального продукту. Пакет буде встановлений локально, в папку node_modules, і буде доданий запис у поле dependencies в package.json.
- –save-dev — вказує, що додається залежність розробки, яка не увійде до фінального продукту. Пакет буде встановлений локально, в папку node_modules, і буде доданий запис у поле devDependencies в package.json.
Якщо не вибирати прапорець, за замовчуванням буде використаний –save.
Запуск сервера розробки
У файлі package.json у полі scripts знаходиться список команд проєкту, які можна виконати в терміналі Ім'я властивості (наприклад, “dev”) — це ім'я команди скрипта, який будемо запускати. Значення властивості (наприклад, «vite») — сам скрипт, який необхідно виконати. Тобто поле scripts містить псевдоніми для часто використовуваних команд на проєкті. Для запуску скриптів використовується npm команда run.
- Запустимо локальний сервер розробки, виконавши команду:
npm run dev