Различия

Показаны различия между двумя версиями страницы.

--- vite [2023/12/29 19:56]
tro
+++ vite [2024/03/13 20:50] (текущий)
tro
@@ Строка 1: / Строка 1: @@
-====== Vite ======
+====== Vite (зборщик збирач) ======
 [[https://vitejs.dev/|Vite]] - інструмент збірки проєкту для розробки вебдодатків на базі JavaScript. Він був створений для того, щоб забезпечити швидку та ефективну розробку вебпроєктів, а також максимально використовувати можливості сучасних вебстандартів.
 ===== Ініціалізація проєкту з Vite =====
@@ Строка 5: / Строка 5: @@
 <code>
 npm create vite@latest
+</code>
+  * Вводимо команду початку створення проєкту й натискаємо Enter.
+  * На наступному кроці система може запитати, чи потрібно встановити пакет create-vite@latest, вводимо символ y (від слова “yes”) і натискаємо Enter.
+  * Далі вводимо ім'я папки нашого проєкту, воно може бути довільним, у прикладі це my-vite-project. **УВАГА !** - якщо треба створиити проект у поточній папці - то в імені вводимо точку "."
+  * Тепер стрілками вгору/вниз обираємо стек технологій проєкту, (**Vanilla** - чистий javascript, **react** - реакт), підтверджуємо вибір і натискаємо Enter.
+  * Останнім кроком обираємо мову проєкту, у нашому випадку це JavaScript, підтверджуємо Enter.
+===== Встановлення залежностей =====
+Наступним кроком після ініціалізації проєкту в терміналі нам потрібно перейти до папки проєкту і встановити його залежності.
+Папку node_modules ніколи не додають до системи контролю версій (не завантажують в репозиторій на github), у всіх розробників вона буде своя. Під час ініціалізації проєкту Vite було створено файл .gitignore, до якого додано правило, що виключає папку node_modules з переліку того, що необхідно завантажити в репозиторій на github.
+<code>
+npm install
+</code>
+===== Типи залежностей =====
+Залежностями проєкту деякі будуть використані у фінальному продукті, інші необхідні тільки на стадії розробки.
+Саме для цього команди **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.
+  * Запустимо локальний сервер розробки, виконавши команду:
+<code>
+npm run dev
 </code>