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