@ws-serenity/html-vite-plugin NPM

Перспектива

Можно добавить сюда uglify. Который будет удалять \n\r и комменты

About

Выполняет замену env-переменных в index.html. Умеет по условию добавлять теги. Замена происходит по всему document (и в <head> и <body>)

Input

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
        <title>Title</title>
        <!--Просто вставит строковое значение из конфига-->
        <script src="%REACT_APP_CONFIG%"></script>
        <!--С помощью аттрибута "vite-if" можем определять теги, которые должны быть добавлены или удалены в зависимости от env-переменной-->
        <script async type="module" vite-if="%VITE_ENABLE_METRICS%">
            console.log('Меня не будет в разметке');
        </script>
    </head>
    <body>
        <div id="root">
            <!--Неизвестные env-переменные будут также удалены-->
            <div vite-if="%UNKNOWN_ENV%">
                Меня не будет в разметке
            </div>
            <!--Пустые условия также удаляются-->
            <div vite-if="">
                И меня тоже не будет
            </div>
            <!--Можно использовать отрицание перед внедрением переменной-->
            <div vite-if="!%VITE_DISABLE_SMTH%">
                А вот я буду
            </div>
        </div>
        <script src="./src/index.tsx" type="module"></script>
    </body>
</html>

Output

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
        <title>Title</title>
        <!--Внедренная переменная из env.REACT_APP_CONFIG-->
        <script src="./config"></script>
    </head>
    <body>
        <div id="root">
            <!--Теги, не соответствующие условиям были удалены-->
            <div vite-if="!false">
                А вот я буду
            </div>
        </div>
        <script src="./src/index.tsx" type="module"></script>
    </body>
</html>

Разрешения и ограничения

Можно

менять аттрибут-условие (дефолт vite-if)
менять экранирование env-переменных, который должны быть заменены (дефолт %)

Нельзя

использовать двойное отрицание (нет обработки [vite-if]="!!ENV")
использовать в условии env-переменные, не являющиеся true или false

Ограничение

Не выполняется удаление комментариев (возможно, пока что)
Не выполняется удаление пробельных символов (возможно, пока что)

@everything-registry/sub-chunk-1023

0.0.1

1 year ago