@budarin/vite-plugin-inline-non-module-scripts

v1.0.10

Published

3 months ago

Vite plugin to inline non-module scripts

Downloads

0High
0Medium
0Low

budarin

vite plugin inline non-module scripts

vite-plugin-inline-non-module-scripts

Vite плагин для автоматической обработки не-модульных JavaScript скриптов (включая инлайн-скрипты) с инлайн-вставкой минифицированного кода.

Проблема

Vite по умолчанию не обрабатывает обычные JavaScript скрипты (не модули) в HTML файлах. Такие скрипты часто используются для:

🔧 Инициализации данных на странице до загрузки модулей
⚡ Немедленной обработки критически важных данных
🎯 Настройки глобальных переменных и конфигурации
📊 Аналитики и трекинга, которые должны сработать сразу

Но Vite их игнорирует, что означает:

❌ Скрипты не хэшируются в production сборке
❌ Пути к скриптам не обновляются автоматически
❌ Скрипты не проходят через Vite pipeline для оптимизации
❌ Нет поддержки hot reload для обычных скриптов

Решение

Этот плагин автоматически находит все локальные не-модульные скрипты в HTML и:

✅ В dev режиме: скрипты доступны по оригинальным путям
✅ В prod режиме: скрипты минифицируются и инлайнятся в HTML
✅ Автоматическое обнаружение: находит все <script> теги без type="module"
✅ Поддержка инлайн-скриптов: обрабатывает скрипты с кодом прямо в теге
✅ Исключение внешних скриптов: игнорирует CDN и внешние ссылки

📦 Установка

npm install @budarin/vite-plugin-inline-non-module-scripts
# или
pnpm add @budarin/vite-plugin-inline-non-module-scripts
# или
yarn add @budarin/vite-plugin-inline-non-module-scripts

🔧 Использование

Базовое использование

// vite.config.ts
import { defineConfig } from 'vite';
import { inlineNonModuleScriptsPlugin } from '@budarin/vite-plugin-inline-non-module-scripts';

export default defineConfig({
    plugins: [inlineNonModuleScriptsPlugin()],
});

Альтернативный импорт (дефолтный экспорт)

// vite.config.ts
import { defineConfig } from 'vite';
import inlineNonModuleScriptsPlugin from '@budarin/vite-plugin-inline-non-module-scripts';

export default defineConfig({
    plugins: [inlineNonModuleScriptsPlugin()],
});

С настройками

// vite.config.ts
import { defineConfig } from 'vite';
import { inlineNonModuleScriptsPlugin } from '@budarin/vite-plugin-inline-non-module-scripts';

export default defineConfig({
    plugins: [
        inlineNonModuleScriptsPlugin({
            minify: true, // Включить минификацию (по умолчанию: false)
            htmlPath: 'src/index.html', // Путь к HTML файлу (по умолчанию: 'index.html')
        }),
    ],
});

⚙️ Настройки

interface VitePluginInlineNonModuleScriptsOptions {
    minify?: boolean; // Включить минификацию (по умолчанию: использует настройку build.minify из конфига Vite)
    htmlPath?: string; // Путь к HTML файлу (по умолчанию: 'index.html')
}

📝 Как это работает

Настройка минификации

Плагин автоматически определяет нужно ли минифицировать скрипты по следующему приоритету:

Опция плагина minify - если явно указана
Настройка Vite build.minify - если опция плагина не указана
По умолчанию - минификация включена (если build.minify !== false)

// Пример 1: Явно отключить минификацию
inlineNonModuleScriptsPlugin({ minify: false });

// Пример 2: Использовать настройку из конфига Vite
inlineNonModuleScriptsPlugin(); // Следует build.minify из vite.config.ts

// Пример 3: Явно включить минификацию
inlineNonModuleScriptsPlugin({ minify: true });

До обработки

<!DOCTYPE html>
<html>
    <head>
        <title>My App</title>
    </head>
    <body>
        <script src="/src/script.js"></script>
        <script>
            console.log('inline script');
            const config = { apiUrl: 'https://api.example.com' };
        </script>
        <script type="module" src="/src/main.js"></script>
    </body>
</html>

После обработки

<!DOCTYPE html>
<html>
    <head>
        <title>My App</title>
    </head>
    <body>
        <script>
            // текст из /src/script.js
        </script>
        <script>
            console.log('inline script');
            const config = { apiUrl: 'https://api.example.com' };
        </script>
        <script type="module" src="/assets/main-abc123.js"></script>
    </body>
</html>

🎯 Что обрабатывается

Плагин находит и обрабатывает скрипты, которые:

✅ Имеют атрибут src ИЛИ являются инлайн-скриптами
✅ НЕ имеют type="module"
✅ НЕ являются внешними (не начинаются с http://, https://, //)
✅ Являются локальными файлами или содержат код прямо в теге

Примеры

<!-- ✅ Обрабатывается -->
<script src="/src/utils/helper.js"></script>
<script src="./local-script.js"></script>
<script src="assets/script.js" defer></script>
<script>
    console.log('inline script');
    const config = { apiUrl: 'https://api.example.com' };
</script>

<!-- ❌ НЕ обрабатывается -->
<script type="module" src="/src/main.js"></script>
<script src="https://cdn.example.com/script.js"></script>
<script src="//cdn.example.com/script.js"></script>

📄 Лицензия

MIT License - см. файл LICENSE для деталей.

👨‍💻 Автор

Budarin Vadim - @budarin

⭐ Если плагин полезен, поставьте звезду! ⭐