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

Разбираемся с Vite - как создать проект, запустить его в режиме разработки, превью и выполнить сборку. Смотрим, что предлагается для базового React-шаблона.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

[@user-rm1ly8td9w]

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

[@user-sx4zn5pf7x]

жиза нереальная) кстати, Михаил, не могли бы вы рассказать про pwa, например, как раз с использованием vite, хайповая тема)

[@andreass1842]

Аналогично)))

[@grantorino3465]

это не у него, а у поисковых алгоритмов, которые за такими чайниками как ты следят

[@user-rm1ly8td9w]

@@grantorino3465 мой уровень - далеко не чайник, похоже ты ошибся со своим комментарием)

[@dmitriyanatolev2518]

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

[@user-jn5cb4zb7f]

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

[@user-th6kk9kd8h]

Круто! Спасибо за видео.

[@botanik-lena]

Михаил, спасибо огромное!))

[@Fardize]

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

[@STELLS541]

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

[@user-nj9yu4dd8p]

Спасибо!

[@Virisound]

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

[@danber1893]

Круто!)

[@user-gz4qu1bp2f]

Ждём видео курс про некст 13))

[@Alexey_Ivanov]

Мне бы хотелось, чтобы курс включал SSG и SSR

[@ilyaprotsenko1023]

Поддерживаю предложение!

[@aminjon1065]

++++++++

[@m.g.0416]

Я даже купить его готов

[@DreamingDolphing]

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

[@user-tb3mm6dl3z]

Михаил лучший

[@romanmed9035]

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

[@xGL00M]

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

[@romandeveloper7720]

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

[@chikenmacnugget]

тоже недавно подключал и он меня задрочил ошибками. Плюнул и свой сторибук для бедных накидал на вью

[@user-ok9lu4sh8o]

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

[@mishanep]

SWC обычно собирает побыстрее.

[@abrajmek_zalilov]

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

[@mishanep]

CodeSandbox 2021

[@danyawyse1933]

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

[@mishanep]

Как и в случае с gulp, всевозможные преобразования решаются преимущественно за счет плагинов. Вот, например, для работы с изображениями github.com/vbenjs/vite-plugin-imagemin

[@zmmr013]

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

[@Kosch566]

Привет Михаил! А если я хочу сделать проект с бэком и фронтом на TS, как мне с помощью Vite собирать Node + React? Или он только для морды? Я сборщиками никогда не пользовался, всегда делал через cra и что-то запутался как мне и Бэк и фронт запустить а потом и задеплоить куда-нибудь 🥺

[@astkh4381]

😿

[@haibova_irisha]

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

[@mishanep]

Уже kzbin.info/www/bejne/q4PPmWljqa2Ke6c kzbin.info/www/bejne/gZLPdaBngNyIa6M

[@haibova_irisha]

Это я уже смотрела ))) 🤣 а в дальнейшем еще не планируется ?

[@user-sg9fo5fg1u]

У меня на ванильно сборке цсс модули не работают. React+TS. Кто может подсказать?

[@sharkman6434]

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

[@etemax]

а тяжело ли перенести проект с вебпака на vite?

[@ddn6146]

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

[@victormog]

Только новые механизмы (createBrowserRouter, createMemoryRouter и createHashRouter) поддерживают новые фичи, так называемые *data APIs* - loaders, actions, fetchers и т.д.

[@ddn6146]

@@victormog ну это я читал. Но я не понимаю что это за функция и зачем она нужна. Вместо описания роутов через , в эту функцию передается масив обьектов, в котором каждый обьект это роут и, потом просто пропысываешь или как?

[@victormog]

@@ddn6146 там же хороший пример - строишь "дерево" объектов-эндпоинтов. Хорошо видна структура вложенности.

[@ddn6146]

@@victormog в реальном приложении тоже можно делать роутинг через createBrowserRouter?

[@victormog]

@@ddn6146 а с чем связаны сомнения?.. 🤔

[@proletarian]

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

[@theseangle]

Хз у меня 76 секунд билдится на Вите. Очень долго идёт Transforming всех модулей. А проект далеко на самый большой. Конфигурация такая же как на стоковом проекте. Правда этот проект был изначально на Webpack/Vue-CLI и был мигрирован на Вит. Хз как это может повлиять на время билдинга, по-моему не должно вообще

[@theseangle]

Новый стоковый проект 3 секунды билдится

[@uchqun3439]

Как с интернационализацией? Не мешает ли он устанавливать i 18next?

[@proletarian]

@@uchqun3439 нормально всё, вот как раз вчера настраивал проект с локализацией

[@user-wc9kq3mi4o]

Сделайте пожалуйста курс по Vue!

[@dkfire7636]

Михаил, подскажите пожалуйста, что за тема у вас стоит в редакторе?

[@mishanep]

CodeSandbox 2021

[@FoldyH3ro]

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

[@mukkumayc7949]

Так и esbuild он тоже использует

[@sno-oze]

в dev esbuild, в сборке rollup

[@user-xs8or4wq4l]

А как в Vite поставить обнуляющие стили? Или самому нужно прописывать?

[@user-uv1dt7eo1c]

можешь просто через npm поставить reset css или normalize css, ну а потом импортировать в css

[@user-qu8xm4un3u]

линтер сейчас есть уже. сними обзор по новой версии vite

[@user-jx8zx8uk2m]

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

[@aleksprimetv]

