第九章：Vite API 参考手册

第九章Vite API 参考手册9.1 核心 APIcreateServer创建 Vite 开发服务器import{createServer}fromviteconstserverawaitcreateServer({configFile:false,root:__dirname,server:{port:3000}})awaitserver.listen()console.log(服务器启动在,server.config.server.port)build以编程方式构建import{build}fromviteawaitbuild({root:./,build:{outDir:dist,rollupOptions:{input:index.html}}})resolveConfig解析配置import{resolveConfig}fromviteconstconfigawaitresolveConfig({},build,production)console.log(config.base)9.2 插件 APIPlugin 接口interfacePlugin{name:string// 钩子buildStart?:(options:InputOptions)voidresolveId?:(source:string,importer:string|undefined)string|nullload?:(id:string)string|nulltransform?:(code:string,id:string)TransformResult buildEnd?:()voidgenerateBundle?:(options:OutputOptions,bundle:{[fileName:string]:OutputAsset|OutputChunk})void// Vite 特有config?:(config:UserConfig,env:{command:string,mode:string})UserConfig|nullconfigResolved?:(config:ResolvedConfig)voidconfigureServer?:(server:ViteDevServer)voidtransformIndexHtml?:(html:string,ctx:TransformIndexHtmlContext)string|HtmlTagDescriptor[]handleHotUpdate?:(ctx:HmrContext)ModuleNode[]|void}TransformResultinterfaceTransformResult{code:stringmap?:SourceMap|nulldeps?:string[]}9.3 配置 APIdefineConfigimport{defineConfig}fromviteexportdefaultdefineConfig({// 配置项})// 异步配置exportdefaultdefineConfig(async({command,mode}){constpluginsawaitimport(./plugins)return{plugins:[plugins.default()]}})loadConfigFromFileimport{loadConfigFromFile}fromviteconst{config,deps}awaitloadConfigFromFile({command:serve,mode:development},./vite.config.js)9.4 开发服务器 APIViteDevServer 接口interfaceViteDevServer{config:ResolvedConfig middlewares:Connect.Serverlisten(port?:number,isRestart?:boolean):PromiseViteDevServerclose():PromisevoidtransformRequest(url:string,options?:TransformOptions):PromiseModuleNode|nullws:WebSocketServer moduleGraph:ModuleGraph pluginContainer:PluginContainerhotUpdate(module:ModuleNode):Promisevoid}使用示例constserverawaitcreateServer()// 添加自定义中间件server.middlewares.use((req,res,next){console.log(${req.method}${req.url})next()})// 监听 WebSocket 消息server.ws.on(connection,(socket){console.log(客户端连接)})awaitserver.listen()9.5 模块图 APIModuleNodeinterfaceModuleNode{id:stringfile:stringurl:stringimporters:SetModuleNodeimportedModules:SetModuleNodetransformResult:TransformResult|nullssrTransformResult:TransformResult|nulllastHMRTimestamp:numberacceptHmrDeps:SetModuleNodeacceptedHmrDeps:SetModuleNode}访问模块图constmodulesserver.moduleGraph.getModules()for(constmoduleofmodules){console.log(module.id,module.importedModules.size)}9.6 插件容器 APIinterfacePluginContainer{resolveId(id:string,importer?:string):Promisestring|nullload(id:string):PromiseLoadResult|nulltransform(code:string,id:string):PromiseTransformResult|nullbuildStart(options:InputOptions):PromisevoidbuildEnd():Promisevoid}9.7 工具函数normalizePath路径规范化import{normalizePath}fromviteconstpathnormalizePath(src\\components\\Button.vue)// src/components/Button.vuecreateLogger创建日志器import{createLogger}fromviteconstloggercreateLogger(info)logger.info(信息消息)logger.warn(警告消息)logger.error(错误消息)isCSSRequest检查是否为 CSS 请求import{isCSSRequest}fromviteif(isCSSRequest(id)){console.log(这是 CSS 文件)}9.8 环境变量 APIloadEnv加载环境变量import{loadEnv}fromviteconstenvloadEnv(development,process.cwd(),VITE)console.log(env.VITE_API_URL)envPrefixenvPrefix:VITE_// 默认只有 VITE_ 开头的变量暴露9.9 预构建 APIoptimizeDepsimport{optimizeDeps}fromviteawaitoptimizeDeps({config:{root:process.cwd(),optimizeDeps:{include:[vue,vue-router]}}})9.10 热更新 APIHmrContextinterfaceHmrContext{file:stringtimestamp:numbermodules:ModuleNode[]read:()string|Promisestringserver:ViteDevServer}自定义 HMRhandleHotUpdate({file,server,modules}){if(file.endsWith(.custom)){server.ws.send({type:custom,event:custom-update,data:{file}})return[]}returnmodules}9.11 构建 APIbuild 选项interfaceBuildOptions{target?:modules|string[]outDir?:stringassetsDir?:stringassetsInlineLimit?:numbercssCodeSplit?:booleansourcemap?:boolean|inline|hiddenrollupOptions?:RollupOptions minify?:boolean|esbuild|terserterserOptions?:TerserOptions write?:booleanemptyOutDir?:booleanmanifest?:boolean|stringlib?:LibraryOptions ssr?:boolean|stringssrManifest?:boolean|string}9.12 服务器选项ServerOptionsinterfaceServerOptions{host?:string|booleanport?:numberstrictPort?:booleanhttps?:boolean|HttpsOptions open?:boolean|stringproxy?:Recordstring,string|ProxyOptionscors?:CorsOptions|booleanheaders?:Recordstring,stringfs?:{strict?:booleanallow?:string[]}hmr?:HmrOptions|booleanwatch?:WatchOptions middlewareMode?:boolean}9.13 预构建选项DepOptimizationOptionsinterfaceDepOptimizationOptions{include?:string[]exclude?:string[]entries?:string[]esbuildOptions?:EsbuildOptions force?:boolean}9.14 完整类型定义所有类型定义都可以从 Vite 包中导入importtype{UserConfig,ConfigEnv,Plugin,ViteDevServer,BuildOptions,ServerOptions,DepOptimizationOptions}fromvite本章小结API 参考手册提供了 Vite 的核心 API 文档编程方式使用 Vite插件开发接口开发服务器控制模块图操作工具函数这些 API 可用于构建工具、插件和自动化脚本。