Vite Plugin Html Env

screenshot of Vite Plugin Html Env
vite

A vite plugin for rewriting html

Overview

The vite-plugin-html-env is a powerful tool designed to enhance the functionality of Vite by allowing for dynamic environment variable replacements directly in your HTML files. With the ever-evolving landscape of web development, having an efficient way to manage environment variables in your HTML templates becomes crucial for streamlining development workflows. This plugin is tailored specifically for Vite version 4.2.0 and integrates seamlessly with existing features, ensuring a smooth developer experience.

By implementing this plugin, developers can take advantage of custom prefixes, enhanced template compilation modes, and even simple compression techniques. The ease of use contrasted with the robust capabilities makes vite-plugin-html-env an essential addition to any Vite-based project.

Features

  • Environment Variable Support: Supports replacing environment variables in HTML files, leveraging Vite's capabilities effectively.

  • Custom Prefixes: Allows the use of custom key prefixes, with a recommendation of using VITE_APP_ for smoother integration.

  • Dynamic Environment Handling: Facilitates reading from different .env files based on the configured mode, enhancing flexibility across environments.

  • Template Compilation Mode: The new template compilation mode introduces directives like vite-if and vite-else, providing optimized conditional rendering options.

  • Variable Enforcement Control: Offers an enforce setting that can dictate the order of variable processing, either "pre" or "post," for customized plugin usage.

  • Simple Compression: The option for simple compression allows for the removal of unnecessary spaces and line breaks, optimizing the final rendered HTML output.

  • Default Configuration: The plugin enables a number of default settings that ensure it works out of the box, promoting a hassle-free setup for developers.

This combination of features positions vite-plugin-html-env as a versatile and essential tool for anyone looking to elevate their Vite development experience.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects