Привет, ребята, я ваш капитан на этом корабле, и я буду показывать вам типичные шаги, чтобы поднять скорость вашего dev-сервера и комплектации на расстояние дальше, чем Марс, и быстрее, чем Space-X falcon 9.
Vite, произносится как /vit/[veet], французское слово, является фронтенд-инструментом для веб-разработки. Это пока самый быстрый dev-сервер, который связывает ваш код с модулем Rollup, и может использоваться с различными фреймворками, такими как Vue[js/ts], Vanilla[js/ts], Preact[js/ts], Svelte… но мы поговорим о
react.js.
На всякий случай, если вам интересно, насколько он быстр по сравнению с нативным CRA[create react app], посмотрите наглядное объяснение здесь.
Vite использует esbuild для предварительного связывания зависимостей и уменьшает количество запросов к браузеру, поскольку, как утверждается, это нативный ESM [ECMASCRIPT Module], поэтому он обрабатывает преобразование CommonJs в ESM. Интересным является то, что он поддерживает SSR, где он предоставляет API для эффективной загрузки и обновления исходного кода на основе ESM в Node.js во время разработки.
Необходимые условия
Если вы хотите насладиться этим хорошим материалом, у вас, по крайней мере, должно быть установлено все нижеперечисленное и вы должны быть немного знакомы с использованием…
- Менеджер пакетов Node.js, по крайней мере, версии 14.18.0, или скачать здесь.
- Менеджер пакетов Yarn [мое предпочтение] не ниже версии 1.22.0 или скачать здесь.
- Умеет использовать HTML/CSS и немного react.
Инициализация
Выполните следующую команду в терминале
$ yarn create vite
Эта команда настроит необходимые инструменты для создания приложений React в локальной среде.
В этом выводе вам будет предложено настроить ваш проект.
Вы заметите, что я сохранил имя своего проекта как asap-vite-project. Вы можете сохранить его с любым именем по вашему выбору.
После этого vite предложит вам выбрать, какой фреймворк вам нравится. В этом руководстве вы выберете react.js.
Помните, я упоминал, что для vite можно использовать либо Typescript, либо Javascript; поэтому в следующем предложении мы выберем `react, так как в этом уроке мы используем язык Javascript, а не Typescript.
Как только мы закончим с этим, vite запустит проект и попросит нас установить наши зависимости с помощью yarn, как показано выше…
Как указано выше, мы перейдем в наш текущий каталог следующим образом.
`
$ cd asap-vite-project
Затем введите yarn для установки необходимых зависимостей, как показано ниже;
$ yarn
Эта часть довольно интересна,
Теперь, после установки всех этих файлов, скажите мне, сколько времени прошло до завершения. Мой говорит…
Запуск сервера
Итак, основная работа была проделана, и этот шаг в значительной степени подводит нас к основной части использования.
Находясь в директории asap-vite-project, выполните следующий код
$ yarn dev
Эта команда запускает проект в режиме разработки.
Это приведет к следующему результату…
Как указано, откройте браузер и найдите в локальном браузере указанный адрес; у меня он запускается на http://localhost:5173/.
Заключение
И теперь вы полностью в пылающей, более быстрой, чем falcon 9 среде кодирования, и вы можете использовать ваше приложение react так же, как и любое другое приложение yarn или npm, только в элитном режиме…
И большой привет моему очень умному парню Lord Sarcastic за то, что вдохновил меня на написание этой статьи[он тоже пишет потрясающие вещи. Также, большое спасибо за то, что уделили время этому руководству, не стесняйтесь поделиться им с теми, кому это будет полезно.
Намасте!