# Plugin de Inyecci贸n HTML para Vite
[](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)
Plugin de Vite para inyectar fragmentos de c贸digo HTML, JS y CSS en `index.html`.
## Prop贸sito
A menudo, al desarrollar aplicaciones front-end, es necesario integrar diversas bibliotecas en el archivo `index.html`. Por ejemplo, puede que quieras incluir c贸digo para Google Analytics, service workers de PWA, metadatos de Open Graph y Twitter Card, pantallas de bienvenida, widgets de soporte al cliente y mucho m谩s.
Como resultado, `index.html` se vuelve sobrecargado y dif铆cil de gestionar.
Este plugin te permite almacenar fragmentos de c贸digo en archivos separados, manteniendo `index.html` limpio y ordenado, e inyect谩ndolos en tiempo de compilaci贸n. No es necesario utilizar etiquetas de marcador de posici贸n especiales en el `index.html`.
El plugin tambi茅n soporta `Vite dev server HMR`, lo que significa que puedes editar los fragmentos de c贸digo y ver los resultados inmediatamente en el navegador.
Adem谩s, el plugin permite configuraciones diferentes en los modos de desarrollo y producci贸n. Al especificar la propiedad `buildModes`, puedes habilitar o deshabilitar fragmentos espec铆ficos dependiendo del entorno, simplificando el desarrollo y reduciendo el c贸digo innecesario en las compilaciones de producci贸n.
## Descripci贸n
Existen tres `tipos` de fragmentos de c贸digo: `raw`, `js` y `css`. Los fragmentos `raw` se inyectan tal cual, mientras que los fragmentos `js` y `css` se envuelven en etiquetas `
```
Eso es todo. Despu茅s de ejecutar el comando `npm serve` o `npm build`, los fragmentos de c贸digo ser谩n inyectados.
## Configuraci贸n para Diferentes Modos
El plugin soporta configuraciones diferentes para los entornos de desarrollo y producci贸n. Al configurar la propiedad `buildModes` para cada inyecci贸n, puedes controlar si un fragmento se incluye en el servidor de desarrollo, en la compilaci贸n de producci贸n o en ambos. Esta flexibilidad te permite deshabilitar fragmentos de c贸digo innecesarios durante el desarrollo, mejorando el rendimiento y simplificando el proceso de desarrollo.
```ts:path/to/types.d.ts
export interface IHtmlInjectionConfig {
injections: IHtmlInjectionConfigInjection[];
order?: "pre" | "post";
}
export interface IHtmlInjectionConfigInjection {
name?: string;
path: string;
type?: "raw" | "js" | "css"; // valor por defecto es 'raw'
injectTo: "head" | "body" | "head-prepend" | "body-prepend";
buildModes?: "dev" | "prod" | "both"; // valor por defecto es 'both'
}
```
## Firma
El plugin est谩 altamente tipado. Aqu铆 est谩 la firma de su configuraci贸n:
```ts:path/to/types.d.ts
export interface IHtmlInjectionConfig {
injections: IHtmlInjectionConfigInjection[];
order?: "pre" | "post";
}
export interface IHtmlInjectionConfigInjection {
name?: string;
path: string;
type?: "raw" | "js" | "css"; // valor por defecto es 'raw'
injectTo: "head" | "body" | "head-prepend" | "body-prepend";
buildModes?: "dev" | "prod" | "both"; // valor por defecto es 'both'
}
```
## Si Te Gusta, Estrella el Proyecto
隆Gracias!
## Contribuciones
Eres bienvenido a hacer sugerencias a trav茅s de [GitHub Issues](https://github.com/your-repo/issues) o extender la funcionalidad al [hacer un fork, modificar y crear un PR](https://github.com/your-repo/pulls) a este plugin para Vite.
## Licencia
Licencia MIT 漏 2023-2024
## Traducciones Disponibles
- [README.md](./README.md)
- [README.ru.md](./README.ru.md)