Vite для быстрой разработки и сборки приложения
ฝัง
- เผยแพร่เมื่อ 28 ก.ย. 2024
- Разбираемся с Vite - как создать проект, запустить его в режиме разработки, превью и выполнить сборку. Смотрим, что предлагается для базового React-шаблона.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru...
paypal.me/mish...
![Универсальный СТАРТОВЫЙ ШАБЛОН для твоих пэт-проектов с JS, SASS и Vite [2023]](http://i.ytimg.com/vi/W-b9fkP5mrE/mqdefault.jpg)
Как у тебя так получается, как только я начинаю какой-то задачей заниматься, сразу видео об этом выходит))) уже не первый раз замечаю такое) Лайк!
жиза нереальная) кстати, Михаил, не могли бы вы рассказать про pwa, например, как раз с использованием vite, хайповая тема)
Аналогично)))
это не у него, а у поисковых алгоритмов, которые за такими чайниками как ты следят
@@grantorino3465 мой уровень - далеко не чайник, похоже ты ошибся со своим комментарием)
Запиши, пожалуйста, ролик по Vite + Storybook. Сторибук странно подключается к Виту, одни ошибки сыпет, хотя делаю все идентично и согласно документации Сторибука по интеграции с Витом.
Наверное, ты посчитаешь этот ролик неполноценным, поэтому предлагаю решение - пойдем дальше и сделаем ролик Vite + Vitest( улучшенный аналог Jest ) + React Testing Library + Storybook. Как смотришь на это?) Мало людей из русского сегмента делали подобное, единицы. Почему бы не предложить своё видение на эту сферу?) К тому же, у тебя очень талантливая подача контента, будет куча плюсов. Может, в процессе, что-то и для себя новое узнаешь. Все в плюсе!)
тоже недавно подключал и он меня задрочил ошибками. Плюнул и свой сторибук для бедных накидал на вью
Михаил, спасибо за ролик - для сборки небольших пет-проектов самое оно
А для больших проектов Vite не подойдет? Вроде тоже нормально
Ждём видео курс про некст 13))
Мне бы хотелось, чтобы курс включал SSG и SSR
Поддерживаю предложение!
++++++++
Я даже купить его готов
Видео супер, сам сейчас хочу попробовать перенести проект с webpack на vite
Круто! Спасибо за видео.
Давно его использую, webpack после него очень медленный, стоило ещё упомянуть что с ростом проекта время почти не изменяется
Хз у меня 76 секунд билдится на Вите. Очень долго идёт Transforming всех модулей. А проект далеко на самый большой. Конфигурация такая же как на стоковом проекте.
Правда этот проект был изначально на Webpack/Vue-CLI и был мигрирован на Вит. Хз как это может повлиять на время билдинга, по-моему не должно вообще
Новый стоковый проект 3 секунды билдится
Как с интернационализацией? Не мешает ли он устанавливать i 18next?
@@uchqun3439 нормально всё, вот как раз вчера настраивал проект с локализацией
Оч крутая штука. Надо потом будет попробовать.
И да, ждём видос по нексту 13 и сравнение турбопака и вит/вебпак.
Классный ролик, с небольшой оговоркой. Вит под капотом использует не esbuild, а Rollup :)
Так и esbuild он тоже использует
в dev esbuild, в сборке rollup
Спасибо, просто суперски объяснил. А то все говорят только, что Вита Быстрый, Быстрый, а что это я не понял. А ты: "есть -create react app- и есть -Vite- 👍Просто я только учусь
Михаил лучший
второй вопрос. показано как с нуляразвернуть. в этом конечно нет сложностей, все делается практически автоматически. а вот в существующий проект вместо того же вебпака ведрить, заменив сборку вебпаком на сборку вите? а тут как раз и начинаются особенности. часть из которых описана в видео. и скорость сборки проекта из нескольких строк конечно будет быстрая. я делал сборку на есбилд (как сказано в видео над которым вите является оберткой) и не заметил прироста в разы. да, если ускорение но не так как разрекламировано. надеюсь логическим продолжением будет видео по внедрению вите в существующий проект вместо вебпака.
Не нашел где в vite поменять путь до изображений в билде. После сборки все от корня папки dist добавляет, картинки стили и прочее.
а тяжело ли перенести проект с вебпака на vite?
А можете расказать про createBrowserRouter? В оф документации туториал построен на нем. Чем эта функция лучше обычного описания роутов через компоненты?
Только новые механизмы (createBrowserRouter, createMemoryRouter и createHashRouter) поддерживают новые фичи, так называемые *data APIs* - loaders, actions, fetchers и т.д.
@@victormog ну это я читал. Но я не понимаю что это за функция и зачем она нужна.
Вместо описания роутов через , в эту функцию передается масив обьектов, в котором каждый обьект это роут и, потом просто пропысываешь или как?
@@ddn6146 там же хороший пример - строишь "дерево" объектов-эндпоинтов. Хорошо видна структура вложенности.
@@victormog в реальном приложении тоже можно делать роутинг через createBrowserRouter?
@@ddn6146 а с чем связаны сомнения?.. 🤔
Михал, при выборе шаблона появился выбор между React - JS + SWC или просто JS. Какой лучше выбирать по вашему мнению?
SWC обычно собирает побыстрее.
После установки не работает импорт module.css. Всё перепробовал как мог. Кто-нибудь сталкивался с таким? Хочу импортировать стили import styles from './styles/styles.module.css' и ошибка. Все пути проверил. Он именно когда применяешь стиль агрится
Михаил, будет ли какой нибудь гайд, или подскажите где копать знания. Чтобы Vite настроить и полностью перейти с gulp. Как к нему подключить шрифты, оптимизацию изображений и так далее ?
Как и в случае с gulp, всевозможные преобразования решаются преимущественно за счет плагинов. Вот, например, для работы с изображениями github.com/vbenjs/vite-plugin-imagemin
У меня на ванильно сборке цсс модули не работают. React+TS. Кто может подсказать?
Михаил, подскажите пожалуйста, что за тема у вас стоит в редакторе?
CodeSandbox 2021
линтер сейчас есть уже. сними обзор по новой версии vite
мало, Миша, стал выпускать контента чет( груснинька
что такое storybook?
Это отдельный инструмент, который очень удобен для изолированной разработки компонентов. У меня на канале есть вводное видео по Storybook.
Напиши сетап вс кода, тема + тема иконок. Спс
Это убийца Webpack?
Почему же сразу "убийца" =D Вебпак так глубоко укоренился в инфраструктуре, что он еще надолго с нами. Плюс появление качественных альтернатив должно способствовать и развитию самого вебпака.
sass это как раз dev зависимость, ты че, в продакшен css идет , а не sass
Пробовал Vite. Спустя какое-то время он стал уходить в цикл - тупо не заканчивалась пересборка...
Т.ч. пришлось тратить время на возвращение к CRA.
Ватоадмин занялся программированием похоже
подскажите где проблема, ничего не меняю проект реактжс+тс из коробки чистый самого вайта в дев моде все ок, но когда билджу проект все пути к картинкам стилям жс все битое примером в сбилдженом индекс штмль пути такие /assets/js/index-b93aefb3.js если я убираю слешв начале вот так assets/js/index-b93aefb3.js все ок, как исправить эту проблему, пытался заюзать опцию root: "./src" и переместить индекс штмль в папку src, но все равно пути битые
А почему вы считаете вариант со слешем битым? Это абсолютная ссылка на корень сайта, при запуске приложения на веб-сервере (а не простом открытии html файла) должно работать корректно.
@@mishanep это походу проблема в плагине вскода лайв сервер, когда запускаю сбилдженый код через него он показывает все битое, если запускаю через вайт превью все ок :)
В конфиге надо указать базовый путь. base:”./“
Приятно Миша смотреть и слушать тебя .Спасибо за контент и обзор !как говорили выше,реально быстрая и Крутая штука для тестовых или пет проектов
Сейчас наверное рано его обсуждать, но в будущем turbopack заменит webpack. Надеюсь будет обзор и на него.
А webpack тоже медленный?
Как сделать alias для абсолютных путей в vite?
В два этапа - настроить конфиг vite и tsconfig dev.to/avxkim/setup-path-aliases-w-react-vite-ts-poa
Не знаю почему люди говорят, что этот сборщик быстрый. Все проекты, которые у меня были на CRA собираются очень быстро, а однажды пришлось поработать с существующим приложением, где был бэк на python, фронт react.js и сборщик vite, и он капец как долго собирался, и ещё был неприятный момент, что страница не обновлялась после сохранения файла.
0:09 Вайт его называют неграмотные люди, оно даже по-английский произносится как veetuh но никак не а вайт.
Да вы грамматику английского видимо не знаете!)
@@Александр-с5э8р ну может подскажете тогда как правильно ? Словари говорят что vite - [вит] или по выдуманной вами грамматике milk - майлк, а не милк, victim - вайктим? visible - вайсибл?
а как насчёт turboPack который вроде как в 10 раз быстрее вита, он в нексте 13 идёт как эксперементальный наверное можно уже в реакт крутить без некста тоже
Привет. А ты планируешь ли видео на с использованием react redux toolkit ts ?
Уже
th-cam.com/video/uRlh6-tHWEE/w-d-xo.html
th-cam.com/video/KalDm1KwU5A/w-d-xo.html
Это я уже смотрела ))) 🤣 а в дальнейшем еще не планируется ?
Как поменять host 5173 на 3000
Сделайте пожалуйста курс по Vue!
Спасибо!
Михаил, подскажите, что за графическую тему используете? Очень не хочется кастомизировать существующую, несмотря на то что, есть моменты, которые не устраивают, вроде использования красно-кирпичного цвета и курсивного шрифта для атрибутов. Ваша кажется хорошим балансом между едкостью для глаз и удобством логического различения блоков. Спасибо.
CodeSandbox 2021
Михаил, спасибо огромное!))
вот не понимаю, почему для реакт из коробки не могу сделать сразу линтеры, алиасы и претир хотяб?!
во вью из коробки уже сразу можно настроить и роутинг, и все прочее, а реакт как обычно пустой, даже в вит, что обидно.
Потому что react это только библиотека, а vue или какой-нибудь angular это фреймворки
Круто!)
Я в вебпаке с дев сервера использую прокси к REST и проксирую запросы и кусисы, Vite такое может?
Я и в вебпаке прокси не использовал =) Поэтому и тут не подскажу.
А как в Vite поставить обнуляющие стили? Или самому нужно прописывать?
можешь просто через npm поставить reset css или normalize css, ну а потом импортировать в css
Привет Михаил! А если я хочу сделать проект с бэком и фронтом на TS, как мне с помощью Vite собирать Node + React? Или он только для морды? Я сборщиками никогда не пользовался, всегда делал через cra и что-то запутался как мне и Бэк и фронт запустить а потом и задеплоить куда-нибудь 🥺
😿
vite конечно хорошо. но это монстр с излишней функциональностью. достаточно просто esbuild. вот если бы по нему получилось видео сделать.
излишняя функциональность это какая?
@@nade3282 излишняя 😛
)))
@@nade3282 для маленького проекта это уже совсем излишне. нет смысла на 20тонном грузовике везти 10кг груза.
@@romanmed9035 ты по факту скажи что излишне то, ЧТО ИЗЛИШНЕ
Рассказать не рассказав это талант...
У меня Vite требует удалить файлы из существующего проекта! Ни в какую он не хочет работать с имеющимися файлами. Т.е., а зачем такой сборщик вообще??? Хотя мне явно никто не ответит... это суть программистов такая -- не отвечать на вопросы...
Что за файлы ? что бы ответили нужно подробней описать проблему
Так, сразу и по делу:
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) Скорее всего хайп и способ пропиариться и заработать. Я скептически отношусь к такому балагану, так как были уже продукты, но скорее всего вы о них даже не вспомните.
Делаем выводы.
Ясно, душнила
eto konechno pzdc)))
почему у меня 9 ошибок в файле tsconfig.node.json
Vite это крутая штука. Как и всё что делает Эван Ю.