[Перевод] Официальный участник Vue: Как развивается экосистема Vite?

внешний интерфейс Webpack Vite

предисловие

ДоVite2Когда он только вышел, случилось так, что я руководил новым проектом, поэтому собирался использовать последниеVite + Vue3 + TSчтобы построить этот проект.

К сожалению, в то времяViteЕсть ямы, и горячее обновление не так хорошо, как традиционноеwebpackProject, часто нужно изменить строку кода, чтобы обновить браузер. Поэтому я переключился на его использование до того, как проект стал слишком большим.vue-cliРефакторинг проекта. Но потом я увидел, что многие новые проекты с открытым исходным кодом используют его.Vite, всегда естьViteВ будущем это обязательно станет очень хорошим предчувствием, и со временем эта мысль становится все сильнее и сильнее!

Это случилосьViteКогда было жарко, блоги, официальные аккаунты, станция B, Zhihu и т. д. много говорили об этом.Vite, поэтому я используюViteОтрефакторил его обратно и подвергся критике при сообщении о работе (浪费了时间去做与业务无关的东西，并且用了不成熟的技术可能会承担不必要的风险).

позжеViteПопулярность блога постепенно снижалась, и теперь открывайте блог, официальный аккаунт, Жиху и станцию ​​Б... Вы не увидите столько статей оViteстатья.

До не давнего времениVueофициальный член командыPatakопубликовал статью под названием«Экосистема Вите»Прочитав его статью, я очень обрадовался и почувствовал, что сделал правильную ставку.ViteДействительно стать тенденцией в будущем. Это потому, что в его статье я увидел много очень коровьего Б, используются проекты с открытым исходным кодом.Vite, мало того, там довольно много команд и воротил работает сViteКоманда сотрудничает (помогает исправлять ошибки, добавлять функции и т. д.), что доказываетViteТеперь это признали все воротилы. Я верю, что при поддержке больших парней он сможет развеять сомнения в сердцах многих людей.

Поэтому я специально потратил время, чтобы перевести эту статью и поделиться ею со всеми, чтобы каждый мог узнать о ней больше.Viteразвитие во всем мире.

Оригинальная ссылка:Боюсь ступить в воздух. Dev/Vite/Eco sys…

текст

ViteОдной из его самых сильных сторон является окружающая его экосистема.Viteвзял на себя много обязанностей (Общие веб-паттерны,глобальный импорт,API горячего обновления,Низкоуровневый рендеринг на стороне сервера,Оптимизация сборки), мы обеспечиваем общую основу для совместной работы, чтобы другим специалистам по сопровождению не приходилось каждый раз изобретать велосипед. Есть даже сопровождающие нескольких популярных фреймворков, которые выбралиViteбыть их рекомендуемым инструментом сборки, и теперь они участвуютViteразработки, и непосредственно исправили довольно многоbugтакже добавил многоfeature.Viteраскрывает гибкийJavaScript API, позволяя сRailsа такжеLaravelИнтеграция с другими бэкэнд-фреймворками или другими инструментами разработки, такими какCypressа такжеStorybook.ViteплагинAPIа такжеRollupсовместимый, чтобы сделатьViteможно эффективно использоватьRollupСуществующая экосистема плагинов.

Vite действительно превзошел мои ожидания: теперь он используется не только для Vue, но и для React, Svelte, Solid, Marko, Astro, Shopify Hydrogen, а также для интеграции с Storybook, Laravel, Rails и т. д.  -Ю Юси

В этой статье мы узнаем оViteНекоторые команды и участники экосистемы, я думаю, чтобы показать вам, сколько людей в настоящее время работают вместе над продвижениемViteразвитие – этоgood idea. В настоящее времяViteЭкосистема настолько велика, что я не буду претендовать на то, чтобы охватить каждый проект, она такжеViteИстория для перспективы. Заранее примите мои извинения, если вы не видите в этой статье свой собственный проект. И вchat.vitejs.devОставьте сообщение внутри, мне не терпится узнать больше о вашем использованииViteсозданный контент.

Ниже основное внимание уделяется текущему сотрудничеству между различными командами. Если вы хотите узнать больше о каждом проекте, есть ссылки на его домашнюю страницу, GitHub, сообщество. После вступления пойдем по магазинамViteЭкология:

стоя на плечах великанов

vite

vite

