JavaScript API

Vite の JavaScript API は完全に型付けされており、インテリセンスと検証を活用するために TypeScript を使用するか、VS Code で JS 型チェックを有効にすることをお勧めします。

`createServer`

型シグネチャ

async function createServer(inlineConfig?: InlineConfig): Promise<ViteDevServer>

使用例

import { fileURLToPath
 } from 'node:url'
import { createServer
 } from 'vite'

const __dirname
 = fileURLToPath
(new URL
('.', import.meta.url
))

const server
 = await createServer
({
  // any valid user config options, plus `mode` and `configFile`
  configFile
: false,
  root
: __dirname
,
  server
: {
    port
: 1337,
  },
})
await server
.listen
()

server
.printUrls
()
server
.bindCLIShortcuts
({ print
: true })

注意

createServer と build を同じ Node.js プロセスで使用する場合、どちらの関数も process.env.NODE_ENV に依存して適切に動作し、これは mode 設定オプションにも依存します。競合する動作を防ぐために、process.env.NODE_ENV または 2 つの API の mode を development に設定してください。そうしないと、子プロセスを生成して API を個別に実行できます。

注意

ミドルウェアモードをWebSocket のプロキシ設定と組み合わせて使用する場合、プロキシを正しくバインドするには、親 HTTP サーバーを middlewareMode で提供する必要があります。

例

import http
 from 'http'
import { createServer
 } from 'vite'

const parentServer
 = http
.createServer
() // or express, koa, etc.

const vite
 = await createServer
({
  server
: {
    // Enable middleware mode
    middlewareMode
: {
      // Provide the parent http server for proxy WebSocket
      server
: parentServer
,
    },
    proxy
: {
      '/ws': {
        target
: 'ws://:3000',
        // Proxying WebSocket
        ws
: true,
      },
    },
  },
})

parentServer
.use(vite
.middlewares
)

`InlineConfig`

InlineConfig インターフェースは、追加のプロパティを持つ UserConfig を拡張します

configFile: 使用する設定ファイルを指定します。設定されていない場合、Vite はプロジェクトルートから自動的に解決しようとします。自動解決を無効にするには false を設定します。

`ResolvedConfig`

ResolvedConfig インターフェースは、ほとんどのプロパティが解決済みで未定義でないことを除いて、UserConfig と同じすべてのプロパティを持っています。また、次のようなユーティリティも含まれています。

config.assetsInclude: id がアセットと見なされるかどうかをチェックする関数。
config.logger: Vite の内部ロガーオブジェクト。

`ViteDevServer`