Я в вебпаке с дев сервера использую прокси к REST и проксирую запросы и кусисы, Vite такое может?

[@mishanep]

Я и в вебпаке прокси не использовал =) Поэтому и тут не подскажу.

[@hopmnc]

Напиши сетап вс кода, тема + тема иконок. Спс

[@user-nv5de5or3r]

Как поменять host 5173 на 3000

[@unicoxr5tj417]

мало, Миша, стал выпускать контента чет( груснинька

[@user-mu5to9rn1i]

Как сделать alias для абсолютных путей в vite?

[@mishanep]

В два этапа - настроить конфиг vite и tsconfig dev.to/avxkim/setup-path-aliases-w-react-vite-ts-poa

[@zhandoszh]

что такое storybook?

[@mishanep]

Это отдельный инструмент, который очень удобен для изолированной разработки компонентов. У меня на канале есть вводное видео по Storybook.

[@STELLS541]

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

[@tyt-no-udee-nick]

Потому что react это только библиотека, а vue или какой-нибудь angular это фреймворки

[@romanmed9035]

vite конечно хорошо. но это монстр с излишней функциональностью. достаточно просто esbuild. вот если бы по нему получилось видео сделать.

[@nade3282]

излишняя функциональность это какая?

[@victormog]

@@nade3282 излишняя 😛

[@user-rm1ly8td9w]

)))

[@romanmed9035]

@@nade3282 для маленького проекта это уже совсем излишне. нет смысла на 20тонном грузовике везти 10кг груза.

[@nade3282]

@@romanmed9035 ты по факту скажи что излишне то, ЧТО ИЗЛИШНЕ

[@AntonioBenderas]

Это убийца Webpack?

[@mishanep]

Почему же сразу "убийца" =D Вебпак так глубоко укоренился в инфраструктуре, что он еще надолго с нами. Плюс появление качественных альтернатив должно способствовать и развитию самого вебпака.

[@victormog]

Пробовал Vite. Спустя какое-то время он стал уходить в цикл - тупо не заканчивалась пересборка... Т.ч. пришлось тратить время на возвращение к CRA.

[@grantorino3465]

sass это как раз dev зависимость, ты че, в продакшен css идет , а не sass

[@serenitiSever]

Так, сразу и по делу: 1) У меня очень хорошие наушники, и дети орут так что сложно воспринимать материал по нормальному, неужели нельзя было дверь закрыть или записать в студии без постороннего шума, или удалить шум из аудиодорожки, есть же современные инструменты которые собирают модель шума и удаляют его в один клик. 2) Про Vite узнал через Bootstrap 5, и я как понимаю Vue.js приложил к этому руку, в спонсорке оказался сам TailWind CSS ! Я к чему, то что там засвечены и другие крупные компании, так что Vite может нагнуть webpack, как когда-то загнули gulp и его популярность резко упала. НО! Есть же webpack 5. Это не 4 версия. 3) Скорость компиляции зависит от количества комментариев, тришейкинга, ошибок (по этой причине используют TypeScript) и количестве кода. (вот почему так важно не повторять и переиспользовать куски кода, чтобы проект не разрастался в бобовое гигантское дерево) 4) Никто не будет использовать Vite, только потому что он появился, везде требуется знание webpack и точка. 5) В реальных боевых проектах, на продакшене, никто не будет экспериментировать с новыми инструментами, нет смысла, проект работает. Лишняя трата времени и денег (По аналогии давно бы все перешли на Deno.js) 6) Скорее всего Vite будут использовать в стартапах и новых проектах, либо новичками. В данной ситуации риск минимальный. 7) Скорее всего хайп и способ пропиариться и заработать. Я скептически отношусь к такому балагану, так как были уже продукты, но скорее всего вы о них даже не вспомните. Делаем выводы.

[@user-kl5hd9vw2x]

Ясно, душнила

[@yunggod6788]

eto konechno pzdc)))

[@userman6193]

У меня Vite требует удалить файлы из существующего проекта! Ни в какую он не хочет работать с имеющимися файлами. Т.е., а зачем такой сборщик вообще??? Хотя мне явно никто не ответит... это суть программистов такая -- не отвечать на вопросы...

[@Mike37373]

Что за файлы ? что бы ответили нужно подробней описать проблему

[@serhioramires3166]

Рассказать не рассказав это талант...

[@michaelmyers717]

Ватоадмин занялся программированием похоже

[@virtuoz-ru]

Vite это крутая штука. Как и всё что делает Эван Ю.

[@lesters]

подскажите где проблема, ничего не меняю проект реактжс+тс из коробки чистый самого вайта в дев моде все ок, но когда билджу проект все пути к картинкам стилям жс все битое примером в сбилдженом индекс штмль пути такие /assets/js/index-b93aefb3.js если я убираю слешв начале вот так assets/js/index-b93aefb3.js все ок, как исправить эту проблему, пытался заюзать опцию root: "./src" и переместить индекс штмль в папку src, но все равно пути битые

[@mishanep]

А почему вы считаете вариант со слешем битым? Это абсолютная ссылка на корень сайта, при запуске приложения на веб-сервере (а не простом открытии html файла) должно работать корректно.

[@lesters]

@@mishanep это походу проблема в плагине вскода лайв сервер, когда запускаю сбилдженый код через него он показывает все битое, если запускаю через вайт превью все ок :)

[@tamusuanchik6465]

почему у меня 9 ошибок в файле tsconfig.node.json