Vite, созданный Evan You, стал инструментом для разработки современных фронтальных рамок, включая Vue, Sveltekit, Astro и React-с экспериментальной поддержкой также от ремикса и угловой. Все это произошло в течение пяти лет! Эта история будет рассказана в предстоящем документальном фильме Cultrepo, который будет выпущен 9 октября.
В преддверии выпуска документального фильма Vite я поговорил с Эваном вам об эволюции VITE, невероятном импульсе, который он создал, и о том, что дальше.
Genesis of Vite: от Webpack до ES -модулей
Происхождение VITE происходит от неудовлетворенности вами инструмента построения по умолчанию в 2020 году, WebPack. Его структура Vue.js была доступна в тот момент около шести лет, так что это была стабильная технология. Он начал думать о улучшении процесса сборки. По его словам, он хотел «более легкий опыт разработки, где все должно обновляться быстрее».
Оказалось, что ключом стала относительно новая особенность JavaScript, называемого модулями ES (модули ECMASCRIPT). Модули ES были стандартизированы в 2015 году, как часть шестого издания Ecmascript (ES6). Но до 2018 года потребовалось, чтобы он был широко поддерживать в браузерах и 2019 года, прежде чем пришла поддержка Node.js.
Созревание модулей ES совпало с тем, что вы обдумываете новую систему сборки в Vue.
«Таким образом, модули ES — это то, как вы бы разбили код JavaScript на разные части, различные модули, которые вы можете загрузить», — объяснили вы. «Но пока браузеры не поддержат [IT] Назнакомительно, вам всегда приходилось объединить его — сделать это чем -то, что может бежать в браузерах ».
Вот почему WebPack был доминирующим инструментом сборки для веб -карт до этого текущего десятилетия. WebPack — это пучок модуля с открытым исходным кодом для JavaScript, который был запущен в феврале 2014 года — по совпадению, в том же месяце и год, что и Vue. Но с появлением модулей ES, в браузере можно было бы сделать в браузере.
Созревание модулей ES совпало с тем, что вы обдумываете новую систему сборки в Vue.
«Я играл с этим [ES Modules]Мне понравилось, и я сказал: посмотрите, если мы можем отправить запрос на загрузку модуля, но сервер просто скомпилируется, скажем, компонент VUE или файл TypeScript — на лету — превратите его в JavaScript и отправит обратно… модель будет действительно проста. Так вот как я начал работать над Vite ».
Другими словами, нет необходимости в объединении! Каждый модуль будет составлен в JavaScript в режиме реального времени, как и когда это необходимо. На этом этапе, 2019, продукт назывался Vue Dev Server.
Первая версия Vite и HMR Epriphany
Но для системы на основе модулей ES для замены WebPack она также должна была сделать замену горячих модулей (HMR). HMR позволяет обновлять части веб -приложения — отдельные модули — в браузере без полной перезагрузки страницы. Это было, пожалуй, самое впечатляющее инновации в WebPack и стало благом для разработчиков, потому что это означало, что им не нужно было перезагрузить все свое приложение после каждого изменения кода.
«Я был как, эй, у меня есть идея сделать Hot Module Work Over Vue Dev Server. И это стало первым прототипом VITE».
— Эван, ты, создатель вита
По вашему мнению, выяснение HMR было самой важной частью привлечения его новой модели для работы.
«Таким образом, Vite прошел несколько различных воплощений. Первым был прототип под названием Vue Dev Server, который был в 2019 году, я полагаю. Так что это был прототип, [then] Я откладываю это на некоторое время. В 2020 году у меня было это прозрение. Я был как, эй, у меня есть идея сделать Hot Module Roading через Vue Dev Server. И это стало первым прототипом — и в конечном итоге стал первой итерацией — Vite ».
Он сделал всю ночь, чтобы кодировать свое прозрение, а затем утром 20 апреля 2020 года в свое время сделал это теперь знаменитый твит:
Эван, вы Tweet объявили о Vite, апрель 2020 года; через Wayback Machine
Эта «безразличная настройка разработчиков» со пылкой горячей перезагрузкой, безусловно, привлекла внимание разработчиков Vue. Но вскоре вы поняли, что, хотя это было отличным решением для сервера DEV, когда дело дошло до производства, будлер все еще требовался — чтобы разработчик мог оптимизировать свой код перед развертыванием.
Вы пришли к выводу, что ему нужна «универсальная система плагинов, которая может работать как на Dev, так и на Prod». Он наметил Rollup, созданный в 2015 году Рич Харрисом (который позже продолжил создавать стройку), как производственный пакет, который он намеревался использовать для VITE. Затем он заметил, что у проекта под названием WMR из Ecosystem Preact был что -то, что называется «контейнер с плагином Rollup».
«Таким образом, концепция контейнера плагина позволила плагинам ROLLUP просто работать, правильно, без самостоятельно, — которую мы можем поместить на сервер Dev. Так что это по сути привело нас к переосмыслению, как это [Vite] должен быть архитектурирован. Поэтому я на самом деле решил просто переписать VITE с нуля, перед выпуском 1.0 ».
VITE 2.0: Инструмент для создания фреймностического сборки
Так что VITE 1.0 на самом деле никогда не произошло; Он был прямо на Vite 2.0, который был разработан, чтобы быть рамочной агностикой. VITE 2.0 в конечном итоге запущен в феврале 2021 года, включая систему плагинов, вдохновленную Rollup для замены технологии, специфичной для VUE. Это принесло HMR по модулям ES во все рамки.
«VITE — это слой, который находится на вершине связей. Это не просто пучок. Мы называем это инструментом сборки…»
— Эван тебя
Здесь стоит отметить, что, хотя Rollup (и Webpack)-это то, что вы терпите «Бандлером низкого уровня», VITE 2.0-это шаг выше этого.
«Vite — это слой, который находится на вершине связей», — объяснил вы. «Это не просто пучок. Мы называем его инструментом сборки, потому что он делает больше, чем объединение-у него встроенные концепции или API, которые облегчают вам строительство мета-рамских заводов».
Таким образом, с Vite 2.0 он внезапно стал привлекательным для всех видов веб -структур.
В документальном фильме (я видел скрининго) вы видите, как другие создатели структуры объясняют, как они пришли, чтобы принять Veite 2.0, в том числе Рих Харриса Свелте, Фред К. Шотт, Райан Карнаато из Sollte, а также Педро Каттори и Марк Далгл из Remix.
Даже угловой создатель Мишко Хевери появляется, чтобы петь похвалы Вита (хотя это еще не по умолчанию, Angular поддерживает Vite через официальные интеграции CLI). Последняя структура Hevery, Qwik, выбрала Veite в качестве основного Dev Server и Bundler. «Я очень рад за них, и я думаю, что они должны захватить мир», — говорит он в документальном фильме.
Снежок и создатель Astro Фред Шотт в документальном фильме Vite.
Фильм отлично справляется с распаковкой (так сказать), как большинство популярных рамок сегодняшнего дня тянулись к VITE. История Фреда Шотта особенно убедительна, потому что он непосредственно конкурировал с Эваном с своим собственным инструментом сборки, снежным покровом. Инструмент Шотта, который также использовал модули ES, фактически предшествовал Vite. Мы знаем, кто выиграл эту битву, но из пепла снежного покрова появился Astro, который был запущен в 2021 году и теперь является одной из самых модных веб -структур. В фильме Шотт отмечает, что он мигрировал Astro, чтобы рассказать о Dev Server и в комплекте в середине 2022 года.
Широко распространенное внедрение VITE в экосистеме React
Возможно, самое удивительное, что многие реагирующие разработчики начали использовать VITE 2.0.
«Таким образом, мы отправили VITE 2, и, что интересно, многие разработчики React начали использовать его для замены приложения Create React, которое было отправной точкой по умолчанию», — сказал вы.
Однако не все реагирующие разработчики прыгнули, чтобы. Исключением из применения VITE среди основных фронтальных рамках является следующее.JS, которое продолжает использовать WebPack в качестве инструмента сборки по умолчанию с момента запуска в 2016 году. Но Next.js также работает над инструментом нового поколения под названием TurboPack, банкнота на основе ржавчины, созданного Тобиасом Копперсом, создателем WebPack.
«Это не используется за пределами Next.js, поэтому в некотором смысле турбопак теперь больше похож на внутреннюю деталь реализации next.js…»
— Вы на турбопаке, инструмент сборки Next.js
Я спросил вас, как он сравнивает турбопак с VITE.
«Турбопак до сих пор не является полностью стабильным до этого момента», — ответил он. «Они изначально хотели, чтобы турбопак был отдельной вещью, которую вы можете использовать для строительства. Но из -за этого. […] Как трудно просто заставить его работать в next.js, до этого момента это все еще очень, очень тесно связано с Next.js. Это не используется за пределами next.js, поэтому в некотором смысле турбопак теперь больше похож на внутреннюю деталь реализации next.js, а не автономный инструмент, который вы можете использовать ».
С другой стороны, Vite может быть не только автономным инструментом, но и может быть тем, что вы называет «основополагающим слоем» для различных рамок.
«Мы — слой сборки [where] Вы можете использовать Vite непосредственно для создания приложения с одной страницей; Но вы также можете построить пользовательскую мета-каруктуру на вершине Vite, используя Vite в качестве основного уровня. И это именно то, что, вы знаете, Sveltekit, Tanstack, [Solid]СТАРЬ, РЕМИКС делает ».
«Большинство из этих платформ для кодирования Vibe, мы видим, что они по умолчанию в стеке Vite Plus React…»
— Эван тебя
Кроме того, по вашему мнению, комбинация Vite и React стала подходом по умолчанию для платформ кодирования ИИ.
«Большинство из этих платформ кодирования Vibe, мы видим, что они по умолчанию в стеке Vite Plus React, потому что это, вероятно, самая хорошо понимаемая комбинация AI на данный момент».
VITE+: будущее набора инструментов Vite
В октябре прошлого года вы основали Voidzero Inc., компанию, специализирующуюся на создании «унифицированного инструмента разработки для экосистемы JavaScript». В своем сообщении он отметил, что Vite «четко зарекомендовал себя как общий уровень инфраструктуры для следующего поколения веб -структур». Это дало вам основу для вас и его команды построить бизнес на вершине VITE.
В июне этого года вы объявили на конференции, что Voidzero работает над чем-то под названием Vite+, которое станет сквозном инструментом для VITE. Я попросил вас немного больше объяснить концепцию и обновить нас о прогрессе.
«VITE+-это унифицированный слой, который соединяет все эти вещи под одному последовательному решению, верно? Так что это суперсет самого VITE».
— Эван тебя
Сначала он объяснил, что его компания работает над несколькими различными проектами с открытым исходным кодом. К ним относятся Rolldown (новый Bundler на основе ржавчины для VITE), Oxlint (Linter с ржавой, для JavaScript и TypeScript), Vitest (структура тестирования Vite) и OXC (коллекция инструментов JavaScript, написанных в Rust).
«VITE+-это унифицированный слой, который соединяет все эти вещи под одному последовательному решению, верно? Так что это суперсет самого VITE».
Vite+ также имеет «дополнительные функции, которые только в Vite+», сказал он. «Мы хотим, по сути, предложить это компаниям, которые боролись с фрагментированными инструментами по всей организации».
И да, будет компонент ИИ, чтобы VITE+.
«Таким образом, мы также в Vite+думаем о потенциальных улучшениях, связанных с AI»,-сказали вы. «Например, должно быть […] Подсказка, которую мы можем дать пользователям вкладывать в их агенты. MD, чтобы их агенты работали лучше с Vite+. Там может быть [an] MCP -сервер, который сообщает агенту, что вы можете использовать это для более эффективного поиска кода по всей базе кода, или понять отношения модуля или исправления в вашей базе кода. Должна быть документация, подходящая для искусственного интеллекта, также должен быть вывод командной строки, подходящей для искусственного интеллекта, верно? »
Заключение
Эван, вы явно стали одной из рок -звезд развития фронта в этом десятилетии. Примечательно, как быстро VITE стал инструментом сборки по умолчанию на большинстве мета-рамских заводов, и теперь вы берете тему объединения frontend Tooling на ступеньку со своей собственной компанией.
Проверьте документальный фильм, когда он будет выпущен 9 октября; Это увлекательные часы. Вот трейлер, чтобы взять с собой аппетит:
Trending Stories youtube.com/thenewstack Tech движется быстро, не пропустите эпизод. Подпишитесь на наш канал YouTube, чтобы транслировать все наши подкасты, интервью, демонстрации и многое другое. Группа подпишитесь с эскизом. Ричард Макманус — старший редактор нового стека и пишет о тенденциях разработки веб -и приложений. Ранее он основал ReadWriteWeb в 2003 году и встроил его в один из самых влиятельных технологических новостей в мире. С самого раннего … Подробнее от Ричарда Макмануса