существуетVite2После второго массового выпускаЮ ЮсиНастроить A.Команда Витедля поддержания проекта. настоящее времяViteэто尤雨溪Команда во главе с командой тесно работает над проектом, и мы также тесно сотрудничаем с другими командами, чтобы гарантировать, чтоViteМожно без проблем использовать с их фреймворками и интеграциями. Сейчас их больше, чем400 участниковправильноViteпредоставленный код. и в настоящее время у нас очень активнаяСообщество, проект быстро развивается.GitHubбольше, чем7万5千индивидуальныйпроектмы используемVite,а такжеViteежемесячноnpmколичество загрузок превышено130Десять тысяч раз:

WX20211208-153137.png

rollup

rollup

Viteможно рассматривать как开发服务器 + Rollup.Rollupодин из основных хранителей@lukastaegertРекомендуемое использованиеViteприйти какRollupизWebСервер разработки.ViteсовместимыйRollupСистема плагиновViteобеспечивает хороший старт.Rollupсопровождающих расширяют API своего плагина с помощьюViteа такжеWMR(译者注: WMR является сопровождающим Vite-подобного проекта, разработанного командой Preact)поддерживать связьчтобы экосистема оставалась совместимой.

esbuild

esbuild

esbuildэто использованиеGoУпакованный инструмент сборки, написанный на языке, расширяющем границы производительности инструмента сборки.Viteиспользоватьesbuildперевести один файл (удалитьTSнабрать и скомпилироватьJSX) в качестве инструмента сжатия по умолчанию (дляJSа такжеCSSдокумент). Он также используется в качестве инструмента упаковки при предварительной упаковке зависимостей во время разработки.@evanwallace(译者注: он автор esbuild) проделал действительно хорошую работу.esbuildулучшается с каждым днем, этоViteпри условииtsc,babelа такжеRollupбыстрая альтернатива.

Typescript

typescript

TypescriptПоявлениеJSМир.ViteПоддержка импорта.tsдокумент. Внутри мы будем использоватьesbuildудалятьTSтип, который позволяет избежать компиляции вjsДелайте очень сложную проверку типов для файлов. Это очень важно для лучшего опыта горячего обновления. если вы используетеVS Codeтакие как современныеIDE, вы получите большую часть информации через Intellisense по мере написания кода. Вы также можете запустить во время упаковкиtscкоманду для проверки типов или используйте что-то вродеrollup-plugin-typescript2такой плагин.@fi3eworkизvite-plugin-checkerеще один интересный проект, позволяющий запускать рабочие потоки.TypeScript.

babel

babel

В большинстве случаевViteЭто не нужноbabel, что позволяет избежать тяжелого преобразования абстрактного синтаксического дерева. ноReactЭкосистемы сильно зависят отbabelдля внедрения горячих обновлений и других решений на основе компиляции, таких какCSS-in-JSбиблиотека. Сейчас я в@vitejs/plugin-reactа также@vitejs/plugin-legacyИспользуйте его для обеспечения поддержки старой версии браузера.Parcelа такжеNext.jsКоманда работает надRustНаиболее часто используемые плагины ToolchainSWCпересадка. Когда придет время,ViteДоступна сbabelпередача непосредственно вSWC(Раннее исследование: на основеSWCиз@vitejs/plugin-legacy,unplugin-swc,vite-plugin-swc-react).

PostCSS

postcss

Viteпоощрять использованиеPostCSS, и поддерживает его из коробки.Другие препроцессоры CSSТакже поддерживается ручное добавление их в зависимости проекта. ноPostCSSболее подходящийViteзрение, теперь позволяет использовать что-то вродеpostcss-nestingТакойчерновик CSSплагин, чтобы сделать свойCSSСтандарты остаются совместимыми и в будущем.

Другие исследования

Snowpack

snowpack

⚠️译者注:из-заSnowpackизLogoбелый (в конце концовsnowЭто означает снег, так чтоLogoЕго тоже нужно сделать в цвет снега), но при размещении его на странице с белым фоном картинка будет не бросаться в глаза. Если вам интересно, вы можете вручную изменить цвет фона этой страницы, чтобы увидеть это. .

SnowpackиспользоватьJavaScriptРодная модульность, чтобы избежать ненужных работ и сохранять вещи очень быстро, независимо от того, насколько велик ваш проект. Это помогает установить использование инструментов разработкиESModuleРасставлять приоритеты правильности.Snowpackа такжеViteвлиять друг на друга, они обсуждалиCommonJSа такжеESModuleСтандартизированные горячие обновления в сосуществующих проектахAPIи загрузкаpackagesи т. Д. Детали.Snowpackосновные члены команды (@FredKSchott,@drwpow,@matthewcp,@n_moore) сейчас изучаетastro, который основан наIslands-based SSGкадр, теперь поViteоказывать поддержку в развитии. Два сообщества работают вместе, чтобыSnowpackИзвлеченные уроки будут использованы для улучшенияVite.

