← Назад до курсу

▸ Як працює веб

▸ Перша веб-сторінка

▸ HTML-елементи та текст

▸ HTML-семантика

▸ HTML форми та медіа

▸ CSS основи та селектори

▸ Блокова модель CSS

▸ CSS позиціонування та Flexbox

▸ CSS типографіка та декор

▸ CSS-анімації та адаптивність

▸ Практика HTML/CSS: верстка проєкту

▸ JavaScript: змінні та типи даних

▸ JavaScript: методи рядків та Math

▸ JavaScript: масиви

▸ JavaScript: об'єкти та JSON

▸ JavaScript: керування потоком та функції

▸ JavaScript та DOM

▸ Node.js основи

▸ Express.js та REST API

▸ SQL та бази даних

▸ CSS Grid: двовимірна розкладка

▸ CSS Custom Properties та теми

▸ JavaScript: Класи та ООП

▸ JavaScript: Обробка помилок

▸ JavaScript: Fetch API та HTTP-запити

▸ JavaScript: Регулярні вирази

▼ npm, package.json та інструменти розробки

▸ Тестування JavaScript з Jest

← До курсу

npm, package.json та інструменти розробки

Vite: сучасний інструмент збірки

📖 Теорія

Vite — блискавичний dev-сервер та інструмент збірки.

Створення проєкту:

Bash

1npm create vite@latest my-app
2# Вибір: Vanilla | Vue | React | Preact | Lit | Svelte
3# Вибір: JavaScript | TypeScript
4cd my-app && npm install && npm run dev

Python

1vite.config.js:
2import { defineConfig } from &class="hl-comment">#039;vite&#039;;

💡 Приклад коду

export default defineConfig({
  root: 'src',
  publicDir: '../public',
  build: {
    outDir: '../dist',
    minify: 'esbuild',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['lodash', 'axios']
        }
      }
    }
  },
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
});

Особливості Vite:
- HMR (Hot Module Replacement) — оновлення без перезавантаження
- Нативні ES Modules у development
- esbuild для трансформації (100x швидше webpack)
- Rollup для production bundle
- Вбудована підтримка TypeScript, JSX, CSS Modules
- Плагіни: @vitejs/plugin-react, vite-plugin-vue тощо

Вивід:

← Попередній урок Наступний урок →