Переход с Vite на Parcel встречается реже, чем обратная миграция, однако существует ряд сценариев, в которых Parcel оказывается более подходящим решением:
Обе системы относятся к современным инструментам сборки фронтенд-приложений, однако используют разные подходы к разработке и конфигурированию.
| Возможность | Vite | Parcel |
|---|---|---|
| Dev-сервер | Да | Да |
| HMR | Да | Да |
| Конфигурация по умолчанию | Минимальная | Практически отсутствует |
| Плагины | Rollup-плагины | Трансформеры Parcel |
| Автоматическое определение ресурсов | Частично | Максимально |
| Сборка production | Rollup | Собственный пайплайн |
| Настройка через конфиг | Часто требуется | Обычно не требуется |
Перед началом миграции важно понимать фундаментальные различия между инструментами.
Во время разработки Vite использует нативные ES-модули браузера:
Исходный код
↓
Vite Dev Server
↓
ES Modules
↓
БраузерДля production-сборки применяется Rollup:
Исходный код
↓
Rollup
↓
BundleParcel использует единый механизм как для разработки, так и для сборки:
Исходный код
↓
Parcel Pipeline
↓
Трансформеры
↓
БандлыБлагодаря этому многие настройки автоматически работают одинаково во всех режимах.
Перед переносом рекомендуется проанализировать следующие компоненты проекта:
Типичный проект на Vite содержит:
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}Основное внимание следует уделить:
Пример:
import { defineConfig } from 'vite';
export default defineConfig({
resolve: {
alias: {
'@': '/src'
}
}
});Каждый элемент конфигурации необходимо проверить на наличие аналога в Parcel.
Удаление зависимостей Vite:
npm uninstall viteили
yarn remove viteУстановка Parcel:
npm install --save-dev parcelили
yarn add --dev parcelПосле установки пакет Parcel становится главным инструментом сборки проекта.
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}{
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
}
}Если точкой входа служит файл в корне проекта:
{
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
}
}project/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── main.js
│ └── App.jsx
├── index.html
└── vite.config.jsproject/
├── src/
│ ├── assets/
│ ├── components/
│ ├── main.js
│ └── App.jsx
├── index.html
└── package.jsonВо многих случаях файл vite.config.js полностью
исчезает.
resolve: {
alias: {
'@': '/src'
}
}Импорт:
import Button from '@/components/Button';В package.json:
{
"alias": {
"@": "./src"
}
}После этого импорт остается неизменным:
import Button from '@/components/Button';Это значительно упрощает миграцию большого количества файлов.
Файлы:
.env
.env.development
.env.productionИспользование:
const apiUrl = import.meta.env.VITE_API_URL;Файлы:
.env
.env.production
.env.localИспользование:
const apiUrl = process.env.API_URL;Переменная:
API_URL=https://api.example.comОдно из самых заметных изменений при миграции — отказ от объекта
import.meta.env.
console.log(import.meta.env.MODE);
console.log(import.meta.env.PROD);
console.log(import.meta.env.DEV);console.log(process.env.NODE_ENV);При необходимости дополнительные значения можно определить самостоятельно:
const isProduction =
process.env.NODE_ENV === 'production';import logo from './logo.png';<img src="/logo.png">import logo from './logo.png';<img src={logo} />Parcel автоматически анализирует зависимости ресурсов и включает их в граф сборки.
В проектах на Vite часто встречается:
new URL(
'./assets/icon.svg',
import.meta.url
).href;В Parcel это обычно не требуется.
Достаточно:
import icon from './assets/icon.svg';console.log(icon);Parcel автоматически генерирует корректный путь.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()]
});Для большинства React-проектов дополнительная настройка не нужна:
npm install react react-domФайл:
import React from 'react';
import ReactDOM from 'react-dom/client';
ReactDOM.createRoot(
document.getElementById('root')
).render(
<App />
);Parcel самостоятельно определяет JSX и выполняет необходимые преобразования.
{
"compilerOptions": {
"target": "ES2022"
}
}Parcel автоматически использует:
tsconfig.jsonНапример:
{
"compilerOptions": {
"strict": true,
"module": "ESNext"
}
}Дополнительные плагины обычно не требуются.
npm install sass.button {
color: red;
}npm install sassИмпорт:
import './styles.scss';Parcel автоматически обнаруживает Sass-файлы и запускает нужный трансформер.
export default {
css: {
postcss: './postcss.config.js'
}
};Достаточно оставить:
postcss.config.jsПример:
module.exports = {
plugins: {
autoprefixer: {}
}
};Parcel автоматически подключает конфигурацию.
import styles from './Button.module.css';Синтаксис остается тем же:
import styles from './Button.module.css';Использование:
<button className={styles.button}>
Click
</button>Дополнительная настройка отсутствует.
Одним из главных этапов миграции становится удаление конфигурации Vite.
export default defineConfig({
plugins: [],
resolve: {},
server: {},
build: {}
});Во многих проектах отсутствует какой-либо конфигурационный файл Parcel:
package.jsonParcel старается использовать соглашения вместо конфигурирования.
server: {
proxy: {
'/api': {
target: 'http://localhost:3000'
}
}
}Для подобных сценариев обычно используются:
Прямого аналога настройки из Vite в Parcel нет.
Одна из наиболее сложных частей миграции.
const modules =
import.meta.glob('./pages/*.js');Явный импорт:
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';Либо генерация списка модулей на этапе сборки сторонними инструментами.
Функциональность автоматического сканирования директорий требует отдельной переработки архитектуры.
Часто используются:
Каждый плагин необходимо проверить отдельно.
Например:
npm install vite-plugin-svgrПосле перехода обычно заменяется встроенными возможностями Parcel либо специализированными трансформерами.
import Logo from './logo.svg?react';import Logo from './logo.svg';или
<img src={Logo} />Способ использования зависит от выбранного трансформера SVG.
Сборка выполняется командой:
npm run buildParcel автоматически производит:
Ручная настройка требуется значительно реже по сравнению с экосистемой Rollup.
После завершения переноса рекомендуется проверить:
React Router
Vue Router
Angular RouterPNG
SVG
WEBP
Fonts
Video
Audio.env
.env.production
.env.localconst AdminPage = React.lazy(
() => import('./AdminPage')
);npm run buildnpm run devОшибка:
import.meta.glob is not a functionПричина:
Функция является специфичной для Vite.Решение:
Переписать механизм загрузки модулей.Ошибка:
import.meta.env is undefinedРешение:
process.env.MY_VARIABLEОшибка:
Plugin not foundПричина:
Плагин предназначен только для Rollup/Vite.Решение:
Найти аналогичный трансформер Parcel.Некоторые проекты содержат сложную конфигурацию:
build: {
rollupOptions: {
...
}
}Такие настройки приходится пересматривать полностью, поскольку Parcel не использует Rollup и не поддерживает большинство его внутренних механизмов.
import.meta.env.import.meta.glob.vite.config.js.Грамотно выполненная миграция обычно приводит к сокращению объема конфигурационного кода, уменьшению зависимости от специализированных плагинов и более широкому использованию встроенных механизмов Parcel для обработки ресурсов, трансформации исходного кода и оптимизации финальных бандлов.