WMR

WMR

WMRэтоPreactРазвитие команды похоже наViteинструмента.@_developitвпервые использованныйRollup Plugin API, что позволяет использовать при разработкеRollupплагины и воспользоваться преимуществами богатыхRollupэкосистема.Vite 2 Plugin APIвWMRдобавлено на основанииViteконкретная функция хука.Viteа такжеWMRСотрудничайте, чтобы объединитьURLМодификаторы суффиксов и некоторые другие функции.

Web Dev Server

Web Dev Server

Web Dev ServerИспользует более низкоуровневый подход, требующий ручной настройки для производственных сборок.Rollupконфигурация. Имеет несколько встроенныхVite setupИспользуемые инструменты, например, некоторые члены сообщества используютWeb Test Runner,vite-web-test-runner-plugin.

Фреймворк пользовательского интерфейса

Vue

vue

Зависит отЮ ЮсиКак создатель и руководитель проекта,Vueтак же какViteДва других основных члена основной команды (@antfuа также@sodatea) поддерживаются совместно,Vue Теперь команда рекомендует использоватьViteВедомыйcreate-vueВ качестве вспомогательного инструмента для новых проектов.Vue3использовать@vitejs/plugin-vueплагины для обеспечения поддержки, в то время какVue2это использоватьvite-plugin-vue2плагин для реализации поддержки.ViteбудетVueМасштабное принятие в экосистеме, большинство проектов планируют или реализованыViteподдержку, а в некоторых случаях предоставляются по умолчаниюViteв качестве инструмента разработки (например:Nuxt,Vuetify,Quasar). непосредственно на основеViteизVueновый проект(VitePress,iles,Slidev)

React

react

Viteпройти через@vitejs/plugin-reactплагин для предоставленияReactслужба поддержки.@alecdotbiz(ViteОдин из основных защитников) пытались сделать игру более гладкой. Мы изReactВ экосистеме можно увидеть множество применений, в основном для прототипирования и документирования библиотек. Например:React Router Docs. а такжеNext.jsставить наWebpackа такжеSWCбудущее. Поэтому для сложныхSSR Reactзаявление,ViteМного не использовал. Но некоторые основаны наViteизNext-inspiredНачинают появляться фреймворки, такие какrakkasа такжеvitext.

Preact

preact.svg

вместе сPreactразвитие командыWMR, мы можем ожидать, что они порекомендуютWMRбыть их рекомендуемым инструментом сборки. Тем не менее, они все еще развивались@preact/preset-viteплагинViteОбеспечьте официальную поддержку.@marvinhagemeistдаPreactчлен основной команды, он работал сViteСообщество тесно сотрудничает и активно участвует в дискуссиях, связанных с безопасностью и совместимостью двух экосистем (включаяФункция регулировкии убедитесь, что плагин установленViteа такжеWMRможет нормально работать).

Svelte

svelte

SvelteкомандаViteОдин из самых активных участников. правильноSvelteподдержка черезvite-plugin-svelteреализуется плагином.SvelteKitЗависит отViteОбеспечьте поддержку, которую мы можем ожидатьViteЭто будет популяризировано в их экологии.@Rich_Harris(译者注:Svelteучредитель) дляSvelteKitпредложил общийSSRпрограмму, а позже Ю Юйси пересадил ее наViteподниматься. в состоянии поделитьсяSSRПрограммы по продвижению текущих на основеViteизSSGа такжеSSRИнновация фреймворка сыграла решающую роль.@GrygrFlzr,@benmccann,@dominikgа также@bluwyooочень заинтересован в проекте иSvelteKitэто использоватьViteОдна из наиболее продвинутых платформ для , две команды тесно сотрудничают.

marko

marko

markoКоманда разработала@marko/viteприйти какViteофициальный плагин для , они же разрабатываютVite-based starters.@dylan_pierceyа также@RyanCarniatoтолкаетZero JSа такжеSSR streaminи другие функции.

Solid

solid

