Руководство о том, как сделать простой плагин Vite
Vite — невероятный инструмент для сборки современных веб-проектов. Помимо базовой конфигурации, Vite также позволяет нам делать больше со сторонними плагинами. В этой статье я покажу вам один из самых простых способов написать плагин Vite.
Какой плагин мы будем делать?
Прежде чем приступить к созданию плагина Vite, я немного расскажу об основной функции этого плагина. Вы знаете CNAME? Если не знаете, то можете посмотреть здесь.
Где-то нам нужно создать файл CNAME, чтобы наш личный домен работал. Это означает, что каталог «dist» или «build» должен содержать этот файл. В проекте Vite мы можем сделать это легко, создав файл CNAME в «общедоступном» каталоге. Но поскольку в этой статье нам нужно сделать плагин Vite, я выберу эту тему для нашего плагина. С помощью этого плагина мы можем автоматически генерировать файл CNAME, просто нужно определить домен в vite.config.js. Кроме того, что нет необходимости создавать файл, этот плагин позволяет пользователям использовать некоторую логику для определения доменного имени, условий, среды…
Создать проект Vite
Я думаю, мы начнем с основного шага — создания проекта Vite. У нас есть много способов создать проект Vite. В этой статье я буду использовать один из самых простых способов с помощью команды yarn create. Я создам проект Vite с шаблоном React (вы можете использовать Vue, другие шаблоны или вообще не использовать шаблон). Я запущу эту команду с шаблоном React, чтобы создать проект Vite:
yarn create vite vite-plugin --template react
Вот проект, созданный этой командой:
Мы можем увидеть список плагинов в файле avite.config.js. У нас уже есть добавленный плагин react. Мы создадим новый плагин и добавим его в этот список следующим образом. Давайте запустим команду сборки, чтобы увидеть результат по команде yarn build.
Как видите, мы получим каталог «dist», который содержит все выходные файлы проекта. Задача нашего плагина — автоматически создать файл CNAME в этом каталоге в процессе сборки. Давай сделаем это!
Давайте создадим наш плагин
На этом этапе мы рассмотрим способ и основной принцип создания плагина Vite. Основываясь на документе Vite, мы можем видеть, что формат плагина Vite является объектом. В этом объекте мы можем определить действие нашего плагина. Но Vite также рекомендует создать фабричную функцию, которая возвращает фактический объект плагина вместо простого объекта. Потому что функция может принимать параметры, позволяющие пользователям настраивать поведение плагина. Итак, в этой статье я определю наш плагин как фабричную функцию. Я создам наш плагин в файле «viteCNAMEPlugin.js» в корне. Вот его исходный код:
Чтобы использовать этот плагин, нам просто нужно добавить его в массив плагинов в vite.config.js.
Я снова запущу команду yarn build. Давайте результат:
Он работает успешно. На следующем этапе мы будем работать с «хуками» в разработке плагинов Vite.
Поиграйте с крючком, чтобы реализовать наше действие
В предыдущей части мы знали, что плагин Vite определяется как объект. В этой части мы будем работать с этим объектом. Во-первых, нам нужно знать о «зацепках сборки» в Vite.
Каждый раз, когда мы запускаем команду сборки, Vite выполняет множество шагов для завершения этого процесса. У каждого шага есть своя задача (пример: подготовка к сборке, загрузка конфигурации, сборка, объединение…). Vite предоставляет нам сборочные хуки, которые соответствуют шагу сборки в процессе сборки. С помощью этих хуков мы можем добавлять наши действия в процесс сборки. Вот пример его изображения:
В Vite у нас есть универсальные крючки и специальные крючки Vite. В этой статье мы будем работать с двумя хуками из Universal Hooks и Vite Specific Hooks.
Об Universal Hooks документ Vite написан так
Во время разработки сервер разработки Vite создает контейнер плагинов, который вызывает обработчики сборки Rollup так же, как это делает Rollup.
Это означает, что мы можем следовать обработчикам сборки из Rollup.js, чтобы определить наше действие. Вы можете взглянуть на эту страницу:
В нашем плагине я буду использовать хук «writeBundle» для создания файла CNAME. Я выбираю этот хук, потому что это последний хук фазы генерации вывода. Я думаю, что это хорошая фаза для создания нашего файла CNAME. Для этого нам просто нужно добавить новое свойство в наш объектный плагин. Имя свойства — «writeBundle», а значение свойства — функция. В этой функции мы создадим файл CNAME в каталоге сборки. Это так просто сделать, вот исходный код моего плагина после того, как мы добавили это свойство:
Это простая функция. Его задача — просто создать новый файл в папке «./dist/CNAME», так как содержимое — это значение из «домена». Давайте проверим это!
Это сработало хорошо! Файл CNAME с содержимым «sangnguyen.dev» создается в каталоге dist. Я думаю, что мы достигли цели в этой статье. Мы создали плагин, который позволяет пользователям автоматически создавать файл CNAME. Но помните ли вы, что я сказал выше? Я сказал, что мы будем работать как с универсальными крючками, так и со специфическими крючками Vite. В настоящее время мы работаем только с одним хуком «writeBundle» от Universal Hooks. В следующей части мы будем работать с хуком Vite Specific.
Оптимизируйте наш плагин с помощью configResolved hook
В заголовке этой части я упоминаю хук «configResolved». Это один из специфических крючков Vite. Но прежде чем поиграться с этим хуком, мы поговорим о плохих сторонах нашего плагина. В нашем плагине мы зафиксировали каталог сборки как «dist». Будет проблемой, если пользователь изменит outDir . Давайте посмотрим эту демонстрацию здесь:
Как видите, проблема возникает. После завершения команды сборки у нас есть два каталога. Один из них — выходной код. Одним из них является каталог «dist», который содержит только файл CNAME. У нас есть много способов решить эту проблему. Один из них — добавить еще одну опцию в наш плагин. Эта опция определяет расположение выходного каталога. Но мне это решение не очень нравится. Поэтому я рекомендую вам другое решение. Это нужно для использования хука «configResolved» для получения значений конфигурации сборки.
Хук «configResolved» — это функция с параметром. Значение этого параметра — «resolvedConfig». На основе документа Vite нам просто нужно создать глобальную переменную и присвоить значение конфигурации этому варианту в этом хуке. Затем мы можем получить доступ к значениям конфигурации в других хуках. Смотрим изменения:
Мы создали новую глобальную переменную viteConfig. В хуке «configResolved» нам просто нужно присвоить параметр переменной viteConfig. Затем мы можем получить доступ к дистрибутиву сборки из viteConfig по пути viteConfig.build.outDir. Давайте проверим это:
У нас есть три случая для тестирования. Первый случай — обычный случай. Второй случай — сборка dist из команды. Последний случай — сборка дистрибутива из файла vite.config.js. Он работал хорошо во всех трех случаях. Я думаю, мы можем «допилить» наш плагин в этой части.
Заключение
Vite — это современный инструмент для сборки. Я думаю, что в будущем он вырастет еще больше. Я надеюсь, что эта статья даст вам полезную информацию. С ними вы можете создавать свои собственные плагины Vite. Это полный исходный код нашей демонстрации на Github:
Помимо вещей, которыми я поделился в этой статье, есть несколько ссылок, которые я рекомендую вам прочитать.
Спасибо за прочтение. Опять же, я надеюсь, что эта статья будет вам полезна.
Свяжитесь со мной через LinkedIn или Twitter.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.
