Vite (French for “quick”, pronounced/vit/Same as “veet”) is a new front-end building tool that can significantly improve the front-end development experience. It mainly consists of two parts:

• A development server that provides rich built-in features based on native ES modules, such as amazingly fast Hot Module Updates (HMR).

• A set of build instructions that bundles code using Rollup and is pre-configured to output highly optimized static assets for production.

Vite aims to provide out-of-the-box configuration, while its plug-in API and JavaScript API bring a high degree of extensibility and complete type support.

Vite officially released version 4.2 last week. The main changes include:

• Support for replacing environment variables in HTML files

Vite now supports environment variable substitution in HTML files.import.meta.env Any attribute in the %ENV_NAME% Syntax used in HTML files:

<h1>Vite is running in %MODE%</h1>
<p>Using data from %VITE_API_URL%</p>

The Chrome Dev Tools team has been working on improving Vite’s DX and Vite supported frameworks in Dev Tools. Vite 4.2 brings an improved experience and tools for framework authors to use server.sourcemapIgnoreList and build.rollupOptions.output.sourcemapIgnoreList Hide third-party code from console log traces and build artifacts for users.

• Support ESM subpath import

Vite 4.2 now supports subpath import. Mainly using the resolve.exports library.

• Support TypeScript 5
• esbuild upgrade to 0.17
• support from ‘vite’ import type { Rollup }

See Changelog for details.