Сплоченная командатакже на основеViteОфициальный плагин для:vite-plugin-solid. их шаблон проектаSolidStartтакже используяVite.@RyanCarniatoсуществуетViteОчень активен в сообществе, см. его наVercel Edge Functionsлучшее использованиеViteа такжеSolidнаписанный одинDemo.

lit

lit

зажженная командаВышла новая версия фреймворка.Vite monorepoесть одинstarterшаблон, такlitдопустимыйcreate-viteдоступно в. Хотя еще нетlitПлагины, которые включают горячее обновление в проекте, ноlitКоманда заинтересована в его создании.

Каркас приложения

Nuxt

nuxt.svg

Нуст Командаэто сViteКоманда тесно сотрудничает, чтобы обеспечитьViteПроект может быть плавно интегрирован вNuxt. они создалиViteа такжеNuxt 2Интегрированnuxt-viteплагин.Nuxt 3будет использоваться по умолчаниюVite.NuxtКоманда применила интересный подход к инструментам сборки: абстрагирование фреймворка от используемых инструментов сборки. Пользователи смогутViteа такжеWebpack 5выберите между.Nuxt 3позволитVueДругие проекты в экосистеме, такие как:Vue StorefrontнаслаждатьсяViteдивиденды. Стоит отметить, что@antfuотвечает за большую часть инноваций в экосистеме, и теперь онNuxtСовместная деятельность.

SvelteKit

sveltekit

SvelteKitэтоSvelteподдерживаетсяAppРамка(译者注: что-то типаSvelteверсияNuxt), способствуя внедрению современных веб-разработокtransitional appsидея.Svelteа такжеViteКоманды сотрудничают слаженно, улучшаяViteизSSR, серверAPIи общее качество. из-заSvelteKitНепрерывная оптимизация приводит кViteЕсть большое улучшение.

Astro

astro

⚠️译者注:этоLogoВерхняя половина белая, а веб-страница с белым фоном заставит изображение выглядеть неочевидным.Если вам интересно, вы можете вручную изменить цвет фона этой веб-страницы, чтобы увидеть его.

астро командаиспользуетViteвосстановить ихдвигатель, они сталиViteКлючевой игрок экосистемы.Astroпродвигается во многих областяхViteразработка, которую раньше не предпринимала ни одна другая структура, и они постоянно совершенствуются по мере изучения. они естьESMИнструментальный опыт дляViteпрогресс имеет решающее значение.

iles

iles

ilesК@MaximoMussiniФрейм создается при условииAstroа такжеVitePressвдохновленный,ilesКViteпоказать хороший пример поддержки (Айлс подкаст).MaximoБыл активным членом сообщества, а также продвигалViteсуществуетRailsпринятие в обществе.

VitePress

vitepress

VitePressправдаVuePressНовая интерпретация , он используетVue3а такжеViteto-управляемый генератор статических сайтов. Сейчас много примененийVitePressВ проекте есть:Официальный сайт Вите,Vue-блог,VueUse,Pinia,vite-ruby,vite-plugin-pwa,Slidev,windi,laravel-viteЖдать…VuePressпройти через@vuepress/bundler-viteЭтот плагин реализуетViteслужба поддержки.

Slinkity

slinkity

⚠️译者注:этоLogoНижняя часть страницы белая, и это сделает изображение незаметным, если оно размещено на веб-странице с белым фоном.Если вам интересно, вы можете вручную изменить цвет фона этой веб-страницы на другой цвет.

@bholmesdevи др. изучаютSlinkity, который являетсяEleventyа такжеViteкомбинированныйSSGРамка. получено@Snugugсуществуетvite-plugin-eleventyа такжеAstroВдохновленный более ранней работой над платформой et al,Slinkityоткрыт для 110 пользователейViteДверь в экосистему. Это позволяетEleventyпроектИспользуйте поддержку платформы пользовательского интерфейса Vite,быстроHMRа такжеViteБогатая экосистема плагинов.

Hydrogen

hydrogen

Shopifyв своем новомReact Store FrontРамкаHydrogenвыбран вVite.Hydrogenкоманда работает сReactкоманда работает вместе вViteсредняя поддержкаReact Server Componentsи сsuspenseрендеринг на стороне сервера.@jplhomerсуществуетViteОчень активен в обществе. Он сотрудничал, чтобы улучшитьViteосновная часть иViteправильноReactслужба поддержки.

rakkas

rakkas

rakkasэтоViteоказывать поддержкуReact SSRрама, при условииNext.jsа такжеSvelteKitвдохновение. автор@cyco130был активен вViteВ сообществе работайте с другими, чтобы улучшитьViteсерединаSSR.

