vite

Setup using npm 6.x

$ npm create vite@latest my-react-app --template react-ts

$ npm create vite@latest my-react-app -- --template react-ts

$ yarn create vite my-react-app --template react-ts

$ pnpm create vite my-react-app --template react-ts

vite [options] []

-c, --config
    Use specified config file instead of vite.config.js or vite.config.ts

-r, --root
    Use specified root directory as project root (default: cwd)

-m, --mode
    Set mode. Default: development or production.

-l, --logLevel
    Adjust console output verbosity (info | warn | error | silent). Default: info

--clearScreen
    Clear the console when logging messages.

--debug [feat]
    Show debug logs. Optional features: 'hmr', 'config'.

-f, --filter
    Filter modules to debug.

-d, --define
    Define globally accessible constants as environment variables.

--force
    Force the optimizer to ignore the cache and re-bundle.

--host [host]
    Specify hostname or IP address to listen on. Default: localhost.

--port
    Specify server port. Default: 5173.

--https
    Enable TLS + HTTP/2.

--open [path]
    Automatically open the app in the browser on server start. Optionally specify a path to open.

--cors
    Configure CORS for the dev server.

--strictPort
    Exit if port is already in use, instead of retrying.

--hmr [options]
    Disable or configure HMR connection (options: { protocol, host, port, timeout, overlay }).

--profile
    Enable the profiler.

-h, --help
    Display help for command

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: a dev server that provides rich feature enhancements over native ES modules, for example, extremely fast Hot Module Replacement (HMR). And a build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Vite leverages native ES modules and esbuild, providing a significantly faster cold start and near-instant updates. It's designed to handle large and complex projects efficiently, with a focus on modern JavaScript frameworks like Vue, React, and Svelte. Instead of bundling the entire application for every change, Vite serves source code via native ES modules and only transforms modules that are actually requested by the browser. This approach significantly reduces the time spent waiting for updates during development.

Vite relies heavily on modern browser features, so older browsers might not be fully supported without specific configuration. Configuration via `vite.config.js` or `vite.config.ts` is central to customizing Vite's behavior.

Vite projects are typically configured using a `vite.config.js` or `vite.config.ts` file in the project root. This file allows you to customize various aspects of the build process, including plugins, server settings, and build targets. You can configure your build settings, define aliases and add plugins in the config file.

Vite uses a plugin system similar to Rollup and Webpack. Plugins can extend Vite's functionality by providing features like TypeScript support, CSS pre-processing, and asset optimization. Many official and community plugins are available.

Vite was created by Evan You, also the creator of Vue.js. It was born out of the need for faster development tooling for Single Page Applications (SPAs). Prior to Vite, development workflows often involved slow build processes and long waiting times for code updates. Vite's initial release was aimed at significantly improving the developer experience by leveraging native ES modules and modern JavaScript features.

npm(1), yarn(1), rollup(1)