Vite 1.0 еще не изучил, 2.0 выйдет?

Vue.js

предисловие

Сегодня, просматривая Weibo, я случайно увидел сообщение Weibo от You Yuxi:

Подарок к Новому году 🎁? Какой подарок? Вышел ли пакет совместимости IE11 для vue3? Или vue2.7 с длительной поддержкой отсутствует? Или vite 1.0 вышел? Спешите заглянуть:

Кажется, vite 1.0 наконец-то вышел, поторопитесь и нажмите Get Started, чтобы проверить его:

Эм? Миграция с v1? Разве обычно только при выпуске более высокой версии вы можете перейти с более низкой версии? Нажмите, чтобы увидеть:

хороший парень! вите 2.0? ! Я думал, что Vite усердно работал над выпуском версии 1.0! Я думал, что подожду выхода 1.0, а потом изучу, когда будет стабильно, а оказалось 2.0 быстрыми темпами! Это похоже на то, что говорилось в комментариях: я не учусь быстрее, чем вы можете писать!

Бесполезно жаловаться

Хотя я не могу не пожаловаться, что не могу учиться, но подумать об обновлении до 2.0 не так уж и плохо.Я считаю, что большинство людей, таких как я, вообще не имели глубокого понимания vite, но просто смотрел несколько раз.Эта статья знает, что делает vite, и в чем разница между ним и webpack?

Теперь осваиваем новое непосредственно, кратко переведем эту часть миграции с версии v1:

перевод

Изменения параметров конфигурации

  • Следующие параметры были удалены и должны быть переданыплагинвыполнить:

    • resolvers
    • transforms
    • indexHtmlTransforms

  • jsxа такжеenableEsbuildбыл удален, пожалуйста, используйте новыйesbuildопции.

  • Сейчас,Параметры, связанные с CSSВложен внутри css.

  • Теперь всеВарианты сборкивсе вложены в build.

    • rollupInputOptionsа такжеrollupOutputOptionsзаменяется наbuild.rollupOptions.
    • esbuildTargetзаменяется наbuild.target.
    • emitManifestзаменяется наbuild.manifest.
    • Следующие параметры сборки были удалены, так как они могут быть достигнуты с помощью функций подключения плагина или других параметров:
      • entry
      • rollupDedupe
      • emitAssets
      • emitIndex
      • shouldPreload
      • configureBuild

  • Теперь всеспецифичные для сервера параметрывложены в сервер.

    • hostnameзаменяется наserver.host.
    • httpsOptionsбыл удален,server.httpsОбъект параметров может быть принят напрямую.
    • chokidarWatchOptionsзаменяется наserver.watch.
    • assetsIncludeпринять сейчасstring | RegExp | (string | RegExp)[]параметр типа, а неfunction.

  • Удалите все специфичные для Vue параметры; передайте параметры плагину Vue.

Поддержка VUE

Ядро Vite 2.0 теперь не зависит от фреймворка. теперь через@vitejs/plugin-vueЭтот плагин для поддержки Vue. Просто установите и добавьте его в свою конфигурацию Vite:

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()]
}

Преобразование пользовательских блоков

Пользовательские плагины можно использовать для преобразования пользовательских блоков Vue следующим образом:

// vite.config.js
import vue from '@vitejs/plugin-vue'

const vueI18nPlugin = {
  name: 'vue-i18n',
  transform(code, id) {
    if (!/vue&type=i18n/.test(id)) {
      return
    }
    if (/\.ya?ml$/.test(id)) {
      code = JSON.stringify(require('js-yaml').safeLoad(code.trim()))
    }
    return `export default Comp => {
      Comp.i18n = ${code}
    }`
  }
}

export default {
  plugins: [vue(), vueI18nPlugin]
}

Реагировать на поддержку

теперь доступно через@vitejs/plugin-react-refreshЭтот плагин для поддержки React Fast Refresh.

Изменения API HMR

import.meta.hot.acceptDeps()Устарело.import.meta.hot.accept()Один или несколько отложений теперь приняты.

Изменения формата манифеста

Строительный манифест теперь требует следующего формата:

{
  "index.js": {
    "file": "assets/index.acaf2b48.js",
    "imports": [...]
  },
  "index.css": {
    "file": "assets/index.7b7dbd85.css"
  }
  "asset.png": {
    "file": "assets/asset.0ab0f9cd.png"
  }
}

Для фрагментов ввода JS также перечислены импортированные фрагменты, которые можно использовать в директивах предварительной загрузки рендеринга.

Для авторов плагинов

Vite 2 использует полностью переработанный интерфейс плагина, который расширяет плагин Rollup. Пожалуйста, прочтите новыйРуководство по разработке плагинов".

Некоторые примечания по переносу плагинов версии 1 на версию 2:

  • resolvers-> использоватьresolveId hook
  • transforms-> использоватьtransform hook
  • indexHtmlTransforms-> использоватьtransformIndexHtml hook
  • Обслуживание виртуальных файлов -> использованиеresolveId + load hook
  • Добавить кalias,defineили другие параметры конфигурации -> использоватьconfig hook

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

Эпилог

Видно, что помимо изменения многих API в vite 2.0, самым большим изменением является то, что он больше не привязан по умолчанию к Vue, то есть не имеет ничего общего с фреймворком.

Несколько месяцев назад я загрузил vite и протестировал его. По умолчанию используется проект vue 3. Я чувствую, что амбиции You Yuxi становятся все больше и больше: возможно, раньше я хотел убить webpack в экологии vue, но теперь я могу просто убейте его напрямую.вебпак,во всяком случае,вебпак я сейчас почти забыл.Лучше учить новый вебпак 5,чем учить иудовский вайт.

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

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

Категории