vite-plugin-ssr

vite-plugin-ssr

vite-plugin-ssrЕще одна миниатюраSSRкадр, по@brilloutразработка. онVite SSRПоле очень активно, он часто помогает другим решать проблемы, а также способствуетViteремонтbug, а также дает некоторыеidea.vite-plugin-ssrстремиться бытьSSRНабор инструментов для авторов фреймворков, предоставляющий болееViteнижний слойSSRБолее плавный опыт. подобноvitextТакой каркас, являющийся@asleMammadamразвитиеReactкаркасы, которые основаны наvite-plugin-ssrбыть разработанным.@brilloutТакже привержены другим проектам, таким какTelefuncа такжеVike.

vite-ssr

vite-ssr

vite-ssrК@frandioxсоздать, какNode.jsсерединаViteПростой, но мощныйSSRрешение. Это будетViteизSSR APIДругой способ выставить как продвинутое решение. он по-прежнемуvitedgeсоздатель, который являетсяCloudflare WorkersРаботает полный стекViteРамка.

интегрированный

vite-ruby

vite-ruby

@MaximoMussiniСоздал первый проект для интеграции с бэкендом:vite-ruby,Это позволяетViteуспешно продвинулсяRubyСообщество. можно нажатьэта ссылкаУзнать большеvite-rubyистория позади.Vite Landсерединарельсовый каналстал активным, и проект вдохновил других наViteинтегрирован в свои проекты.

laravel-vite

laravel-vite

laravel-viteЗависит от@enzoinnocenziсоздан, он используется для преобразованияViteа такжеLaravelЭкологически комбинированный. следуетvite-rubyшаги,Enzoработа заключалась в продвиженииViteсуществуетLaravelКлючевой фактор принятия сообществом.

fastify-vite

fastify

fastify-viteЯвляется ли аналогNuxtа такжеNextдождаться зрелостиSSRМиниатюрная версия рамы.@anothergalvezБудуfastify-viteпостроить какfastify-firstрешение.fastifyа такжеViteСуществует много синергии между сообществами.fastify-viteОба проекта продвигаются.

CSS-фреймворк

Tailwind CSS

tailwind

Tailwind Labsбыл первым, кто понялViteОдна из потенциальных команд, они были очень раноViteПредоставляются официальные примеры интеграции и начинается спонсорствоVite. Они также опубликовалиJust-in-Time Mode,ЭтоTailwind v2.1+изJITдвигатель, сVite HMRОбеспечивает большой опыт при совместном использовании. вместе сHydrogenдругие рамкиViteа такжеTailwind CSSкомбинация,TailwindПользователи вступят в новуюViteволна.

Windi CSS

windicss

WindiCSSК@satirevenсоздан, этоTailwindизJITдвигатель,@antfuсозданный с его помощьюvite-plugin-windicss, он загружается иHMRОн имеет определенные преимущества в плане скорости и так далее. Сейчас проект перерос в активное сообщество.WindiCSSтеперь используется дляNuxt 3а такжеSlidevи т.п. документация страница.

UnoCSS

unocss

используется какое-то времяWindiCSSПозже,@antfuсозданныйUnoCSS, который является атомнымCSSКомплект двигателя. это снова показывает, что мы распыляемCSSСколько возможностей для улучшения есть?UnoCSSможно сравнитьWindi CSSбыстро200раз, на два порядка быстрее самого быстрого двигателя. Вы можете нажать, чтобы прочитатьПереосмысление атомарного CSSа также«Разговор об иконках на чистом CSS».@antfuсозданныйUnoCSSПри запуске этого проекта просто датьViteПредоставляет решение, но теперь оно доступно и для других упаковщиков.UnoCSSдля следующего поколенияWindiCSSДвигатель обеспечивает мощность.

плагин

Awesome Vite Plugins

awesome-vite

