mcpField
V
vite

vite

github.com/display-design-studio开发252 次安装3 天前更新
代码仓库

关于 vite

面向前端开发者的 Vite 技能参考，介绍这款前端构建工具的配置、插件、开发服务器、生产构建与 SSR，并涵盖 Vite 8 的 Rolldown 和 Oxc 变化。

主要功能

  1. 01Vite 配置与环境变量
  2. 02原生 ESM 开发服务器和 HMR
  3. 03插件 API 与虚拟模块
  4. 04生产构建与 SSR
  5. 05多环境 API 和 Rolldown 迁移

适用场景

  1. 01设置 TypeScript 格式的 Vite 配置
  2. 02使用 Vite 开发服务器和 HMR
  3. 03构建生产前端或 SSR 项目

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/display-design-studio/skills --skill vite

安装后在 Claude Code 中输入/vite确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

GENERATION.md
references/
build-and-ssr.md
core-config.md
core-features.md
core-plugin-api.md
environment-api.md
rolldown-migration.md

详细介绍

Vite

基于 Vite v8.3.1（由 Rolldown 驱动），生成于 2026-09-25。Vite 8 使用 Rolldown 打包器和 Oxc 转换器，取代 esbuild + Rollup。

Vite 是新一代前端构建工具，提供快速的开发服务器（原生 ESM + HMR）和优化后的生产构建。

偏好

  • 使用 TypeScript：优先使用 vite.config.ts
  • 始终使用 ESM，避免使用 CommonJS

核心

主题描述参考
配置vite.config.ts、defineConfig、条件配置、loadEnvcore-config
功能import.meta.glob、资源查询（?raw、?url）、import.meta.env、HMR APIcore-features
插件 APIVite 专属钩子、虚拟模块、插件排序core-plugin-api

构建与 SSR

主题描述参考
构建与 SSR库模式、SSR 中间件模式、ssrLoadModule、JavaScript APIbuild-and-ssr

高级

主题描述参考
环境 APIVite 6+ 多环境支持、自定义运行时environment-api
Rolldown 迁移Vite 8 的变更：Rolldown 打包器、Oxc 转换器、配置迁移rolldown-migration

快速参考

CLI 命令
vite              # Start dev server
vite build        # Production build
vite preview      # Preview production build
vite build --ssr  # SSR build
常见配置
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [],
  resolve: { alias: { '@': '/src' } },
  server: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
  build: { target: 'esnext', outDir: 'dist' },
})
官方插件
  • @vitejs/plugin-vue - Vue 3 SFC 支持
  • @vitejs/plugin-vue-jsx - Vue 3 JSX
  • @vitejs/plugin-react - 使用 Oxc/Babel 的 React
  • @vitejs/plugin-react-swc - 使用 SWC 的 React
  • @vitejs/plugin-legacy - 旧版浏览器支持

评论

支持 Markdown