tgoop.com/startpoint_dev/136
Last Update:
Как я переношу проект с Webpack 4 на Vite
Сейчас на работе мы обновляем один старый проект и решили мигрировать его с Webpack 4 на последний Vite. В два этапа: сначала dev-сборку, потом уже продакшен.
Дано
• Проект на Webpack 4, dev- и прод-сборки собираются одной конфигурацией.
• Нужно перенести dev-сборку на Vite, а прод оставить на Webpack.
• У проекта кастомный сервер на Express, который сам отдаёт HTML.
• Vite же по умолчанию использует свой собственный HTML.
1. process.env
Первым делом выяснилось, что Vite не понимает process.env (что, в целом, логично), а у нас этого добра в коде много, и менять каждый экземпляр вручную не хочется. Помог vite-plugin-environment.
2. require()
В коде использовался require() для импорта переводов и языков в highlight.js, а Vite его не поддерживает. Решила заменить на import.meta.glob() – он как раз умеет динамически подгружать файлы! Но… Webpack 4 не поддерживает import.meta.glob(), и в прод-сборке всё снова сломалось. -_-
В итоге спасло третье решение:
• Для переводов – передаю данные сразу с сервера через тег в HTML.
• Для highlight.js – пока вручную использую await import, подгружаю все нужные языки. После отказа от Webpack можно будет переехать на import.meta.glob().
3. moment.js
Старая сборка прекрасно работала с moment.js и специальными плагинами для импорта локалей и таймзон, но с Vite они так себе друзья, и заставить его подгружать всё нужное оказалось нетривиальной задачей.
Решение:
• Добавила ручной импорт локали там, где это необходимо (import 'moment/dist/locale/ru'; moment.locale('ru');).
• Но перед окончательным переходом на Vite в проде хочется полностью отказаться от moment.js и связанных с ним компонентов (react-datetime).
Выводы
Если хотите перенести dev-сборку с Webpack 4 на Vite, обратите внимание на эти вещи:
• process.env в Vite по дефолту не работает – нужен либо import.meta.env, либо плагин.
• Если в коде есть require(), Webpack и Vite не договорятся – придётся искать обходные пути.
• moment.js + Vite могут создать проблемы с локалями и таймзонами, их нужно загружать вручную.
P.S. Пока я разбиралась с этой задачей, впервые на полную использовала ChatGPT (да-да, только сейчас, в 2025-м!))). Я постоянно загружала в него ошибки, с которыми сталкивалась, и решения, которые в итоге помогли (не обязательно из его предложенных).
Отчасти благодаря этому и родился этот пост – как эксперимент. Его мне помог написать чат, имея всю предыдущую информацию. Опыт интересный, но рассказ о формате лично моего взаимодействия с ChatGPT лучше вынести в отдельный пост)
BY Настя Котова // Frontend & Node.js
Share with your friend now:
tgoop.com/startpoint_dev/136