Vite Plugin Incremental Build

2.0.0 verified Mon Apr 27 auth: no javascript

A Vite plugin and wrapper that enables incremental builds for projects that need to build to disk instead of using the Vite dev server. Version 2.0.0 (stable) provides a patching mechanism for Vite config and supports build hooks. Unlike rollup-plugin-incremental, this is Vite-specific and tested mainly with Vue (React should work). Release cadence is low; the package ships TypeScript types.

Common errors

error ERR_REQUIRE_ESM: require() of ES Module ↓

cause Using CommonJS require() instead of ESM import.

fix

Use import { viteIncrementalBuild } from 'vite-plugin-incremental-build';

error patchConfig is not a function ↓

cause Importing patchConfig as default instead of named export.

fix

Use import { patchConfig } from 'vite-plugin-incremental-build';

error Cannot find module 'tsx' ↓

cause tsx is required to run the build script but not installed.

fix

Run npm i -D tsx

Warnings

gotcha The project structure must match the expected layout with tools/incrementalBuild.ts and specific directory structure. ↓

fix Ensure your project follows the structure shown in the README.

gotcha Tested only for Vue; React is untested but should work. ↓

fix If using React, test thoroughly before relying on the plugin.

gotcha Build speed depends on the number of imported files by the saved file. ↓

fix Optimize imports to improve incremental build performance.

gotcha Use the Vite dev server with CSP when possible instead of this plugin. ↓

fix For extensions, serve JS from localhost via Vite dev server.

Install

npm install vite-plugin-incremental-build

yarn add vite-plugin-incremental-build

pnpm add vite-plugin-incremental-build

Imports

viteIncrementalBuild

wrong

const viteIncrementalBuild = require('vite-plugin-incremental-build')

correct

import { viteIncrementalBuild } from 'vite-plugin-incremental-build'

ESM-only; require() will fail.

patchConfig

wrong

import patchConfig from 'vite-plugin-incremental-build'

correct

import { patchConfig } from 'vite-plugin-incremental-build'

patchConfig is a named export, not the default.

default export

wrong

import { default } from 'vite-plugin-incremental-build'

correct

import viteIncrementalBuild from 'vite-plugin-incremental-build'

The package also has a default export which is the same as viteIncrementalBuild for convenience.

Quickstart

Shows how to create an incremental build script using viteIncrementalBuild and patchConfig with a typical Vite config.

import { defineConfig } from 'vite';
import { viteIncrementalBuild, patchConfig } from 'vite-plugin-incremental-build';

const viteConfig = defineConfig({
  plugins: [],
  root: './src',
  publicDir: 'public',
  build: {
    outDir: '../dist',
    emptyOutDir: true,
  },
});

viteIncrementalBuild({
  config: patchConfig(viteConfig, { ignoreWarnings: false }),
  bundleName: 'bundle',
  watcherIgnoredFiles: ['./src/not-watched', /(^|[\/\\])\.\./],
  beforeBuildCallback: () => {
    console.log('Building...');
  },
});