У цій статті ми розглянемо, як оновити ваш фронтенд з Webpack на Vite.
Vite - це сучасний інструмент для розробки фронтенду, який користується величезною популярністю. Просто подивіться на цю статистику завантажень з npm-трендів на зображенні нижче.
Ця тенденція зумовлена ключовою концепцією, що лежить в основі Vite: досвід розробника. У порівнянні з Webpack, Vite може запропонувати значно швидший час збірки та гаряче перезавантаження під час розробки. Це досягається завдяки використанню переваг сучасних функцій браузера, таких як модулі ES в браузері.
Перш ніж ми зануримося в процес міграції з Webpack на Vite, варто зазначити, що середовище фронтенд-розробки постійно розвивається, і Vite - не єдиний інструмент в цьому напрямку. esbuild - ще один неймовірно швидкий JavaScript-бандлер і мініфікатор, який привертає увагу веб-розробників. А якщо ви шукаєте підхід з нульовою конфігурацією, вам також варто звернути увагу на Parcel, який забезпечує безперебійну роботу для багатьох розробників.
Що потрібно врахувати перед переходом на Vite
Хоча Vite додає багато цікавих нових функцій у ваш робочий процес, як і будь-яка нова технологія, він має певні недоліки, які слід враховувати. Якщо порівнювати з таким зрілим інструментом, як Webpack, то основною проблемою буде екосистема сторонніх плагінів.
Існують десятки основних/офіційних плагінів Webpack, а також сотні (можливо, тисячі) плагінів, створених спільнотою на npm, які були розроблені за десять років використання Webpack. Хоча підтримка плагінів для Vite дуже хороша, ви можете опинитися в ситуації, коли плагін, на який ви покладаєтеся у своєму проєкті, не має еквівалента для Vite, і це може стати перешкодою для переходу на Vite.
Крок 1: Встановлення Vite
Першим кроком для міграції вашого проєкту є створення нового проєкту Vite та ознайомлення з інструментом, на який ви мігруєте. Ви можете створити новий застосунок Vite за шаблоном за допомогою наступних дій:
npm create vite@latest
Потім запустіть сервер розробки ось так:
npm run dev
Тепер перейдіть за вказаною URL-адресою у вашому браузері.
Vite створить каталог з файлами, як показано на малюнку нижче.
Багато з них будуть вам знайомі та стануть подібними замінами у вашій власній програмі.
Крок 2: Внесення змін до package.json
Щоб почати використовувати Vite у вашому існуючому проєкті Webpack, перейдіть до package.json проєкту Webpack, який ви хочете перенести, і встановіть Vite:
npm install –save vite
Залежно від вашого frontend фреймворку, ви також можете встановити відповідний плагін:
npm install –save @vitejs/plugin-react
Ви також можете оновити будь-які скрипти збірки, щоб використовувати Vite замість Webpack:
– "build": "webpack --mode production",
– "dev": "webpack serve",
++ "build": "vite build",
++ "dev": "vite serve",
Паралельно видаліть Webpack:
npm uninstall –save webpack webpack-cli wepack-dev-server
Тепер запустіть свій скрипт розробки, щоб протестувати.
npm run dev
Крок 3: Покінчимо з webpack.config, перейдемо до vite.config
Якщо вам не дуже пощастило, вам, скоріш за все, потрібно буде додати деякі додаткові конфігурації. Vite використовує файл vite.config.js для конфігурації, який багато в чому аналогічний вашому поточному файлу webpack.config.js.
Ви можете знайти повну документацію для цього конфігуратора Vite на vitejs.dev, але проста конфігурація Vite для застосунка React може виглядати наступним чином:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
},
})
Крок 4: Плагіни
Vite використовує Rollup як інструмент збірки, і ви можете додати будь-які плагіни Rollup до Vite, встановивши їх за допомогою npm:
npm install –save @rollup/plugin-image
Також додайте їх до масиву плагінів вашого файлу vite.config.js:
// vite.config.js
import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
image(),
],
})
Популярні плагіни Webpack та їхні еквіваленти для Vite
Далі ми розглянемо деякі популярні плагіни Webpack та їхні еквіваленти для Vite.
HtmlWebpackPlugin -> vite-plugin-html
HtmlWebpackPlugin спрощує створення HTML-файлів для обслуговування ваших пакетів Webpack. Якщо ви використовуєте HtmlWebpackPlugin у своєму проєкті, у Vite є плагін vite-plugin-html, який надає подібні можливості. Ви можете встановити його ось так:
npm install --save-dev vite-plugin-html
І імпортуйте у vite.config.js ось так:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig({
plugins: [
react(),
createHtmlPlugin({
entry: 'src/main.js',
template: 'public/index.html',
inject: {
data: {
title: 'index',
injectScript: `<script src="./inject.js"></script>`,
},
})
]
})
MiniCssExtractPlugin -> vite-plugin-purgecss
MiniCssExtractPlugin - це плагін для Webpack, який витягує CSS в окремі файли. Він створює файл CSS для кожного JavaScript-файлу, який містить CSS. Зазвичай він використовується у production середовищі для ефективнішого завантаження CSS. Перевага цього методу подвійна. По-перше, це дозволяє браузеру кешувати CSS окремо. По-друге, це запобігає появі нестилізованого контенту, оскільки CSS більше не вбудовується у файли JavaScript і може завантажуватися паралельно з JavaScript, що призводить до прискорення завантаження сторінки.
У Vite ви можете використовувати vite-plugin-purgecss:
npm install --save-dev vite-plugin-html-purgecss
Використовуйте плагін у vite.config.js ось так:
import htmlPurge from 'vite-plugin-html-purgecss'
export default {
plugins: [
htmlPurge(),
]
}
CopyWebpackPlugin -> vite-plugin-static-copy
CopyWebpackPlugin використовується для копіювання окремих файлів або цілих каталогів до каталогу збірки. У Vite є подібний плагін з назвою vite-plugin-static-copy:
npm install --save-dev vite-plugin-static-copy
Вставте наступний код у vite.config.js:
import { viteStaticCopy } from 'vite-plugin-static-copy'
export default {
plugins: [
viteStaticCopy({
targets: [
{
src: 'bin/example.wasm',
dest: 'wasm-files'
}
]
})
]
}
DefinePlugin -> define()
У Webpack DefinePlugin використовується для заміни токенів у вихідному коді на їхні значення під час компіляції. Це дозволяє створювати глобальні константи, які можна налаштувати під час компіляції. У Vite ви можете досягти того ж ефекту за допомогою опції define в vite.config.js, тому плагін вам може не знадобитися:
export default defineConfig({
define: {
'process.env.NODE_ENV': JSON.stringify('production'),
},
})
Висновок
Це був простий посібник з міграції фронтенду на основі Webpack на Vite, включаючи деякі з найпопулярніших плагінів Webpack.
Якщо ваш проєкт є великим, складним, зі складним процесом збірки, багатофункціональна і гнучка конфігурація Webpack може бути вашим найкращим вибором.
Якщо ж ви мігруєте невеликий або середній проєкт, то Vite має низку переваг. Його швидкість, як з точки зору запуску сервера, так і гарячої заміни модулів, може значно підвищити продуктивність розробки. Простота його конфігурації також може стати приємним бонусом, а його дизайн з використанням власних модулів ES та сумісність з сучасними фреймворками забезпечує йому хороші перспективи в майбутньому.
Перехід з Webpack на Vite вимагає ретельного планування і тестування, особливо коли йдеться про заміну плагінів або рефакторинг. Але вигоди від цього переходу можуть бути суттєвими. Vite пропонує швидше, економніше середовище розробки, що в кінцевому підсумку може призвести до більш плавного та ефективного робочого процесу розробки.
Завжди корисно стежити за розвитком інструментарію. Продовжуючи свій шлях, розгляньте також інші сучасні інструменти, такі як esbuild та Parcel, щоб знайти той, що найкраще відповідає потребам вашого проєкту.
Пам'ятайте, що важливий не сам інструмент, а те, як ви використовуєте його для досягнення своїх цілей. Webpack, Vite, esbuild і Parcel - це чудові інструменти, які допоможуть вам створювати першокласні веб-проєкти, і те, який з них краще використовувати, залежить від ваших конкретних потреб і обмежень.
Ще немає коментарів