SuperAPI AI 工具集

vite

编程与开发

查看项目

更新于 10-16 01:15

技能介绍

用途:Vite 是新一代前端构建工具,提供基于原生 ESM 与 HMR 的快速开发服务器,以及优化后的生产构建。该技能适用于处理 Vite 项目、vite.config.ts、Vite 插件或构建相关任务,并覆盖 Vite 8 的 Rolldown 迁移。

版本基础:资料基于 Vite 8 beta(由 Rolldown 驱动)。Vite 8 使用 Rolldown 打包器与 Oxc 转换器。

偏好:使用 TypeScript,优先 vite.config.ts;始终使用 ESM,避免 CommonJS。

主要能力分为几类:核心方面包括配置(vite.config.ts、defineConfig、条件配置、loadEnv)、特性(import.meta.glob、资源查询 ?raw 与 ?url、import.meta.env、HMR API)以及插件 API(Vite 专有钩子、虚拟模块、插件顺序);构建与 SSR 方面包括库模式、SSR 中间件模式、ssrLoadModule、JavaScript API;进阶方面包括环境 API(Vite 6+ 多环境支持、自定义运行时)与 Rolldown 迁移(Vite 8 变更:Rolldown 打包器、Oxc 转换器、配置迁移)。

常用命令:vite 启动开发服务器;vite build 生产构建;vite preview 预览生产构建;vite build --ssr 进行 SSR 构建。

常见配置示例: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 提供旧版浏览器支持。

限制:资料未提供收费、价格、平台、效果或具体使用步骤等额外信息。