существуетAwesome Viteесть много отличныхПлагин Vite. Однако из-за ежедневной отправки новых проектов, новых шаблонов и новых плагинов наAwesome Viteна складе, так что@Scrum_Чтобы сохранить этот склад. Плагинов здесь очень много, и их количество увеличивается с каждым днем. Вот некоторые примеры:

  • vite-plugin-pages: поддержка маршрутизации на основе файловой системы
  • vite-plugin-mpa: готовая поддержка многостраничных приложений Vite.
  • vite-plugin-federation: Поддерживает такие модули, как Webpack.
  • vite-plugin-node: Использование Vite в качестве сервера разработки Node.
  • vite-plugin-comlink: с участиемcomlinkвеб-работник
  • vite-plugin-rsw:служба поддержкиwasm-pack
  • vite-plugin-elm: Скомпилируйте приложение/документ/элемент Elm в проекте.
  • vite-plugin-qrcode: Отобразите QR-код, отсканируйте его для отладки на телефоне.
  • vite-plugin-full-reload: автоматически перезагружать страницу при изменении файлов.
  • vite-plugin-compress: используется для сжатия пакетов и ресурсов в проекте.
  • vite-plugin-checker: запускать TypeScript, VLS, vue-tsc, ESLint в рабочих потоках
  • vite-plugin-inspect: проверить промежуточное состояние плагина

awesome-rollup

awesome-rollup

Rollupизосновной плагинЗависит отRollupкоманда для поддержания иAwesome RollupСуществует список плагинов сообщества.API плагина Viteбольшинство из нихСовместимость с накопительным пакетом. Мы по-прежнему поддерживаемViteа такжеRollupсовместимость плагиновсписок. из-заRollupЭкосистемы становятся ближеVite, так что, надеюсь, в будущем мы сможемRollupВ документации плагина см. "Works in ViteЗначок ". Некоторые примеры совместимых плагинов:

unplugin

unplugin

unpluginда@antfuЕще один проект с открытым исходным кодом, этоVite,Rollup,WebpackИ единая система плагинов для других инструментов упаковки, которые могут появиться в будущем.@antfuИспользовал эту библиотеку для переноса своих плагинов, чтобы большую часть плагинов, которые он пишет для Vite, можно было использовать в других инструментах сборки. Этот пунктunjs umbrellaчасть этогоNuxtКоманда изNuxtБиблиотека, извлеченная из инструмента сборки . Чтобы назвать несколько примеров:

  • unplugin-icons: Тысячи значков могут быть импортированы по запросу.
  • unplugin-vue-components: автоматически импортировать компоненты Vue.
  • unplugin-auto-import: автоматически вводить некоторые TS API

vite-plugin-pwa

vite-plugin-pwa

vite-plugin-pwaдаViteОдна из нулевых конфигурацийPWAплагин, который проходитWorkboxВключите автономную поддержку.@antfuа также@userquinБезупречный и бесшовный опыт создается для каждого кадра.

Starters

Replit

replit

Replitбыл первым, кто использовалViteчтобы предоставить пользователям лучший опыт, они будутReact Starter Templateпереключиться наVite.@amasadизтвитыБудуReact Starter Templateа такжеcreate-react-appБыли сделаны сравнения, которые позже упоминались во многих сообщениях в блогах и выступлениях, чтобы проиллюстрировать разницу в скорости загрузки;“Vite 甚至在 CRA 启动之前就已经开始运行了。”

Glitch

glitch

glitchВ ихStarterПроект используетVite. ихИспользуйте Vite, чтобы делать тяжелую работу.keithkursonСказать:“和它一起工作真是太令人愉悦了，它让我们所有的初学者都拥有相似的构建模式，并且 Rollup 插件对于程序员来说将是一个巨大的附加值。”

StackBlitz

stackblitz

⚠️译者注:этоStackBlitzЭто онлайн-операция в предыдущей ссылке проекта.

StackBlitzв своем браузереIDEреброViteстать гражданином первого класса. они пытаются сделатьViteа такжеWebContainersСовместимость (включая поддержкуesbuild). они такжеViteКоманды в экосистеме сотрудничают, чтобы обеспечить самые популярные из нихViteРамки могут работать гладко, например:SvelteKit,Hydrogen,AstroЖдать. Они также добавилиVite starters:vite.newа такжеvite.new/{template}, и воляViteвключены в их страницу витрины, и они по-прежнемуViteсамый крупный спонсор!

Vitesse

vitesse

VitesseдаVite Starterхороший пример. Это основано наVue3шаблонный проект,@antfuиспользовал этоstarterпоказыватьViteнемного экологиилучший плагин, который также имеет следующееFile based routingauto importsPWAWindi CSSSSGcritical CSSCypressХороший пример проведения теста.

WebExtension Vite Starter

vitesse-webext

WebExtensionосновывается наVitesseстартовый шаблон. это используется, чтобы показатьViteв типичномWebИспользуйте вне приложения. Это используется в других средахViteпример, чтобы иметь возможность получитьViteфункция горячего обновления и плагины.

