Vite для быстрой разработки и сборки приложения

Разбираемся с Vite - как создать проект, запустить его в режиме разработки, превью и выполнить сборку. Смотрим, что предлагается для базового React-шаблона.

Мои курсы по вебу с купонами:

📢 Поддержка канала:

[rmlytdw]

Как у тебя так получается, как только я начинаю какой-то задачей заниматься, сразу видео об этом выходит))) уже не первый раз замечаю такое) Лайк!

[dmitriyanatolev]

Приятно Миша смотреть и слушать тебя .Спасибо за контент и обзор !как говорили выше, реально быстрая и Крутая штука для тестовых или пет проектов

[Virisound]

Спасибо, просто суперски объяснил. А то все говорят только, что Вита Быстрый, Быстрый, а что это я не понял. А ты: "есть -create react app- и есть -Vite- 👍Просто я только учусь

[jncbzbf]

Михаил, спасибо за ролик - для сборки небольших пет-проектов самое оно

[Fardize]

Видео супер, сам сейчас хочу попробовать перенести проект с webpack на vite

[romandeveloper]

Запиши, пожалуйста, ролик по Vite + Storybook. Сторибук странно подключается к Виту, одни ошибки сыпет, хотя делаю все идентично и согласно документации Сторибука по интеграции с Витом.
Наверное, ты посчитаешь этот ролик неполноценным, поэтому предлагаю решение - пойдем дальше и сделаем ролик Vite + Vitest( улучшенный аналог Jest ) + React Testing Library + Storybook. Как смотришь на это?) Мало людей из русского сегмента делали подобное, единицы. Почему бы не предложить своё видение на эту сферу?) К тому же, у тебя очень талантливая подача контента, будет куча плюсов. Может, в процессе, что-то и для себя новое узнаешь. Все в плюсе!)

[proletarian]

Давно его использую, webpack после него очень медленный, стоило ещё упомянуть что с ростом проекта время <<компиляции>> почти не изменяется

[DreamingDolphing]

Сейчас наверное рано его обсуждать, но в будущем turbopack заменит webpack. Надеюсь будет обзор и на него.

[STELLS]

Оч крутая штука. Надо потом будет попробовать.
И да, ждём видос по нексту 13 и сравнение турбопака и вит/вебпак.

[FoldyHro]

Классный ролик, с небольшой оговоркой. Вит под капотом использует не esbuild, а Rollup :)

[romanmed]

второй вопрос. показано как с нуляразвернуть. в этом конечно нет сложностей, все делается практически автоматически. а вот в существующий проект вместо того же вебпака ведрить, заменив сборку вебпаком на сборку вите? а тут как раз и начинаются особенности. часть из которых описана в видео. и скорость сборки проекта из нескольких строк конечно будет быстрая. я делал сборку на есбилд (как сказано в видео над которым вите является оберткой) и не заметил прироста в разы. да, если ускорение но не так как разрекламировано. надеюсь логическим продолжением будет видео по внедрению вите в существующий проект вместо вебпака.

[danyawyse]

Михаил, будет ли какой нибудь гайд, или подскажите где копать знания. Чтобы Vite настроить и полностью перейти с gulp. Как к нему подключить шрифты, оптимизацию изображений и так далее ?

[abrajmek_zalilov]

Михаил, подскажите, что за графическую тему используете? Очень не хочется кастомизировать существующую, несмотря на то что, есть моменты, которые не устраивают, вроде использования красно-кирпичного цвета и курсивного шрифта для атрибутов. Ваша кажется хорошим балансом между едкостью для глаз и удобством логического различения блоков. Спасибо.

[oklusho]

Михал, при выборе шаблона появился выбор между React - JS + SWC или просто JS. Какой лучше выбирать по вашему мнению?

[ddn]

А можете расказать про createBrowserRouter? В оф документации туториал построен на нем. Чем эта функция лучше обычного описания роутов через компоненты?

[verbs-otier-ru]

Не знаю почему люди говорят, что этот сборщик быстрый. Все проекты, которые у меня были на CRA собираются очень быстро, а однажды пришлось поработать с существующим приложением, где был бэк на python, фронт react.js и сборщик vite, и он капец как долго собирался, и ещё был неприятный момент, что страница не обновлялась после сохранения файла.

[haibova_irisha]

Привет. А ты планируешь ли видео на с использованием react redux toolkit ts ?

[POEOneLove]

Не нашел где в vite поменять путь до изображений в билде. После сборки все от корня папки dist добавляет, картинки стили и прочее.

[xGLM]

После установки не работает импорт module.css. Всё перепробовал как мог. Кто-нибудь сталкивался с таким? Хочу импортировать стили import styles from './styles/styles.module.css' и ошибка. Все пути проверил. Он именно когда применяешь стиль агрится

[sharkman]

а как насчёт turboPack который вроде как в 10 раз быстрее вита, он в нексте 13 идёт как эксперементальный наверное можно уже в реакт крутить без некста тоже