mcpField
V
vite

vite

github.com/hairyf开发26199 次安装3 周前更新
代码仓库

关于 vite

Vite 是面向 Web 项目的前端构建工具和开发服务器；此技能基于 Vite 8 beta。内容涵盖配置、插件、生产构建、SSR，以及迁移到 Rolldown 和 Oxc 工具链。

主要功能

  1. 01基于原生 ESM 的开发服务器与 HMR
  2. 02优化生产构建
  3. 03配置和环境 API
  4. 04插件钩子与虚拟模块
  5. 05构建和 SSR 工作流

适用场景

  1. 01运行前端开发服务器
  2. 02构建用于生产环境的 Web 项目
  3. 03配置插件和环境变量
  4. 04设置 SSR 或迁移 Vite 配置

安装

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

$npx skills add https://github.com/hairyf/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 8 beta（由 Rolldown 驱动）。Vite 8 使用 Rolldown 打包器和 Oxc 转换器。

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