Skip to content

Configuration and Building with Vite

iza17hor edited this page Apr 10, 2024 · 44 revisions

Description

These configuration files provide a structured setup for building the project using Vite, encompassing various aspects such as TypeScript compilation, SCSS processing, asset management, and minification.

File Structure

  • config.ts: Sets the paths for the files to be compiled.
Screenshot 2024-04-10 at 15 31 36
  • vite.helpers.ts: Houses helper functions for generating block entries and icon type definitions, utilizing data from the config.ts file.
Screenshot 2024-04-10 at 15 28 09
  • vite.config.ts: Defines the configuration options for the Vite build. The paths to the TypeScript and CSS files are extracted from an external configuration file (config.ts). These paths are then resolved relative to the current directory and added to the inputOptions of the Vite configuration object. The name of every block and icons is extracted with the help of a helper function from vite.helpers.ts and also added to the inputOptions. A 'dist' folder is set as output directory. Additionally, the minifyHTML plugin is conditionally added for production builds to minify HTML literals.
Screenshot 2024-04-10 at 19 43 20