Awesome Vite Templates

awesome-vite

ViteВ настоящее время сообщество поддерживает проекты шаблонов для различных комбинаций фреймворков и инструментов.Awesome Vite TemplatesЕсть масса вариантов. Если вы предпочитаете запускать их локально, напримерdegitТакой инструмент позволяет использоватьdegit user/repo.

тестовое задание

mocha-vite-puppeteer

mocha-vite-puppeteer

mocha-vite-puppeteerК@larsthorupразработан, это позволяет использоватьViteа такжеPuppeteerбегатьMochaФронтальное тестирование. ЭтоМожет запускать тесты так же быстро, как Vite.

vite-jest

vite-jest

@sodatea(译者注: он главный разработчик @vue/cli) разрабатываетvite-jestЭтот проект направлен наJestПредоставить первоклассныйViteинтегрированный. из-заБлокировщики в шутке, в результате чего его текущее состояние все еще находится в разработке. вы можете нажать на этоissueдля просмотра деталей, а также добавивVite Landсередина#testingканал, чтобы помочь продвинуть эти усилия.

Cypress

cypress

CypressбылViteинтегрированы в их продукт, и они очень активны в сообществе. они берут своеТестирование компонентов Cypressа такжеViteСервер разработки идеально подходит. они также используютVitesseвосстановить ихUI.可以点进@_jessicasachsизПрезентация VueConf США 2021, узнать больше оCypressа такжеViteИнформация о том, почему это хорошо работает вместе.

Web Test Runner

Web Dev Server

vite-web-test-runner-pluginда@web/test-runnerПлагин для тестированияViteуправляемый проект. Этот плагин автоматически подключится к текущему каталогуViteпроект, загрузите конфигурацию проекта и используйте то, что вы настроилиVite build pipelineДля сборки каждого тестового файла.

Другие инструменты

Storybook

storybook

storybook-builder-viteК@eirikobo,@sasan_farrokhа такжеianvanschootenСозданный тремя из них, он позволяет вам использоватьViteпостроить свойStorybook.Michael Shilmanнаписалблогподробно объяснить принцип и подчеркнутьstorybook-builder-viteПреимущества: Значительно улучшена скорость сборки,Viteсовместимость конфигурации иViteДоступ к экосистеме плагинов.

Tauri

tauri

⚠️译者注: Это что-то вродеElectronчто-то, но не похожеElectronскажи такChromiumа такжеNode.jsУпакуйте это, это решеноElectronДве основные болевые точки клиентской части используют возможности операционной системы.webview, серверная часть и интеграция с операционной системой используют эту частьrustреализовать.

TauriЭто платформа для создания настольных приложений с интерфейсными технологиями. они используютvite-plugin-tauriпридти дляViteДобавлен официальный стартовый шаблон,Tauriчлены основной команды@Amr__Bashirподдерживаемый плагин.Vite + TauriЭто может быть отличное сочетание разработки собственных приложений. отTauriСлово от команды:«Вите занимает особое место в сердце Таури».

TroisJS

trois

troisjsКомбинированныйThreeJS,Vue 3,так же какViteдляVueСоздайте аналогичныйreact-three-fiberбиблиотека. можно нажатьэта ссылкаПосмотрите это действительно классное демоDemo(译者注: Я нажал, и это было 404, предполагается, что первоначальный автор сделал ошибку).@Rich_Harrisнедавно запущенSvelte CubedэтоSvelteПредоставляется на основе3DДекларативные сценарии для компонентов.ViteГорячее обновление дизайна идеально подходит для3Dсцена, на самом деле какая-тоreact-three-fiberПример теперь также используетVite.

Slidev

slidev

Другой из@antfuс проект,Slidevосновывается наMarkdownКонструктор слайд-шоу дляVite,Vue3а такжеWindiCSSпредоставить поддержку. ЭтоФункциябогатый,ViteМеханизм горячего обновления гарантирует, что изменения в коде будут немедленно отображены на слайдах. ЭтоViteОдин из лучших примеров создания новой волны инструментов.

Viteshot

viteshot

ViteshotК@fwoutsСоздан для использования за считанные секундыСоздание скриншотов компонентов пользовательского интерфейсаиз. он все еще исследуетReact Preview(в будущем планируется переименоватьPreview JS), это вVSCodeкомпоненты иStorybookпредварительный просмотр в реальном времени.

Backlight

backlight

