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

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

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

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

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

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

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

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

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

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

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

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

Спасибо!

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

Круто!)

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

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

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

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

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

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

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

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

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

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

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

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

А webpack тоже медленный?

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

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

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

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

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

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

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

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

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

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

0:09 Вайт его называют неграмотные люди, оно даже по-английский произносится как veetuh но никак не а вайт.

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

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

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

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

что такое storybook?

Так, сразу и по делу: 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) Скорее всего хайп и способ пропиариться и заработать. Я скептически отношусь к такому балагану, так как были уже продукты, но скорее всего вы о них даже не вспомните. Делаем выводы.

Это убийца Webpack?

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

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

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

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

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

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

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

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