SuperAPI AI 工具集

vitejs-expert

通用与其它

查看项目

更新于 10-16 03:39

技能介绍

用途:该技能提供 Vite 构建工具的专家级知识,用于开发与生产构建配置、插件使用和性能优化,适用于 React、Vue、Svelte 及库项目。

主要能力:涵盖 Vite 核心概念,包括原生 ESM 开发服务器、按需编译、热模块替换(HMR)、依赖预打包(esbuild)、基于 Rollup 的生产构建、通用插件接口;配置方面支持 vite.config.ts、resolve.alias 路径别名、.env 与 import.meta.env 环境变量(VITE_ 前缀暴露)、基于 --mode 的模式配置及接收 { command, mode } 的函数式配置;插件生态包括官方插件 @vitejs/plugin-react、@vitejs/plugin-vue、@vitejs/plugin-legacy,插件钩子 resolveId、load、transform、configureServer、handleHotUpdate,以及与 Rollup 插件的兼容性;构建与优化支持动态 import() 代码分割、manualChunks 手动分包、资源内联与 ?url/?raw 后缀、CSS 按块提取、build.lib 库模式、多页应用多入口、build.target 与旧浏览器兼容;模块与资源导入支持 import.meta.glob、?worker 与 ?worker&inline、JSON 原生导入、public/ 目录;CSS 支持 Sass、Less、Stylus 内置预处理、CSS Modules、PostCSS;开发服务器与 SSR 支持 server.proxy 代理、中间件模式、ssrLoadModule、HTTPS,以及 Vite 6+ 仍处于演进中的 Environment API。

使用方式:通过配置 vite.config.ts 并按需引入插件;客户端环境变量须使用 VITE_ 前缀;路由级代码分割使用动态 import();库发布时显式设置 build.lib.formats 并在 rollupOptions.external 中标记 peer 依赖;Vitest 可复用 vite.config.ts 的 test 块避免重复别名配置。

适用场景:前端应用开发与生产构建、库打包发布、多页应用、SSR 开发及构建性能调优。

限制:未提供具体安装命令、价格或平台信息。Environment API 等部分特性仍处演进阶段,须查阅当前官方文档确认细节。