├── .gitignore
├── README.es.md
├── README.md
├── README.ru.md
├── README.zh.md
├── index.ts
├── package.json
├── pnpm-lock.yaml
├── tsconfig.json
├── types.d.ts
└── vite.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | .history
26 |
--------------------------------------------------------------------------------
/README.es.md:
--------------------------------------------------------------------------------
1 | # Plugin de Inyección HTML para Vite
2 |
3 | [](https://www.npmjs.com/package/vite-plugin-html-injection)
4 | [](https://www.npmjs.com/package/vite-plugin-html-injection)
5 |
6 | [🇬🇧 English](README.md) | [🇪🇸 Español](README.es.md) | [🇷🇺 Русский](README.ru.md) | [🇨🇳 中文](README.zh.md)
7 |
8 | Plugin de Vite para inyectar fragmentos de código HTML, JS y CSS en `index.html`.
9 |
10 | ## Propósito
11 |
12 | 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.
13 |
14 | Como resultado, `index.html` se vuelve sobrecargado y difícil de gestionar.
15 |
16 | 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`.
17 |
18 | 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.
19 |
20 | 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.
21 |
22 | ## Descripción
23 |
24 | 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 `
119 |
128 | ```
129 |
130 |
131 |
132 | Eso es todo. Después de ejecutar el comando `npm serve` o `npm build`, los fragmentos de código serán inyectados.
133 |
134 |
135 |
136 | ## Configuración para Diferentes Modos
137 |
138 | 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.
139 |
140 | ```ts:path/to/types.d.ts
141 | export interface IHtmlInjectionConfig {
142 | injections: IHtmlInjectionConfigInjection[];
143 | order?: "pre" | "post";
144 | }
145 |
146 | export interface IHtmlInjectionConfigInjection {
147 | name?: string;
148 | path: string;
149 | type?: "raw" | "js" | "css"; // valor por defecto es 'raw'
150 | injectTo: "head" | "body" | "head-prepend" | "body-prepend";
151 | buildModes?: "dev" | "prod" | "both"; // valor por defecto es 'both'
152 | }
153 | ```
154 |
155 |
156 |
157 | ## Firma
158 |
159 | El plugin está altamente tipado. Aquí está la firma de su configuración:
160 |
161 | ```ts:path/to/types.d.ts
162 | export interface IHtmlInjectionConfig {
163 | injections: IHtmlInjectionConfigInjection[];
164 | order?: "pre" | "post";
165 | }
166 |
167 | export interface IHtmlInjectionConfigInjection {
168 | name?: string;
169 | path: string;
170 | type?: "raw" | "js" | "css"; // valor por defecto es 'raw'
171 | injectTo: "head" | "body" | "head-prepend" | "body-prepend";
172 | buildModes?: "dev" | "prod" | "both"; // valor por defecto es 'both'
173 | }
174 | ```
175 |
176 |
177 |
178 | ## Si Te Gusta, Estrella el Proyecto
179 |
180 | ¡Gracias!
181 |
182 |
183 |
184 | ## Contribuciones
185 |
186 | 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.
187 |
188 |
189 |
190 | ## Licencia
191 |
192 | Licencia MIT © 2023-2024
193 |
194 |
195 |
196 | ## Traducciones Disponibles
197 |
198 | - [README.md](./README.md)
199 | - [README.ru.md](./README.ru.md)
200 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Html Injection Vite Plugin
2 |
3 | [](https://www.npmjs.com/package/vite-plugin-html-injection)
4 | [](https://www.npmjs.com/package/vite-plugin-html-injection)
5 |
6 | [🇬🇧 English](README.md) | [🇪🇸 Español](README.es.md) | [🇷🇺 Русский](README.ru.md) | [🇨🇳 中文](README.zh.md)
7 |
8 | Vite plugin for injecting HTML, JS, and CSS code snippets into `index.html`.
9 |
10 | ## Purpose
11 |
12 | Often, when developing front-end applications, it is necessary to integrate various libraries into the `index.html` file - for example, you might want to include code for Google Analytics, PWA service workers, Open Graph and Twitter Card meta data, Splash screens, Customer support widgets, and much more.
13 |
14 | As a result, `index.html` becomes bloated and hard to manage.
15 |
16 | This plugin allows you to store code snippets in separate files, keeping `index.html` clean and pristine, and inject them at build time. There is no need for special placeholder tags in the `index.html` as well.
17 |
18 | The plugin also supports `Vite dev server HMR`, which means you can edit code snippets and see the results immediately in the browser.
19 |
20 | Additionally, the plugin allows for different configurations in development and production modes. By specifying the `buildModes` property, you can enable or disable specific code snippets depending on the environment, simplifying development and reducing unnecessary code in Dev mode.
21 |
22 | ## Description
23 |
24 | There are three `types` of code snippets - `raw`, `js`, and `css`. `raw` snippets are injected as-is, while `js` and `css` snippets are wrapped in `
127 | ```
128 |
129 |
130 |
131 | That's it. After running `npm serve` or `npm build` command the code snippets will be injected.
132 |
133 |
134 |
135 | ## Signature
136 |
137 | The plugin is strongly typed. Here is the signature of its configuration:
138 |
139 | ```ts
140 | export interface IHtmlInjectionConfig {
141 | injections: IHtmlInjectionConfigInjection[];
142 | order?: "pre" | "post";
143 | }
144 |
145 | export interface IHtmlInjectionConfigInjection {
146 | name?: string;
147 | path: string;
148 | type?: "raw" | "js" | "css"; // default is 'raw'
149 | injectTo: "head" | "body" | "head-prepend" | "body-prepend";
150 | buildModes?: "dev" | "prod" | "both"; // default is 'both'
151 | }
152 | ```
153 |
154 |
155 |
156 | ## If you like it, star it
157 |
158 | Thank you!
159 |
160 |
161 |
162 | ## Contributing
163 |
164 |
165 | You are welcome to make suggestions through [GitHub Issues](https://github.com/vite-plugin-html-injection/issues) or extend functionality by [forking, modifying, and making a PR](https://github.com/vite-plugin-html-injection/pulls) to this Vite plugin.
166 |
167 |
168 |
169 | ## License
170 |
171 | MIT License © 2023-2025
172 |
--------------------------------------------------------------------------------
/README.ru.md:
--------------------------------------------------------------------------------
1 | # Html Injection Vite Plugin
2 |
3 | [](https://www.npmjs.com/package/vite-plugin-html-injection)
4 | [](https://www.npmjs.com/package/vite-plugin-html-injection)
5 |
6 | [🇬🇧 English](README.md) | [🇪🇸 Español](README.es.md) | [🇷🇺 Русский](README.ru.md) | [🇨🇳 中文](README.zh.md)
7 |
8 | Плагин Vite для внедрения HTML, JS и CSS фрагментов кода в `index.html`.
9 |
10 | ## Назначение
11 |
12 | При разработке фронтенд-приложений часто возникает необходимость интеграции различных библиотек в файл `index.html` - например, добавление кода для Google Analytics, сервис-воркеров PWA, мета-тегов Open Graph и Twitter Card, заставок, виджетов поддержки клиентов и многого другого.
13 |
14 | В результате `index.html` становится перегруженным и сложным в управлении.
15 |
16 | Этот плагин позволяет хранить фрагменты кода в отдельных файлах, сохраняя `index.html` чистым и аккуратным, и внедрять их во время сборки. Никаких специальных placeholder-тегов в `index.html` не требуется.
17 |
18 | Плагин также поддерживает HMR (Hot Module Replacement) сервера разработки Vite, что означает возможность редактирования фрагментов кода с немедленным отображением изменений в браузере.
19 |
20 | Более того, плагин поддерживает различные конфигурации для режимов разработки и продакшена. Указав свойство `buildModes`, вы можете включать или отключать определенные фрагменты кода в зависимости от окружения, упрощая разработку и отключая ненужный код в `dev` режиме.
21 |
22 | ## Описание
23 |
24 | Существует три `типа` фрагментов кода - `raw`, `js` и `css`. `raw`-фрагменты внедряются как есть, а `js` и `css` фрагменты оборачиваются в теги `
126 | ```
127 |
128 |
129 |
130 | Всё. После выполнения команд `npm serve` или `npm build` фрагменты кода будут внедрены.
131 |
132 |
133 |
134 | ## Сигнатура
135 |
136 | Плагин строго типизирован. Вот сигнатура его конфигурации:
137 |
138 | ```ts
139 | export interface IHtmlInjectionConfig {
140 | injections: IHtmlInjectionConfigInjection[];
141 | order?: "pre" | "post";
142 | }
143 |
144 | export interface IHtmlInjectionConfigInjection {
145 | name?: string;
146 | path: string;
147 | type?: "raw" | "js" | "css"; // по умолчанию 'raw'
148 | injectTo: "head" | "body" | "head-prepend" | "body-prepend";
149 | buildModes?: "dev" | "prod" | "both"; // по умолчанию 'both'
150 | }
151 | ```
152 |
153 |
154 |
155 | ## Если вам понравилось - поставьте звезду
156 |
157 | Спасибо!
158 |
159 |
160 |
161 | ## Содействие
162 |
163 | Вы можете предлагать улучшения через [GitHub Issues](https://github.com/vite-plugin-html-injection/issues) или расширять функциональность, [fork, edit, create Pull Request](https://github.com/vite-plugin-html-injection/pulls) для этого Vite-плагина.
164 |
165 |
166 |
167 | ## Лицензия
168 |
169 | Лицензия MIT © 2023-2025
170 |
--------------------------------------------------------------------------------
/README.zh.md:
--------------------------------------------------------------------------------
1 | # Html 注入 Vite 插件
2 |
3 | [](https://www.npmjs.com/package/vite-plugin-html-injection)
4 | [](https://www.npmjs.com/package/vite-plugin-html-injection)
5 |
6 | [🇬🇧 English](README.md) | [🇪🇸 Español](README.es.md) | [🇷🇺 Русский](README.ru.md) | [🇨🇳 中文](README.zh.md)
7 |
8 | 用于在 `index.html` 中注入 HTML、JS 和 CSS 代码片段的 Vite 插件。
9 |
10 | ## 目的
11 |
12 | 在开发前端应用程序时，通常需要将各种库集成到 `index.html` 文件中 - 例如，您可能需要包含 Google Analytics 的代码、PWA 服务工作者、Open Graph 和 Twitter Card 元数据、启动画面、客户支持小部件等。
13 |
14 | 因此，`index.html` 变得臃肿且难以管理。
15 |
16 | 该插件允许您将代码片段存储在单独的文件中，保持 `index.html` 干净整洁，并在构建时注入它们。无需在 `index.html` 中添加特殊的占位符标签。
17 |
18 | 该插件还支持 Vite 开发服务器的热模块替换（HMR），这意味着您可以编辑代码片段并立即在浏览器中看到结果。
19 |
20 | 此外，该插件支持开发和生产模式的不同配置。通过指定 `buildModes` 属性，您可以根据环境启用或禁用特定的代码片段，简化开发并在 `dev` 模式下禁用不必要的代码。
21 |
22 | ## 描述
23 |
24 | 代码片段有三种 `类型` - `raw`、`js` 和 `css`。`raw` 片段按原样注入，而 `js` 和 `css` 片段分别被包装在 `
126 | ```
127 |
128 |
129 |
130 | 就是这样。执行 `npm serve` 或 `npm build` 命令后，代码片段将被注入。
131 |
132 |
133 |
134 | ## 签名
135 |
136 | 该插件是强类型的。以下是其配置的签名：
137 |
138 | ```ts
139 | export interface IHtmlInjectionConfig {
140 | injections: IHtmlInjectionConfigInjection[];
141 | order?: "pre" | "post";
142 | }
143 |
144 | export interface IHtmlInjectionConfigInjection {
145 | name?: string;
146 | path: string;
147 | type?: "raw" | "js" | "css"; // 默认为 'raw'
148 | injectTo: "head" | "body" | "head-prepend" | "body-prepend";
149 | buildModes?: "dev" | "prod" | "both"; // 默认为 'both'
150 | }
151 | ```
152 |
153 |
154 |
155 | ## 如果您喜欢，请给个星星
156 |
157 | 谢谢！
158 |
159 |
160 |
161 | ## 贡献
162 |
163 | 您可以通过 [GitHub Issues](https://github.com/vite-plugin-html-injection/issues) 提出改进建议，或通过 [fork、编辑、创建 Pull Request](https://github.com/vite-plugin-html-injection/pulls) 来扩展此 Vite 插件的功能。
164 |
165 |
166 |
167 | ## 许可证
168 |
169 | MIT 许可证 © 2023-2025
--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
1 | import path from "path";
2 | import fs from "fs";
3 | import type { Plugin, ResolvedConfig } from "vite";
4 | import type { IHtmlInjectionConfig, IHtmlInjectionConfigInjection } from "./types";
5 |
6 | export function htmlInjectionPlugin(
7 | htmlInjectionConfig: IHtmlInjectionConfig,
8 | ): Plugin {
9 | let config: undefined | ResolvedConfig;
10 |
11 | return {
12 | name: "html-injection",
13 |
14 | configResolved(resolvedConfig) {
15 | config = resolvedConfig;
16 | },
17 |
18 | transformIndexHtml: {
19 | order: htmlInjectionConfig.order,
20 | handler: (html: string) => transformHtml({ html, config, htmlInjectionConfig }),
21 | },
22 | };
23 | }
24 |
25 | type TransformProps = {
26 | html: string;
27 | htmlInjectionConfig: IHtmlInjectionConfig;
28 | config?: ResolvedConfig;
29 | };
30 |
31 | function transformHtml({ html, htmlInjectionConfig, config }: TransformProps) {
32 | let out = html;
33 |
34 | for (let i = 0; i < htmlInjectionConfig.injections.length; i++) {
35 | const injection: IHtmlInjectionConfigInjection =
36 | htmlInjectionConfig.injections[i];
37 |
38 | const root = (config as ResolvedConfig).root;
39 | const filePath = path.resolve(root, injection.path);
40 | let data = fs.readFileSync(filePath, "utf8");
41 |
42 | if (
43 | injection.buildModes &&
44 | ((injection.buildModes === "dev" && !config?.env.DEV) ||
45 | (injection.buildModes === "prod" && !config?.env.PROD))
46 | ) {
47 | continue;
48 | }
49 |
50 | if (injection.type === "js") {
51 | data = `\n`;
52 | } else if (injection.type === "css") {
53 | data = `\n`;
54 | }
55 |
56 | switch (injection.injectTo) {
57 | case "head":
58 | out = out.replace("", `${data}\n`);
59 | break;
60 | case "head-prepend":
61 | out = out.replace(//i, `$&\n${data}`);
62 | break;
63 | case "body":
64 | out = out.replace("", `${data}\n`);
65 | break;
66 | case "body-prepend":
67 | out = out.replace(/