Vite для быстрой разработки и сборки приложения
HTML-код
- Опубликовано: 29 ноя 2022
- Разбираемся с Vite - как создать проект, запустить его в режиме разработки, превью и выполнить сборку. Смотрим, что предлагается для базового React-шаблона.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep
Как у тебя так получается, как только я начинаю какой-то задачей заниматься, сразу видео об этом выходит))) уже не первый раз замечаю такое) Лайк!
жиза нереальная) кстати, Михаил, не могли бы вы рассказать про pwa, например, как раз с использованием vite, хайповая тема)
Аналогично)))
это не у него, а у поисковых алгоритмов, которые за такими чайниками как ты следят
@@grantorino3465 мой уровень - далеко не чайник, похоже ты ошибся со своим комментарием)
Приятно Миша смотреть и слушать тебя .Спасибо за контент и обзор !как говорили выше,реально быстрая и Крутая штука для тестовых или пет проектов
Михаил, спасибо за ролик - для сборки небольших пет-проектов самое оно
Круто! Спасибо за видео.
Видео супер, сам сейчас хочу попробовать перенести проект с webpack на vite
Михаил, спасибо огромное!))
Оч крутая штука. Надо потом будет попробовать.
И да, ждём видос по нексту 13 и сравнение турбопака и вит/вебпак.
Спасибо, просто суперски объяснил. А то все говорят только, что Вита Быстрый, Быстрый, а что это я не понял. А ты: "есть -create react app- и есть -Vite- 👍Просто я только учусь
Спасибо!
Круто!)
Сейчас наверное рано его обсуждать, но в будущем turbopack заменит webpack. Надеюсь будет обзор и на него.
второй вопрос. показано как с нуляразвернуть. в этом конечно нет сложностей, все делается практически автоматически. а вот в существующий проект вместо того же вебпака ведрить, заменив сборку вебпаком на сборку вите? а тут как раз и начинаются особенности. часть из которых описана в видео. и скорость сборки проекта из нескольких строк конечно будет быстрая. я делал сборку на есбилд (как сказано в видео над которым вите является оберткой) и не заметил прироста в разы. да, если ускорение но не так как разрекламировано. надеюсь логическим продолжением будет видео по внедрению вите в существующий проект вместо вебпака.
Михаил, будет ли какой нибудь гайд, или подскажите где копать знания. Чтобы Vite настроить и полностью перейти с gulp. Как к нему подключить шрифты, оптимизацию изображений и так далее ?
Как и в случае с gulp, всевозможные преобразования решаются преимущественно за счет плагинов. Вот, например, для работы с изображениями github.com/vbenjs/vite-plugin-imagemin
Ждём видео курс про некст 13))
Мне бы хотелось, чтобы курс включал SSG и SSR
Поддерживаю предложение!
++++++++
Я даже купить его готов
Михаил лучший
А можете расказать про createBrowserRouter? В оф документации туториал построен на нем. Чем эта функция лучше обычного описания роутов через компоненты?
Только новые механизмы (createBrowserRouter, createMemoryRouter и createHashRouter) поддерживают новые фичи, так называемые *data APIs* - loaders, actions, fetchers и т.д.
@@victormog ну это я читал. Но я не понимаю что это за функция и зачем она нужна.
Вместо описания роутов через , в эту функцию передается масив обьектов, в котором каждый обьект это роут и, потом просто пропысываешь или как?
@@ddn6146 там же хороший пример - строишь "дерево" объектов-эндпоинтов. Хорошо видна структура вложенности.
@@victormog в реальном приложении тоже можно делать роутинг через createBrowserRouter?
@@ddn6146 а с чем связаны сомнения?.. 🤔
Не нашел где в vite поменять путь до изображений в билде. После сборки все от корня папки dist добавляет, картинки стили и прочее.
Привет. А ты планируешь ли видео на с использованием react redux toolkit ts ?
Уже
ruclips.net/video/uRlh6-tHWEE/видео.html
ruclips.net/video/KalDm1KwU5A/видео.html
Это я уже смотрела ))) 🤣 а в дальнейшем еще не планируется ?
Михаил, подскажите, что за графическую тему используете? Очень не хочется кастомизировать существующую, несмотря на то что, есть моменты, которые не устраивают, вроде использования красно-кирпичного цвета и курсивного шрифта для атрибутов. Ваша кажется хорошим балансом между едкостью для глаз и удобством логического различения блоков. Спасибо.
CodeSandbox 2021
а как насчёт turboPack который вроде как в 10 раз быстрее вита, он в нексте 13 идёт как эксперементальный наверное можно уже в реакт крутить без некста тоже
Михал, при выборе шаблона появился выбор между React - JS + SWC или просто JS. Какой лучше выбирать по вашему мнению?
SWC обычно собирает побыстрее.
Михаил, подскажите пожалуйста, что за тема у вас стоит в редакторе?
CodeSandbox 2021
После установки не работает импорт module.css. Всё перепробовал как мог. Кто-нибудь сталкивался с таким? Хочу импортировать стили import styles from './styles/styles.module.css' и ошибка. Все пути проверил. Он именно когда применяешь стиль агрится
Привет Михаил! А если я хочу сделать проект с бэком и фронтом на TS, как мне с помощью Vite собирать Node + React? Или он только для морды? Я сборщиками никогда не пользовался, всегда делал через cra и что-то запутался как мне и Бэк и фронт запустить а потом и задеплоить куда-нибудь 🥺
😿
Запиши, пожалуйста, ролик по Vite + Storybook. Сторибук странно подключается к Виту, одни ошибки сыпет, хотя делаю все идентично и согласно документации Сторибука по интеграции с Витом.
Наверное, ты посчитаешь этот ролик неполноценным, поэтому предлагаю решение - пойдем дальше и сделаем ролик Vite + Vitest( улучшенный аналог Jest ) + React Testing Library + Storybook. Как смотришь на это?) Мало людей из русского сегмента делали подобное, единицы. Почему бы не предложить своё видение на эту сферу?) К тому же, у тебя очень талантливая подача контента, будет куча плюсов. Может, в процессе, что-то и для себя новое узнаешь. Все в плюсе!)
тоже недавно подключал и он меня задрочил ошибками. Плюнул и свой сторибук для бедных накидал на вью
Давно его использую, webpack после него очень медленный, стоило ещё упомянуть что с ростом проекта время почти не изменяется
Хз у меня 76 секунд билдится на Вите. Очень долго идёт Transforming всех модулей. А проект далеко на самый большой. Конфигурация такая же как на стоковом проекте.
Правда этот проект был изначально на Webpack/Vue-CLI и был мигрирован на Вит. Хз как это может повлиять на время билдинга, по-моему не должно вообще
Новый стоковый проект 3 секунды билдится
Как с интернационализацией? Не мешает ли он устанавливать i 18next?
@@uchqun3439 нормально всё, вот как раз вчера настраивал проект с локализацией
А как в Vite поставить обнуляющие стили? Или самому нужно прописывать?
можешь просто через npm поставить reset css или normalize css, ну а потом импортировать в css
а тяжело ли перенести проект с вебпака на vite?
У меня на ванильно сборке цсс модули не работают. React+TS. Кто может подсказать?
Я в вебпаке с дев сервера использую прокси к REST и проксирую запросы и кусисы, Vite такое может?
Я и в вебпаке прокси не использовал =) Поэтому и тут не подскажу.
Сделайте пожалуйста курс по Vue!
линтер сейчас есть уже. сними обзор по новой версии vite
Как сделать alias для абсолютных путей в vite?
В два этапа - настроить конфиг vite и tsconfig dev.to/avxkim/setup-path-aliases-w-react-vite-ts-poa
Классный ролик, с небольшой оговоркой. Вит под капотом использует не esbuild, а Rollup :)
Так и esbuild он тоже использует
в dev esbuild, в сборке rollup
мало, Миша, стал выпускать контента чет( груснинька
Напиши сетап вс кода, тема + тема иконок. Спс
Как поменять host 5173 на 3000
Не знаю почему люди говорят, что этот сборщик быстрый. Все проекты, которые у меня были на CRA собираются очень быстро, а однажды пришлось поработать с существующим приложением, где был бэк на python, фронт react.js и сборщик vite, и он капец как долго собирался, и ещё был неприятный момент, что страница не обновлялась после сохранения файла.
что такое storybook?
Это отдельный инструмент, который очень удобен для изолированной разработки компонентов. У меня на канале есть вводное видео по Storybook.
вот не понимаю, почему для реакт из коробки не могу сделать сразу линтеры, алиасы и претир хотяб?!
во вью из коробки уже сразу можно настроить и роутинг, и все прочее, а реакт как обычно пустой, даже в вит, что обидно.
Потому что react это только библиотека, а vue или какой-нибудь angular это фреймворки
vite конечно хорошо. но это монстр с излишней функциональностью. достаточно просто esbuild. вот если бы по нему получилось видео сделать.
излишняя функциональность это какая?
@@nade3282 излишняя 😛
)))
@@nade3282 для маленького проекта это уже совсем излишне. нет смысла на 20тонном грузовике везти 10кг груза.
@@romanmed9035 ты по факту скажи что излишне то, ЧТО ИЗЛИШНЕ
Это убийца Webpack?
Почему же сразу "убийца" =D Вебпак так глубоко укоренился в инфраструктуре, что он еще надолго с нами. Плюс появление качественных альтернатив должно способствовать и развитию самого вебпака.
Пробовал Vite. Спустя какое-то время он стал уходить в цикл - тупо не заканчивалась пересборка...
Т.ч. пришлось тратить время на возвращение к CRA.
sass это как раз dev зависимость, ты че, в продакшен css идет , а не sass
Так, сразу и по делу:
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)))
У меня Vite требует удалить файлы из существующего проекта! Ни в какую он не хочет работать с имеющимися файлами. Т.е., а зачем такой сборщик вообще??? Хотя мне явно никто не ответит... это суть программистов такая -- не отвечать на вопросы...
Что за файлы ? что бы ответили нужно подробней описать проблему
Ватоадмин занялся программированием похоже
Рассказать не рассказав это талант...
Vite это крутая штука. Как и всё что делает Эван Ю.
подскажите где проблема, ничего не меняю проект реактжс+тс из коробки чистый самого вайта в дев моде все ок, но когда билджу проект все пути к картинкам стилям жс все битое примером в сбилдженом индекс штмль пути такие /assets/js/index-b93aefb3.js если я убираю слешв начале вот так assets/js/index-b93aefb3.js все ок, как исправить эту проблему, пытался заюзать опцию root: "./src" и переместить индекс штмль в папку src, но все равно пути битые
А почему вы считаете вариант со слешем битым? Это абсолютная ссылка на корень сайта, при запуске приложения на веб-сервере (а не простом открытии html файла) должно работать корректно.
@@mishanep это походу проблема в плагине вскода лайв сервер, когда запускаю сбилдженый код через него он показывает все битое, если запускаю через вайт превью все ок :)
почему у меня 9 ошибок в файле tsconfig.node.json