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

  Переглядів 59,187

Михаил Непомнящий

Михаил Непомнящий

Рік тому

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

КОМЕНТАРІ: 110
@user-rm1ly8td9w
@user-rm1ly8td9w Рік тому
Как у тебя так получается, как только я начинаю какой-то задачей заниматься, сразу видео об этом выходит))) уже не первый раз замечаю такое) Лайк!
@user-sx4zn5pf7x
@user-sx4zn5pf7x Рік тому
жиза нереальная) кстати, Михаил, не могли бы вы рассказать про pwa, например, как раз с использованием vite, хайповая тема)
@andreass1842
@andreass1842 Рік тому
Аналогично)))
@grantorino3465
@grantorino3465 Рік тому
это не у него, а у поисковых алгоритмов, которые за такими чайниками как ты следят
@user-rm1ly8td9w
@user-rm1ly8td9w Рік тому
@@grantorino3465 мой уровень - далеко не чайник, похоже ты ошибся со своим комментарием)
@dmitriyanatolev2518
@dmitriyanatolev2518 Рік тому
Приятно Миша смотреть и слушать тебя .Спасибо за контент и обзор !как говорили выше,реально быстрая и Крутая штука для тестовых или пет проектов
@user-jn5cb4zb7f
@user-jn5cb4zb7f Рік тому
Михаил, спасибо за ролик - для сборки небольших пет-проектов самое оно
@user-th6kk9kd8h
@user-th6kk9kd8h Рік тому
Круто! Спасибо за видео.
@Fardize
@Fardize 7 місяців тому
Видео супер, сам сейчас хочу попробовать перенести проект с webpack на vite
@botanik-lena
@botanik-lena Рік тому
Михаил, спасибо огромное!))
@user-nj9yu4dd8p
@user-nj9yu4dd8p 8 місяців тому
Спасибо!
@STELLS541
@STELLS541 Рік тому
Оч крутая штука. Надо потом будет попробовать. И да, ждём видос по нексту 13 и сравнение турбопака и вит/вебпак.
@Virisound
@Virisound Рік тому
Спасибо, просто суперски объяснил. А то все говорят только, что Вита Быстрый, Быстрый, а что это я не понял. А ты: "есть -create react app- и есть -Vite- 👍Просто я только учусь
@danber1893
@danber1893 Рік тому
Круто!)
@user-gz4qu1bp2f
@user-gz4qu1bp2f Рік тому
Ждём видео курс про некст 13))
@Alexey_Ivanov
@Alexey_Ivanov Рік тому
Мне бы хотелось, чтобы курс включал SSG и SSR
@ilyaprotsenko1023
@ilyaprotsenko1023 Рік тому
Поддерживаю предложение!
@aminjon1065
@aminjon1065 Рік тому
++++++++
@m.g.0416
@m.g.0416 Рік тому
Я даже купить его готов
@user-tb3mm6dl3z
@user-tb3mm6dl3z 2 місяці тому
Михаил лучший
@DreamingDolphing
@DreamingDolphing Рік тому
Сейчас наверное рано его обсуждать, но в будущем turbopack заменит webpack. Надеюсь будет обзор и на него.
@xGL00M
@xGL00M 7 місяців тому
После установки не работает импорт module.css. Всё перепробовал как мог. Кто-нибудь сталкивался с таким? Хочу импортировать стили import styles from './styles/styles.module.css' и ошибка. Все пути проверил. Он именно когда применяешь стиль агрится
@danyawyse1933
@danyawyse1933 Рік тому
Михаил, будет ли какой нибудь гайд, или подскажите где копать знания. Чтобы Vite настроить и полностью перейти с gulp. Как к нему подключить шрифты, оптимизацию изображений и так далее ?
@mishanep
@mishanep Рік тому
Как и в случае с gulp, всевозможные преобразования решаются преимущественно за счет плагинов. Вот, например, для работы с изображениями github.com/vbenjs/vite-plugin-imagemin
@romanmed9035
@romanmed9035 Рік тому
второй вопрос. показано как с нуляразвернуть. в этом конечно нет сложностей, все делается практически автоматически. а вот в существующий проект вместо того же вебпака ведрить, заменив сборку вебпаком на сборку вите? а тут как раз и начинаются особенности. часть из которых описана в видео. и скорость сборки проекта из нескольких строк конечно будет быстрая. я делал сборку на есбилд (как сказано в видео над которым вите является оберткой) и не заметил прироста в разы. да, если ускорение но не так как разрекламировано. надеюсь логическим продолжением будет видео по внедрению вите в существующий проект вместо вебпака.
@romandeveloper7720
@romandeveloper7720 Рік тому
Запиши, пожалуйста, ролик по Vite + Storybook. Сторибук странно подключается к Виту, одни ошибки сыпет, хотя делаю все идентично и согласно документации Сторибука по интеграции с Витом. Наверное, ты посчитаешь этот ролик неполноценным, поэтому предлагаю решение - пойдем дальше и сделаем ролик Vite + Vitest( улучшенный аналог Jest ) + React Testing Library + Storybook. Как смотришь на это?) Мало людей из русского сегмента делали подобное, единицы. Почему бы не предложить своё видение на эту сферу?) К тому же, у тебя очень талантливая подача контента, будет куча плюсов. Может, в процессе, что-то и для себя новое узнаешь. Все в плюсе!)
@chikenmacnugget
@chikenmacnugget Рік тому
тоже недавно подключал и он меня задрочил ошибками. Плюнул и свой сторибук для бедных накидал на вью
@abrajmek_zalilov
@abrajmek_zalilov 10 місяців тому
Михаил, подскажите, что за графическую тему используете? Очень не хочется кастомизировать существующую, несмотря на то что, есть моменты, которые не устраивают, вроде использования красно-кирпичного цвета и курсивного шрифта для атрибутов. Ваша кажется хорошим балансом между едкостью для глаз и удобством логического различения блоков. Спасибо.
@mishanep
@mishanep 10 місяців тому
CodeSandbox 2021
@ddn6146
@ddn6146 Рік тому
А можете расказать про createBrowserRouter? В оф документации туториал построен на нем. Чем эта функция лучше обычного описания роутов через компоненты?
@victormog
@victormog Рік тому
Только новые механизмы (createBrowserRouter, createMemoryRouter и createHashRouter) поддерживают новые фичи, так называемые *data APIs* - loaders, actions, fetchers и т.д.
@ddn6146
@ddn6146 Рік тому
@@victormog ну это я читал. Но я не понимаю что это за функция и зачем она нужна. Вместо описания роутов через , в эту функцию передается масив обьектов, в котором каждый обьект это роут и, потом просто пропысываешь или как?
@victormog
@victormog Рік тому
@@ddn6146 там же хороший пример - строишь "дерево" объектов-эндпоинтов. Хорошо видна структура вложенности.
@ddn6146
@ddn6146 Рік тому
@@victormog в реальном приложении тоже можно делать роутинг через createBrowserRouter?
@victormog
@victormog Рік тому
@@ddn6146 а с чем связаны сомнения?.. 🤔
@user-ok9lu4sh8o
@user-ok9lu4sh8o 6 місяців тому
Михал, при выборе шаблона появился выбор между React - JS + SWC или просто JS. Какой лучше выбирать по вашему мнению?
@mishanep
@mishanep 6 місяців тому
SWC обычно собирает побыстрее.
@haibova_irisha
@haibova_irisha Рік тому
Привет. А ты планируешь ли видео на с использованием react redux toolkit ts ?
@mishanep
@mishanep Рік тому
Уже ukposts.info/have/v-deo/rYKdnGxkq36Ipnk.html ukposts.info/have/v-deo/g5GdeKNogq2GlnU.html
@haibova_irisha
@haibova_irisha Рік тому
Это я уже смотрела ))) 🤣 а в дальнейшем еще не планируется ?
@zmmr013
@zmmr013 4 місяці тому
Не нашел где в vite поменять путь до изображений в билде. После сборки все от корня папки dist добавляет, картинки стили и прочее.
@user-wc9kq3mi4o
@user-wc9kq3mi4o 10 місяців тому
Сделайте пожалуйста курс по Vue!
@proletarian
@proletarian Рік тому
Давно его использую, webpack после него очень медленный, стоило ещё упомянуть что с ростом проекта время почти не изменяется
@theseangle
@theseangle Рік тому
Хз у меня 76 секунд билдится на Вите. Очень долго идёт Transforming всех модулей. А проект далеко на самый большой. Конфигурация такая же как на стоковом проекте. Правда этот проект был изначально на Webpack/Vue-CLI и был мигрирован на Вит. Хз как это может повлиять на время билдинга, по-моему не должно вообще
@theseangle
@theseangle Рік тому
Новый стоковый проект 3 секунды билдится
@uchqun3439
@uchqun3439 Рік тому
Как с интернационализацией? Не мешает ли он устанавливать i 18next?
@proletarian
@proletarian Рік тому
@@uchqun3439 нормально всё, вот как раз вчера настраивал проект с локализацией
@Kosch566
@Kosch566 Рік тому
Привет Михаил! А если я хочу сделать проект с бэком и фронтом на TS, как мне с помощью Vite собирать Node + React? Или он только для морды? Я сборщиками никогда не пользовался, всегда делал через cra и что-то запутался как мне и Бэк и фронт запустить а потом и задеплоить куда-нибудь 🥺
@astkh4381
@astkh4381 Рік тому
😿
@user-sg9fo5fg1u
@user-sg9fo5fg1u 10 місяців тому
У меня на ванильно сборке цсс модули не работают. React+TS. Кто может подсказать?
@user-xs8or4wq4l
@user-xs8or4wq4l Рік тому
А как в Vite поставить обнуляющие стили? Или самому нужно прописывать?
@user-uv1dt7eo1c
@user-uv1dt7eo1c 4 місяці тому
можешь просто через npm поставить reset css или normalize css, ну а потом импортировать в css
@dkfire7636
@dkfire7636 Рік тому
Михаил, подскажите пожалуйста, что за тема у вас стоит в редакторе?
@mishanep
@mishanep Рік тому
CodeSandbox 2021
@sharkman6434
@sharkman6434 9 місяців тому
а как насчёт turboPack который вроде как в 10 раз быстрее вита, он в нексте 13 идёт как эксперементальный наверное можно уже в реакт крутить без некста тоже
@user-qu8xm4un3u
@user-qu8xm4un3u Рік тому
линтер сейчас есть уже. сними обзор по новой версии vite
@FoldyH3ro
@FoldyH3ro Рік тому
Классный ролик, с небольшой оговоркой. Вит под капотом использует не esbuild, а Rollup :)
@mukkumayc7949
@mukkumayc7949 Рік тому
Так и esbuild он тоже использует
@sno-oze
@sno-oze Рік тому
в dev esbuild, в сборке rollup
@unicoxr5tj417
@unicoxr5tj417 Рік тому
мало, Миша, стал выпускать контента чет( груснинька
@etemax
@etemax Місяць тому
а тяжело ли перенести проект с вебпака на vite?
@user-mu5to9rn1i
@user-mu5to9rn1i Рік тому
Как сделать alias для абсолютных путей в vite?
@mishanep
@mishanep Рік тому
В два этапа - настроить конфиг vite и tsconfig dev.to/avxkim/setup-path-aliases-w-react-vite-ts-poa
@aleksprimetv
@aleksprimetv Рік тому
Я в вебпаке с дев сервера использую прокси к REST и проксирую запросы и кусисы, Vite такое может?
@mishanep
@mishanep Рік тому
Я и в вебпаке прокси не использовал =) Поэтому и тут не подскажу.
@user-nv5de5or3r
@user-nv5de5or3r Рік тому
Как поменять host 5173 на 3000
@hopmnc
@hopmnc Рік тому
Напиши сетап вс кода, тема + тема иконок. Спс
@user-jx8zx8uk2m
@user-jx8zx8uk2m 4 місяці тому
Не знаю почему люди говорят, что этот сборщик быстрый. Все проекты, которые у меня были на CRA собираются очень быстро, а однажды пришлось поработать с существующим приложением, где был бэк на python, фронт react.js и сборщик vite, и он капец как долго собирался, и ещё был неприятный момент, что страница не обновлялась после сохранения файла.
@zhandoszh
@zhandoszh 8 місяців тому
что такое storybook?
@mishanep
@mishanep 8 місяців тому
Это отдельный инструмент, который очень удобен для изолированной разработки компонентов. У меня на канале есть вводное видео по Storybook.
@STELLS541
@STELLS541 Рік тому
вот не понимаю, почему для реакт из коробки не могу сделать сразу линтеры, алиасы и претир хотяб?! во вью из коробки уже сразу можно настроить и роутинг, и все прочее, а реакт как обычно пустой, даже в вит, что обидно.
@tyt-no-udee-nick
@tyt-no-udee-nick Рік тому
Потому что react это только библиотека, а vue или какой-нибудь angular это фреймворки
@romanmed9035
@romanmed9035 Рік тому
vite конечно хорошо. но это монстр с излишней функциональностью. достаточно просто esbuild. вот если бы по нему получилось видео сделать.
@nade3282
@nade3282 Рік тому
излишняя функциональность это какая?
@victormog
@victormog Рік тому
@@nade3282 излишняя 😛
@user-rm1ly8td9w
@user-rm1ly8td9w Рік тому
)))
@romanmed9035
@romanmed9035 Рік тому
@@nade3282 для маленького проекта это уже совсем излишне. нет смысла на 20тонном грузовике везти 10кг груза.
@nade3282
@nade3282 Рік тому
@@romanmed9035 ты по факту скажи что излишне то, ЧТО ИЗЛИШНЕ
@AntonioBenderas
@AntonioBenderas Рік тому
Это убийца Webpack?
@mishanep
@mishanep Рік тому
Почему же сразу "убийца" =D Вебпак так глубоко укоренился в инфраструктуре, что он еще надолго с нами. Плюс появление качественных альтернатив должно способствовать и развитию самого вебпака.
@virtuoz-ru
@virtuoz-ru Рік тому
Vite это крутая штука. Как и всё что делает Эван Ю.
@victormog
@victormog Рік тому
Пробовал Vite. Спустя какое-то время он стал уходить в цикл - тупо не заканчивалась пересборка... Т.ч. пришлось тратить время на возвращение к CRA.
@serenitiSever
@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
@user-kl5hd9vw2x Рік тому
Ясно, душнила
@yunggod6788
@yunggod6788 Рік тому
eto konechno pzdc)))
@grantorino3465
@grantorino3465 Рік тому
sass это как раз dev зависимость, ты че, в продакшен css идет , а не sass
@michaelmyers717
@michaelmyers717 Рік тому
Ватоадмин занялся программированием похоже
@userman6193
@userman6193 Рік тому
У меня Vite требует удалить файлы из существующего проекта! Ни в какую он не хочет работать с имеющимися файлами. Т.е., а зачем такой сборщик вообще??? Хотя мне явно никто не ответит... это суть программистов такая -- не отвечать на вопросы...
@Mike37373
@Mike37373 6 місяців тому
Что за файлы ? что бы ответили нужно подробней описать проблему
@serhioramires3166
@serhioramires3166 4 місяці тому
Рассказать не рассказав это талант...
@tamusuanchik6465
@tamusuanchik6465 Рік тому
почему у меня 9 ошибок в файле tsconfig.node.json
@lesters
@lesters 10 місяців тому
подскажите где проблема, ничего не меняю проект реактжс+тс из коробки чистый самого вайта в дев моде все ок, но когда билджу проект все пути к картинкам стилям жс все битое примером в сбилдженом индекс штмль пути такие /assets/js/index-b93aefb3.js если я убираю слешв начале вот так assets/js/index-b93aefb3.js все ок, как исправить эту проблему, пытался заюзать опцию root: "./src" и переместить индекс штмль в папку src, но все равно пути битые
@mishanep
@mishanep 10 місяців тому
А почему вы считаете вариант со слешем битым? Это абсолютная ссылка на корень сайта, при запуске приложения на веб-сервере (а не простом открытии html файла) должно работать корректно.
@lesters
@lesters 10 місяців тому
@@mishanep это походу проблема в плагине вскода лайв сервер, когда запускаю сбилдженый код через него он показывает все битое, если запускаю через вайт превью все ок :)
Невероятный Vite под микроскопом
14:51
АйТи Синяк
Переглядів 31 тис.
BRAWLER MUTATIONS WILL BREAK THE GAME! - Brawl Talk
09:34
Brawl Stars
Переглядів 25 млн
MINHA IRMÃ MALVADA CONTRA O GADGET DE TREM DE DOMINÓ 😡 #ferramenta
00:40
GADGETS VS HACKS || Random Useful Tools For your child #hacks #gadgets
00:35
Check Mouse Input in GODOT 4!! (Tutorial)
2:03
Vetro Dev
Переглядів 3
Vite Crash Course | Faster Alternative To CRA
16:24
Traversy Media
Переглядів 176 тис.
Алиасы импортов для React приложений (Vite)
8:19
Михаил Непомнящий
Переглядів 12 тис.
WebStorm 2024.1 EAP/3 review | WebStorm News | ENG Subtitles
6:54
alex lumper
Переглядів 1,1 тис.
Чем заменить Axios в 2023-м
17:12
Михаил Непомнящий
Переглядів 33 тис.
08. Сборка - Антон Кастрицкий, Никита Сидоров
1:49:20
React и Next js убивают фронтенд!
9:11
Миша Ларченко
Переглядів 39 тис.
CI CD наглядные примеры
22:08
Ulbi TV
Переглядів 260 тис.
Где твой GitHub?
0:34
Михаил Непомнящий
Переглядів 10 тис.
BRAWLER MUTATIONS WILL BREAK THE GAME! - Brawl Talk
09:34
Brawl Stars
Переглядів 25 млн