interface ViteDevServer {
  /**
   * The resolved Vite config object.
   */
  config: ResolvedConfig
  /**
   * A connect app instance
   * - Can be used to attach custom middlewares to the dev server.
   * - Can also be used as the handler function of a custom http server
   *   or as a middleware in any connect-style Node.js frameworks.
   *
   * https://github.com/senchalabs/connect#use-middleware
   */
  middlewares: Connect.Server
  /**
   * Native Node http server instance.
   * Will be null in middleware mode.
   */
  httpServer: http.Server | null
  /**
   * Chokidar watcher instance. If `config.server.watch` is set to `null`,
   * it will not watch any files and calling `add` or `unwatch` will have no effect.
   * https://github.com/paulmillr/chokidar/tree/3.6.0#api
   */
  watcher: FSWatcher
  /**
   * Web socket server with `send(payload)` method.
   */
  ws: WebSocketServer
  /**
   * Rollup plugin container that can run plugin hooks on a given file.
   */
  pluginContainer: PluginContainer
  /**
   * Module graph that tracks the import relationships, url to file mapping
   * and hmr state.
   */
  moduleGraph: ModuleGraph
  /**
   * The resolved urls Vite prints on the CLI (URL-encoded). Returns `null`
   * in middleware mode or if the server is not listening on any port.
   */
  resolvedUrls: ResolvedServerUrls | null
  /**
   * Programmatically resolve, load and transform a URL and get the result
   * without going through the http request pipeline.
   */
  transformRequest(
    url: string,
    options?: TransformOptions,
  ): Promise<TransformResult | null>
  /**
   * Apply Vite built-in HTML transforms and any plugin HTML transforms.
   */
  transformIndexHtml(
    url: string,
    html: string,
    originalUrl?: string,
  ): Promise<string>
  /**
   * Load a given URL as an instantiated module for SSR.
   */
  ssrLoadModule(
    url: string,
    options?: { fixStacktrace?: boolean },
  ): Promise<Record<string, any>>
  /**
   * Fix ssr error stacktrace.
   */
  ssrFixStacktrace(e: Error): void
  /**
   * Triggers HMR for a module in the module graph. You can use the `server.moduleGraph`
   * API to retrieve the module to be reloaded. If `hmr` is false, this is a no-op.
   */
  reloadModule(module: ModuleNode): Promise<void>
  /**
   * Start the server.
   */
  listen(port?: number, isRestart?: boolean): Promise<ViteDevServer>
  /**
   * Restart the server.
   *
   * @param forceOptimize - force the optimizer to re-bundle, same as --force cli flag
   */
  restart(forceOptimize?: boolean): Promise<void>
  /**
   * Stop the server.
   */
  close(): Promise<void>
  /**
   * Bind CLI shortcuts
   */
  bindCLIShortcuts(options?: BindCLIShortcutsOptions<ViteDevServer>): void
  /**
   * Calling `await server.waitForRequestsIdle(id)` will wait until all static imports
   * are processed. If called from a load or transform plugin hook, the id needs to be
   * passed as a parameter to avoid deadlocks. Calling this function after the first
   * static imports section of the module graph has been processed will resolve immediately.
   * @experimental
   */
  waitForRequestsIdle: (ignoredId?: string) => Promise<void>
}

情報

waitForRequestsIdle は、Vite dev サーバーのオンデマンドの性質に従って実装できない機能の DX を向上させるための脱出ハッチとして使用されることを意図しています。Tailwind のようなツールが起動時に使用して、アプリコードが認識されるまでアプリの CSS クラスの生成を遅らせ、スタイルの変更の点滅を回避することができます。この関数がロードまたはトランスフォームフックで使用され、デフォルトの HTTP1 サーバーが使用される場合、サーバーがすべての静的インポートを処理するまで、6 つの http チャネルのいずれかがブロックされます。Vite の依存関係オプティマイザは現在、この関数を使用して、すべてのインポートされた依存関係が静的にインポートされたソースから収集されるまでプリバンドルされた依存関係のロードを遅らせることにより、依存関係の欠落による全ページのリロードを回避しています。Vite は将来のメジャーリリースで異なる戦略に切り替える可能性があり、大規模なアプリケーションのコールドスタート時のパフォーマンスヒットを避けるために、デフォルトで optimizeDeps.crawlUntilStaticImports: false を設定します。

`build`

型シグネチャ

async function build(
  inlineConfig?: InlineConfig,
): Promise<RollupOutput | RollupOutput[]>

使用例

vite.config.js

import path
 from 'node:path'
import { fileURLToPath
 } from 'node:url'
import { build
 } from 'vite'

const __dirname
 = fileURLToPath
(new URL
('.', import.meta.url
))

await build
({
  root
: path
.resolve
(__dirname
, './project'),
  base
: '/foo/',
  build
: {
    rollupOptions
: {
      // ...
    },
  },
})

`preview`

型シグネチャ

async function preview(inlineConfig?: InlineConfig): Promise<PreviewServer>

使用例

import { preview
 } from 'vite'

const previewServer
 = await preview
({
  // any valid user config options, plus `mode` and `configFile`
  preview
: {
    port
: 8080,
    open
: true,
  },
})

previewServer
.printUrls
()
previewServer
.bindCLIShortcuts
({ print
: true })

`PreviewServer`

