vite

Configure and use Vite build tool including plugins, SSR, and library mode.

Updated Jun 26, 2022

Search Tags:#frontend #configuration #plugin #vite #ssr #build tool #rolldown

Ready to run

npx skills add https://github.com/xlsama/use --skill vite-xlsama

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vite
Source: https://github.com/xlsama/use/tree/main/config/agents/skills/vite
Command: npx skills add https://github.com/xlsama/use --skill vite-xlsama

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers configure and utilize the Vite build tool for fast frontend development and optimized production builds, including advanced features like SSR and library mode.

Core Features & Use Cases

Configuration: Understand and customize vite.config.ts for various build scenarios.
Plugin API: Learn how to create and use Vite plugins for custom build logic.
SSR & Library Mode: Implement Server-Side Rendering and build libraries for distribution.
Use Case: A developer needs to set up a new React project with Vite, configure environment variables, and integrate a custom plugin for optimizing assets.

Quick Start

Configure Vite to use TypeScript and set the build target to 'esnext'.

Frequently Asked Questions about vite

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I configure Vite for a frontend project using TypeScript?▼

Configure Vite by customizing the `vite.config.ts` file to define build scenarios, set targets like 'esnext', and manage environment variables for your frontend application.

How does Vite handle Server-Side Rendering (SSR) and library mode?▼

Vite handles SSR by providing built-in capabilities for server-side rendering, and supports library mode to build distributable frontend libraries with optimized and isolated outputs.

What is the Vite Plugin API and how do I use it?▼

The Vite Plugin API allows you to create and integrate plugins into your build process, enabling custom logic for transforming modules and optimizing assets during development and production builds.

Does Vite 8 use Rolldown and Oxc for frontend build transformations?▼

Yes, Vite 8 migrates to the Rolldown bundler and utilizes the Oxc transformer to handle frontend build transformations, replacing previous underlying bundling mechanisms.

What is the best way to build a React project with Vite and custom asset optimization?▼

The best way to build a React project with Vite is to initialize via Vite, configure environment variables in `vite.config.ts`, and integrate a custom plugin for specialized asset optimization.