[Перевод] Vite – ведение разработки без бандлов на Vue04.06.2020 19:17

Привет, хабровчане. В июне OTUS запускает курс «Vue.js разработчик». В преддверии старта курса мы традиционно подготовили перевод интересного материала.

Однажды Эван Ю (создатель Vue.js) решил не поспать ночью и в итоге создал Vite.

g5oz1jmhb08xauhawfgz9_caspu.png

Vite позволяет вам создавать приложения на Vue с однофайловыми компонентами без шага сборки бандлов. Импорты запрашиваются браузером как нативные модули ES. Dev-сервер перехватывает запросы к файлам .vue и компилирует их на лету. И это происходит мгновенно.

Обратите внимание, что Vite — это пока экспериментальное решение, и я не знаю, что случится в будущем и насколько долго эта статья будет оставаться полезной. Относитесь к этому как к аперитиву или как просто к чему-то веселому.

Давайте попробуем


Создайте следующие файлы:

Comp.vue

index.html

Затем выполните:

npx vite

Перейдите на http://localhost:3000, отредактируйте файл .vue, чтобы увидеть мгновенное внесение изменений.

Сборка на продакшн


Теперь давайте создадим production-ready приложение.

Создайте package.json

{
  "scripts": {
    "build": "vite build"
  }
}

Выполните: 

npm i -D vite
npm run build

Проверьте директорию с кодом.
Проблемы, с которыми я столкнулся:

  • Error: Cannot find module 'tslib'
    Решается выполнением npm i -D tslib
  • Error: ENOENT: no such file or director
    Решается созданием пустой директории вручную

Мысли


Начать было действительно легко, и разработка пошла быстрее, поскольку я сразу видел результат вносимых изменений. Чем-то похоже на компиляцию на лету. Так что это выглядит действительно многообещающе, может быть, спустя время, мы перейдем как раз к такому способу разработки на Vue.

Эван Ю, твори свою магию.

Забавный факт: vue с французского переводится как вид, а vite как быстро.
Похоже, что на данный момент времени работа над Vite завершена, и возможно, будет продолжена после выхода Vue 3. Самый легкий способ попробовать — это Vue 3 beta.

Я сказал о том, что она завершена, опираясь на твит Эвана Ю. Однако глядя на коммиты в репозитории, можно сказать, что работа все еще ведется.


Узнать о курсе подробнее.

© Habrahabr.ru