interface PreviewServer {
  /**
   * The resolved vite config object
   */
  config: ResolvedConfig
  /**
   * A connect app instance.
   * - Can be used to attach custom middlewares to the preview server.
   * - Can also be used as the handler function of a custom http server
   *   or as a middleware in any connect-style Node.js frameworks
   *
   * https://github.com/senchalabs/connect#use-middleware
   */
  middlewares: Connect.Server
  /**
   * native Node http server instance
   */
  httpServer: http.Server
  /**
   * The resolved urls Vite prints on the CLI (URL-encoded). Returns `null`
   * if the server is not listening on any port.
   */
  resolvedUrls: ResolvedServerUrls | null
  /**
   * Print server urls
   */
  printUrls(): void
  /**
   * Bind CLI shortcuts
   */
  bindCLIShortcuts(options?: BindCLIShortcutsOptions<PreviewServer>): void
}

`resolveConfig`

型シグネチャ

async function resolveConfig(
  inlineConfig: InlineConfig,
  command: 'build' | 'serve',
  defaultMode = 'development',
  defaultNodeEnv = 'development',
  isPreview = false,
): Promise<ResolvedConfig>

command の値は、開発およびプレビューでは serve、ビルドでは build です。

`mergeConfig`

型シグネチャ

function mergeConfig(
  defaults: Record<string, any>,
  overrides: Record<string, any>,
  isRoot = true,
): Record<string, any>

2 つの Vite 設定を深くマージします。isRoot は、マージされている Vite 設定内のレベルを表します。たとえば、2 つの build オプションをマージしている場合は false を設定します。

注意

mergeConfig はオブジェクト形式の設定のみを受け入れます。コールバック形式の設定がある場合は、mergeConfig に渡す前にそれを呼び出す必要があります。

defineConfig ヘルパーを使用して、コールバック形式の設定と別の設定をマージできます

export default defineConfig
((configEnv
) =>
  mergeConfig
(configAsCallback
(configEnv
), configAsObject
),
)

`searchForWorkspaceRoot`

型シグネチャ

function searchForWorkspaceRoot(
  current: string,
  root = searchForPackageRoot(current),
): string

関連: server.fs.allow

次の条件を満たす場合、潜在的なワークスペースのルートを検索します。そうでない場合は、root にフォールバックします。

package.json に workspaces フィールドが含まれている
次のいずれかのファイルが含まれている
- lerna.json
- pnpm-workspace.yaml

`loadEnv`

型シグネチャ

function loadEnv(
  mode: string,
  envDir: string,
  prefixes: string | string[] = 'VITE_',
): Record<string, string>

関連: .env ファイル

envDir 内の .env ファイルをロードします。デフォルトでは、prefixes が変更されない限り、VITE_ で始まる環境変数のみがロードされます。

`normalizePath`

型シグネチャ

function normalizePath(id: string): string

関連: パスの正規化

Vite プラグイン間で相互運用するためにパスを正規化します。

`transformWithEsbuild`

型シグネチャ

async function transformWithEsbuild(
  code: string,
  filename: string,
  options?: EsbuildTransformOptions,
  inMap?: object,
): Promise<ESBuildTransformResult>

JavaScript または TypeScript を esbuild で変換します。Vite の内部 esbuild 変換に一致することを好むプラグインに役立ちます。

`loadConfigFromFile`

型シグネチャ

async function loadConfigFromFile(
  configEnv: ConfigEnv,
  configFile?: string,
  configRoot: string = process.cwd(),
  logLevel?: LogLevel,
  customLogger?: Logger,
): Promise<{
  path: string
  config: UserConfig
  dependencies: string[]
} | null>

Vite 設定ファイルを esbuild で手動でロードします。

`preprocessCSS`

実験的: フィードバックを送る

型シグネチャ

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 は解決されないことに注意してください。

JavaScript API ​

createServer ​

InlineConfig ​

ResolvedConfig ​

ViteDevServer ​

build ​

preview ​

PreviewServer ​

resolveConfig ​

mergeConfig ​

searchForWorkspaceRoot ​

loadEnv ​

normalizePath ​

transformWithEsbuild ​

loadConfigFromFile ​

preprocessCSS ​

JavaScript API

`createServer`

`InlineConfig`

`ResolvedConfig`

`ViteDevServer`

`build`

`preview`

`PreviewServer`

`resolveConfig`

`mergeConfig`

`searchForWorkspaceRoot`

`loadEnv`

`normalizePath`

`transformWithEsbuild`

`loadConfigFromFile`

`preprocessCSS`