⚠️译者注:этоLogoНебольшая часть правой стороны белая.Если поставить ее вместе с веб-страницей с белым фоном, то картинка не будет выглядеть очевидной.Если вам интересно, вы можете вручную изменить цвет фона этой веб-страницы, чтобы это увидеть.

Backlightиз<div>RIOTSПлатформа дизайн-системы. они используютViteдля создания своего приложения сVitePressписать документацию, они еще в разработкеbrowser-vite,этоViteФорк , который можно использовать в браузереVite(использоватьservice workerдля запуска службы).

участвовать!

Если вы терпеливо прочитали вышеизложенное, то я верю, что вы обязательноViteОпределенный интерес вызвала экология. Если вы не присоединилисьVite Land, то присоединяйтесь сейчас! Приходить#contributingПоздоровайся с каналом и поделись своим со всемиidea, а затем сотрудничать со всеми!

заключительное заявление

На самом деле, я мог бы продолжать и продолжатьViteсвязанный контент, например:Vanilla Extract has an official integration for Vite, Craft CMS integration, Storyblok is using Vite in lib mode for their build setups, Vercel added zero configuration deploys for Vite. Но я должен на чем-то остановиться, потому что, если я продолжу писать, эта статья будет слишком длинной, и никто не захочет ее читать. Как я сказал,ViteТекущее экологическое развитие слишком велико, чтобы перечислить все в одной статье.

И многие другие, которые я не упомянул:ViteЧлены основной команды и остальная часть команды отлично справляются с большим количеством проблем. ремонтировалbugи добавилfeature. И наша команда переводчиков, которые помогают большему количеству людей начать работуVite. И таких примеров просто не счесть. Я хотел бы включить некоторые из них в эту статью, поэтому вот список (в произвольном порядке):@shinigami,@underfin,@egoist,@Linus_Borg,@posva,@ KiaKing85,@ meteorlxy,@ ygj6,@OneNail,@Niputi_,@CHOYSEN,@ csr632,@nihalgonsalves,@ CAWA-93,@daychongyang,@remorses,@ydcjeff,@iheyunfei,@danielcroe,@ pi0,@threepointone,@khalwat,@hannoeru,@wheatjs,@artursignell,@ jgalbraith64,@pcalloc,@ QC-L ,@ShenQingchuan,@naokie,@ Джей Чоу-ES,@alexjoverm,@puruvjdevтак же какОсновная команда Viteа такжеВсе остальные участники экосистемы Vite. Давайте продолжим строить лучшее будущее вместе!

Эпилог

как насчет этого? Прочитав эту статью, вы узнали его снова?ViteШерстяная ткань? я думал раньшеViteтолько вVueБольше огневых кругов, эта статья, чтобы освежить свои знания.

Еще одна вещь, которая меня поражает, это@antfu, раньше былVueКогда я увидел его в родственном проекте, я почувствовал, что этот человек достаточно силен в бою.VueПосле прочтения этой статьи участвовал во многих проектах... Этот большой парень слишком силен! Вот сколько проектов ведется одновременно! И каждый проект выглядит потрясающе!

Кстати, позвольте представить вам этого здоровяка:antfuдаAnthony Fuсокращение от его фамилииFu, я всегда думал, что его фамилия Фу(福尔康的福), пока позже я не увидел его китайское имя на сайте пожертвований.Это было слишком давно, и я не могу вспомнить его полное имя, но я помню его китайскую фамилию:傅, если кто-то знает его китайское имя, он может опубликовать его в области комментариев, чтобы все могли его увидеть.

⚠️ Некоторые люди могут знать людей с фамилией Фу, так Фу и Фу это одна и та же фамилия? Является ли Фу традиционной версией Фу? Если вам интересно, вы можете нажать на эту статью:"Фу и Фу - одна и та же фамилия? 》Посмотрите, что все говорят

Кажется, это немного не по теме, эта статья является введениемViteне представлять安东尼·傅Да, я надеюсь, что чтение этой статьи развеет ваши опасения, и вы больше не будете сомневаться в использовании новых проектов.Vite(Постарайтесь не бросаться о старых проектах.) Не стесняйтесь использовать его! Столько проектов больших парней в ходу.Чужие проекты ненамного сложнее наших,да и не только ониVueНесколько человек в компании обслуживают его, и так много больших парней помогают, так чего ты боишься!

Эта статья была впервые опубликована в публичном аккаунте:предварительное обучение

Замечательные статьи в прошлом

Категории