JavaScript API
JavaScript API
Vite 的 JavaScript API 已完全类型化,建议使用 TypeScript 或在 VS Code 中启用 JS 类型检查,以充分利用智能提示和校验功能。
createServer
类型签名:
ts
async function createServer(inlineConfig?: InlineConfig): Promise<ViteDevServer>
使用示例:
ts twoslash
import { createServer } from 'vite'
const server = await createServer({
// 任何有效的用户配置选项,外加 `mode` 和 `configFile`
configFile: false,
root: import.meta.dirname,
server: {
port: 1337,
},
})
await server.listen()
server.printUrls()
server.bindCLIShortcuts({ print: true })
::: tip 注意
在同一个 Node.js 进程中使用 createServer 和 build 时,这两个函数都依赖 process.env.NODE_ENV 来正常工作,这也取决于 mode 配置选项。为避免行为冲突,请将 process.env.NODE_ENV 或这两个 API 的 mode 设置为 development。否则,您可以派生一个子进程来分别运行这些 API。
::: tip 注意
当 中间件模式 与 WebSocket 代理配置 结合使用时,需要在middlewareMode中提供父级 http 服务器,以便正确绑定代理。示例
ts twoslashimport http from 'http' import { createServer } from 'vite' const parentServer = http.createServer() // 或 express、koa 等 const vite = await createServer({ server: { // 启用中间件模式 middlewareMode: { // 提供父级 http 服务器以代理 WebSocket server: parentServer, }, proxy: { '/ws': { target: 'ws://localhost:3000', // 代理 WebSocket ws: true, }, }, }, }) // @noErrors: 2339 parentServer.use(vite.middlewares)
InlineConfig
InlineConfig 接口扩展了 UserConfig,并添加了以下属性:
configFile:指定要使用的配置文件。如果未设置,Vite 将尝试从项目根目录自动解析一个配置文件。设置为false可禁用自动解析。
ResolvedConfig
ResolvedConfig 接口拥有 UserConfig 的所有相同属性,但大多数属性已解析且非 undefined。它还包含一些工具方法,例如:
config.assetsInclude:一个函数,用于检查id是否被视为资源。config.logger:Vite 的内部日志记录器对象。
ViteDevServer
ts
interface ViteDevServer {
/**
* 解析后的 Vite 配置对象。
*/
config: ResolvedConfig
/**
* 一个 connect 应用实例
* - 可用于将自定义中间件附加到开发服务器。
* - 也可用作自定义 http 服务器的处理函数
* 或任何 connect 风格的 Node.js 框架中的中间件。
*
* https://github.com/senchalabs/connect#use-middleware
*/
middlewares: Connect.Server
/**
* 原生 Node http 服务器实例。
* 在中间件模式下为 null。
*/
httpServer: http.Server | null
/**
* Chokidar 监听器实例。如果 `config.server.watch` 设置为 `null`,
* 则不会监听任何文件,调用 `add` 或 `unwatch` 将无效。
* https://github.com/paulmillr/chokidar/tree/3.6.0#api
*/
watcher: FSWatcher
/**
* 带有 `send(payload)` 方法的 WebSocket 服务器。
*/
ws: WebSocketServer
/**
* Rollup 插件容器,可以对给定文件运行插件钩子。
*/
pluginContainer: PluginContainer
/**
* 模块图,跟踪导入关系、url 到文件的映射以及 hmr 状态。
*/
moduleGraph: ModuleGraph
/**
* Vite 在 CLI 上打印的已解析 URL(URL 编码)。在中间件模式下或
* 服务器未监听任何端口时返回 `null`。
*/
resolvedUrls: ResolvedServerUrls | null
/**
* 以编程方式解析、加载和转换 URL 并获取结果,
* 无需经过 http 请求管道。
*/
transformRequest(
url: string,
options?: TransformOptions,
): Promise<TransformResult | null>
/**
* 应用 Vite 内置的 HTML 转换以及任何插件的 HTML 转换。
*/
transformIndexHtml(
url: string,
html: string,
originalUrl?: string,
): Promise<string>
/**
* 将给定的 URL 作为实例化的 SSR 模块加载。
*/
ssrLoadModule(
url: string,
options?: { fixStacktrace?: boolean },
): Promise<Record<string, any>>
/**
* 修复 ssr 错误堆栈跟踪。
*/
ssrFixStacktrace(e: Error): void
/**
* 为模块图中的模块触发 HMR。您可以使用 `server.moduleGraph`
* API 来检索要重新加载的模块。如果 `hmr` 为 false,则此操作为空操作。
*/
reloadModule(module: ModuleNode): Promise<void>
/**
* 启动服务器。
*/
listen(port?: number, isRestart?: boolean): Promise<ViteDevServer>
/**
* 重启服务器。
*
* @param forceOptimize - 强制优化器重新打包,等同于 --force cli 标志
*/
restart(forceOptimize?: boolean): Promise<void>
/**
* 停止服务器。
*/
close(): Promise<void>
/**
* 绑定 CLI 快捷键
*/
bindCLIShortcuts(options?: BindCLIShortcutsOptions<ViteDevServer>): void
/**
* 调用 `await server.waitForRequestsIdle(id)` 将等待所有静态导入
* 被处理完毕。如果从 load 或 transform 插件钩子中调用,需要将 id
* 作为参数传入以避免死锁。在模块图的第一个静态导入部分处理完毕后
* 调用此函数将立即 resolve。
* @experimental
*/
waitForRequestsIdle: (ignoredId?: string) => Promise<void>
}
ℹ️ 信息
waitForRequestsIdle旨在作为一个逃生舱口,用于改善无法按照 Vite 开发服务器按需特性实现的功能的开发者体验。它可以在启动期间由 Tailwind 等工具使用,以延迟生成应用 CSS 类,直到应用代码可见,避免样式变化的闪烁。当此函数在 load 或 transform 钩子中使用,且使用默认的 HTTP1 服务器时,六个 http 通道之一将被阻塞,直到服务器处理完所有静态导入。Vite 的依赖优化器目前使用此函数来避免在缺失依赖时触发整页重新加载:它会延迟加载预打包的依赖,直到从静态导入的源中收集完所有导入的依赖。Vite 可能会在未来的主版本中切换到不同的策略,默认设置optimizeDeps.holdUntilCrawlEnd: false,以避免在大型应用的冷启动期间产生性能影响。
build
类型签名:
ts
async function build(
inlineConfig?: InlineConfig,
): Promise<RolldownOutput | RolldownOutput[] | RolldownWatcher>
使用示例:
ts twoslash [vite.config.js]
import path from 'node:path'
import { build } from 'vite'
await build({
root: path.resolve(import.meta.dirname, './project'),
base: '/foo/',
build: {
rolldownOptions: {
// ...
},
},
})
preview
类型签名:
ts
async function preview(inlineConfig?: InlineConfig): Promise<PreviewServer>
使用示例:
ts twoslash
import { preview } from 'vite'
const previewServer = await preview({
// 任何有效的用户配置选项,外加 `mode` 和 `configFile`
preview: {
port: 8080,
open: true,
},
})
previewServer.printUrls()
previewServer.bindCLIShortcuts({ print: true })
PreviewServer
ts
interface PreviewServer {
/**
* 解析后的 vite 配置对象
*/
config: ResolvedConfig
/**
* 一个 connect 应用实例。
* - 可用于将自定义中间件附加到预览服务器。
* - 也可用作自定义 http 服务器的处理函数
* 或任何 connect 风格的 Node.js 框架中的中间件
*
* https://github.com/senchalabs/connect#use-middleware
*/
middlewares: Connect.Server
/**
* 原生 Node http 服务器实例
*/
httpServer: http.Server
/**
* Vite 在 CLI 上打印的已解析 URL(URL 编码)。如果服务器
* 未监听任何端口,则返回 `null`。
*/
resolvedUrls: ResolvedServerUrls | null
/**
* 打印服务器 url
*/
printUrls(): void
/**
* 绑定 CLI 快捷键
*/
bindCLIShortcuts(options?: BindCLIShortcutsOptions<PreviewServer>): void
}
resolveConfig
类型签名:
ts
async function resolveConfig(
inlineConfig: InlineConfig,
command: 'build' | 'serve',
defaultMode = 'development',
defaultNodeEnv = 'development',
isPreview = false,
): Promise<ResolvedConfig>
command 值在开发和预览时为 serve,在构建时为 build。
mergeConfig
类型签名:
ts
function mergeConfig(
defaults: Record<string, any>,
overrides: Record<string, any>,
isRoot = true,
): Record<string, any>
深度合并两个 Vite 配置。isRoot 表示正在合并的 Vite 配置层级。例如,如果您要合并两个 build 选项,则设置为 false。
请注意,overrides 中的 null 和 undefined 值会被跳过而不会合并。如果您需要显式清除 defaults 中的某个值,请直接修改 mergeConfig 的结果。
::: tip 注意
mergeConfig 仅接受对象形式的配置。如果您的配置是回调形式,则应在传入 mergeConfig 之前调用它。
您可以使用 defineConfig 辅助函数将回调形式的配置与另一个配置合并:
ts twoslash
import {
defineConfig,
mergeConfig,
type UserConfigFnObject,
type UserConfig,
} from 'vite'
declare const configAsCallback: UserConfigFnObject
declare const configAsObject: UserConfig
// ---cut---
export default defineConfig((configEnv) =>
mergeConfig(configAsCallback(configEnv), configAsObject),
)
:::
searchForWorkspaceRoot
类型签名:
ts
function searchForWorkspaceRoot(
current: string,
root = searchForPackageRoot(current),
): string
相关链接: server.fs.allow
如果满足以下条件,则搜索潜在工作区的根目录,否则回退到 root:
package.json中包含workspaces字段- 包含以下文件之一
lerna.jsonpnpm-workspace.yaml
loadEnv
类型签名:
ts
function loadEnv(
mode: string,
envDir: string,
prefixes: string | string[] = 'VITE_',
): Record<string, string>
相关链接: .env 文件
加载 envDir 目录下的 .env 文件,并将它们与 process.env 中已存在的匹配变量合并。默认情况下,除非更改 prefixes,否则仅加载以 VITE_ 为前缀的环境变量。
normalizePath
类型签名:
ts
function normalizePath(id: string): string
相关链接: 路径规范化
规范化路径,以便 Vite 插件之间互操作。
transformWithOxc
类型签名:
ts
async function transformWithOxc(
code: string,
filename: string,
options?: OxcTransformOptions,
inMap?: object,
): Promise<Omit<OxcTransformResult, 'errors'> & { warnings: string[] }>
使用 Oxc Transformer 转换 JavaScript 或 TypeScript。适用于希望匹配 Vite 内部 Oxc Transformer 转换的插件。
transformWithEsbuild
类型签名:
ts
async function transformWithEsbuild(
code: string,
filename: string,
options?: EsbuildTransformOptions,
inMap?: object,
): Promise<ESBuildTransformResult>
已弃用: 请改用 transformWithOxc。
使用 esbuild 转换 JavaScript 或 TypeScript。适用于希望匹配 Vite 内部 esbuild 转换的插件。
loadConfigFromFile
类型签名:
ts
async function loadConfigFromFile(
configEnv: ConfigEnv,
configFile?: string,
configRoot: string = process.cwd(),
logLevel?: LogLevel,
customLogger?: Logger,
): Promise<{
path: string
config: UserConfig
dependencies: string[]
} | null>
使用 Rolldown 手动加载 Vite 配置文件。
preprocessCSS
- 实验性: 提供反馈
类型签名:
ts
async function preprocessCSS(
code: string,
filename: string,
config: ResolvedConfig,
): Promise<PreprocessCSSResult>
interface PreprocessCSSResult {
code: string
map?: SourceMapInput
modules?: Record<string, string>
deps?: Set<string>
}
将 .css、.scss、.sass、.less、.styl 和 .stylus 文件预处理为纯 CSS,以便在浏览器中使用或由其他工具解析。与 内置 CSS 预处理支持 类似,如果使用相应的预处理器,则必须安装。
所使用的预处理器根据 filename 扩展名推断。如果 filename 以 .module.{ext} 结尾,则被推断为 CSS 模块,返回的结果将包含一个 modules 对象,该对象将原始类名映射到转换后的类名。
请注意,预处理不会解析 url() 或 image-set() 中的 URL。
version
类型: string
当前 Vite 版本的字符串表示(例如 "8.0.0")。
rolldownVersion
类型: string
Vite 使用的 Rolldown 版本的字符串表示(例如 "1.0.0")。是从 rolldown 中重新导出的 VERSION。
esbuildVersion
类型: string
仅为向后兼容而保留。
rollupVersion
类型: string
仅为向后兼容而保留。
帮助我们改进文档
发现翻译问题或内容错误?请告诉我们。
