affaan-m/vite-patterns

Vite 构建工具模式，包括配置、插件、HMR、环境变量、代理设置、SSR、库模式、依赖预打包以及构建优化。在处理 vite.config.ts、Vite 插件或基于 Vite 的项目时激活。

编程协作开发 Agent Agent 技能调研 Vite 构建配置插件与热更新环境变量管理开发代理设置库模式打包构建性能优化

技术栈: cursor24万+许可证: MIT开发者: affaan-m

Skill 介绍Skill 文件

重要提示：本站仅作 Skill 资源导航与收录，正文以 GitHub 原仓库为准，版权归原项目所有。

在 GitHub 查看 ↗

原文译文

以下为摘要预览，完整内容请查看 GitHub 原文。

Vite 模式

面向 Vite 8+ 项目的构建工具与开发服务器模式。涵盖配置、环境变量、代理设置、库模式、依赖预打包以及常见的生产环境陷阱。

使用场景

配置 vite.config.ts 或 vite.config.js
设置环境变量或 .env 文件
为 API 后端配置开发服务器代理
优化构建产物（chunk、压缩、资源）
使用 build.lib 发布库
排查依赖预打包或 CJS/ESM 互操作问题
调试 HMR、开发服务器或构建错误
选择或排序 Vite 插件

工作原理

开发模式 直接以原生 ESM 提供源文件 —— 不进行打包。转换按需在每个模块请求时进行，这就是冷启动快、HMR 精确的原因。
构建模式 使用 Rolldown（v7+）或 Rollup（v5–v6）将应用打包用于生产，具备 tree-shaking、代码分割和基于 Oxc 的压缩能力。
依赖预打包 通过 esbuild 将 CJS/UMD 依赖一次性转换为 ESM，并将结果缓存到 node_modules/.vite 下，因此后续启动会跳过该工作。
插件在开发和构建之间共享统一的接口 —— 同一个插件对象既适用于开发服务器的按需转换，也适用于生产流水线。
环境变量 在构建时静态内联。以 VITE_ 开头的变量会成为产物中的公共常量；其余未带此前缀的变量对客户端代码不可见。

示例

配置结构

基础配置

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': new URL('./src', import.meta.url).pathname },
  },
})

条件配置

// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd())   // 仅 VITE_ 前缀（安全）

  return {
    …

重要提示：源文件不在本站托管，请通过 GitHub 查看与下载。

索引更新于 8/25/2026, 9:18:05 PMGitHub ↗

SKILL.md16.7 KB在 GitHub 查看 ↗

相关资源

按类型、任务、场景与标签加权推荐

itsPremkumar/mcptest

MCP · Model · Context · Protocol · 测试工具 · 调试 · 开发框架

Automated MCP Server Testing Framework

yair4Data/mcp-security-analyzer

MCP · 安全审计 · 配置扫描 · 权限分析 · 开发工具

Comprehensive security testing framework for Model Context Protocol (MCP) server

Web Search Agents by Nimble

web · search · real-time · data · AI · agent · scraping · structured

网络搜索代理是针对您特定领域（例如公司信息丰富、法规研究等）的专业网络爬虫和研究代理。它们会自主学习您的使用场景，深入挖掘对您最重要的资源，从而为您的 AI 提供更深入、更相关的网络上下文

Demovanta

AI · Agent · 演示平台 · 评测 · 开发工具

。只需粘贴URL，一个真实浏览器就会打开你的网页，模拟浏览操作，并用你的母语旁白讲解屏幕上的内容

Krevios

AI代理 · 企业自动化 · 研究 · 工作流

你可以生成与编辑图像、制作视频、合成文本与排版——全程只需以可视化方式连接节点，无需编写代码

AIplayworld.io

AI代理 · 虚拟世界 · 基准测试 · 游戏环境 · LLM评测

An immersive AI adventure platform（沉浸式 AI 冒险平台）