Что такое Vite?
Vite — это оркестратор пакетов, который помогает нам управлять малыми и средними веб-приложениями. Его проще настроить, чем другие сборщики, и это хороший способ познакомиться с миром интерфейсной инфраструктуры.
Зачем писать плагины?
Как и в случае с любой технологией, иногда нам нужна некоторая настройка нашего кода и технологии. В этом случае нам нужно писать плагины vite во многих случаях, когда мы хотим изменить способ работы нашего сборщика, когда мы хотим применить другое поведение во время сборки или когда мы хотим изменить нашу кодовую базу и то, как она себя ведет. в разных средах.
Начнем
Вы можете написать встроенный плагин Vite, чтобы понять, как он выглядит. Вот несколько вариантов API плагинов, которые у нас есть:
Список хуков плагинов Vite
buildEnd
buildStart
closeWatcher
load
moduleParsed
options
resolveDynamicImport
resolveId
shouldTransformCachedModule
transform
смотретьИзменить
Контекст плагина Vite (объединения)
Когда мы используем хуки, у нас будет несколько служебных функций, которые помогут нам написать наши плагины vite.
this.addWatchFile — если мы хотим просмотреть определенные файлы
this.emitFile — создает выходной файл, который можно использовать в нашем финальном пакете.
this.error — ошибка, прервавшая процесс сборки.
this.getCombinedSourcemap — получить предыдущую исходную карту наших файлов.
this.getFileName — получить имя файла или фрагмент
this.getModuleIds — предоставить доступ ко всем идентификаторам модулей.
this.getModuleInfo — вернуть информацию о модуле (id, code, isEntry, meta, isIncluded)
this.getWatchFiles — получить просмотренные файлы.
This.load — загружает и анализирует модуль соответствующего идентификатора модуля.
This.meta — содержит метаданные сводки.
this.parse — используйте внутренний экземпляр желудя Rollup для парсинга кода в AST.
this.resolve — выполняет разрешение импорта в нашей базе кода для идентификаторов модулей.
this.setAssetSource — задайте ресурс отложенного актива.
Наш первый плагин Vite
В следующем примере мы напишем простой плагин, который поможет нам понять, как может выглядеть финальная версия конфигурации vite. Поскольку, когда мы пишем нашу конфигурацию vite, она может быть очень динамичной и состоять из разных источников конфигурации. Таким образом, следующий плагин просто выведет текущую конфигурацию vite.
Простая функция, которая возвращает объект с функцией «имя» и «конфигурация». Функция конфигурации имеет окончательную конфигурацию vite, и внутри мы будем использовать console.log javascript для вывода конфигурации с помощью JSON stringify и некоторых приемов предварительной настройки, чтобы сделать конфигурацию читаемой в терминале.
Распространенные плагины Vite
Вот список распространенных плагинов Vite, а вот список плагинов сообщества vite.
vite-ts-quick — Vue 3 + Vuex + Vue-router + TypeScript Quick Template.
vue-component-template — Шаблон для создания собственного компонента Vue3 TSX.
vite-reactts-antd-starter — React, TypeScript, Antd.
