知海

JavaScript API

vite-mainAPI 参考

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 进程中使用 createServerbuild 时,这两个函数都依赖 process.env.NODE_ENV 来正常工作,这也取决于 mode 配置选项。为避免行为冲突,请将 process.env.NODE_ENV 或这两个 API 的 mode 设置为 development。否则,您可以派生一个子进程来分别运行这些 API。

::: tip 注意
中间件模式WebSocket 代理配置 结合使用时,需要在 middlewareMode 中提供父级 http 服务器,以便正确绑定代理。

示例
ts twoslash 复制代码
import 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 中的 nullundefined 值会被跳过而不会合并。如果您需要显式清除 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.json
    • pnpm-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

仅为向后兼容而保留。

帮助我们改进文档

发现翻译问题或内容错误?请告诉我们。