# Html Injection Vite Plugin
[](https://www.npmjs.com/package/vite-plugin-html-injection)
[](https://www.npmjs.com/package/vite-plugin-html-injection)
[🇬🇧 English](README.md) | [🇪🇸 Español](README.es.md) | [🇷🇺 Русский](README.ru.md) | [🇨🇳 中文](README.zh.md)
Плагин Vite для внедрения HTML, JS и CSS фрагментов кода в `index.html`.
## Назначение
При разработке фронтенд-приложений часто возникает необходимость интеграции различных библиотек в файл `index.html` - например, добавление кода для Google Analytics, сервис-воркеров PWA, мета-тегов Open Graph и Twitter Card, заставок, виджетов поддержки клиентов и многого другого.
В результате `index.html` становится перегруженным и сложным в управлении.
Этот плагин позволяет хранить фрагменты кода в отдельных файлах, сохраняя `index.html` чистым и аккуратным, и внедрять их во время сборки. Никаких специальных placeholder-тегов в `index.html` не требуется.
Плагин также поддерживает HMR (Hot Module Replacement) сервера разработки Vite, что означает возможность редактирования фрагментов кода с немедленным отображением изменений в браузере.
Более того, плагин поддерживает различные конфигурации для режимов разработки и продакшена. Указав свойство `buildModes`, вы можете включать или отключать определенные фрагменты кода в зависимости от окружения, упрощая разработку и отключая ненужный код в `dev` режиме.
## Описание
Существует три `типа` фрагментов кода - `raw`, `js` и `css`. `raw`-фрагменты внедряются как есть, а `js` и `css` фрагменты оборачиваются в теги `
```
Всё. После выполнения команд `npm serve` или `npm build` фрагменты кода будут внедрены.
## Сигнатура
Плагин строго типизирован. Вот сигнатура его конфигурации:
```ts
export interface IHtmlInjectionConfig {
injections: IHtmlInjectionConfigInjection[];
order?: "pre" | "post";
}
export interface IHtmlInjectionConfigInjection {
name?: string;
path: string;
type?: "raw" | "js" | "css"; // по умолчанию 'raw'
injectTo: "head" | "body" | "head-prepend" | "body-prepend";
buildModes?: "dev" | "prod" | "both"; // по умолчанию 'both'
}
```
## Если вам понравилось - поставьте звезду
Спасибо!
## Содействие
Вы можете предлагать улучшения через [GitHub Issues](https://github.com/vite-plugin-html-injection/issues) или расширять функциональность, [fork, edit, create Pull Request](https://github.com/vite-plugin-html-injection/pulls) для этого Vite-плагина.
## Лицензия
Лицензия MIT © 2023-2025