Vite plugin to support legacy browsers that do not support native ESM
—
Comprehensive configuration options for @vitejs/plugin-legacy to customize legacy browser support behavior.
The primary plugin factory function that creates the complete legacy browser support system.
/**
* Creates legacy browser support plugins for Vite
* @param options - Configuration options for legacy support
* @returns Array of three plugins: config, generate-bundle, and post-process
*/
function viteLegacyPlugin(options?: Options): Plugin[];Usage Examples:
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';
// Basic usage with default settings
export default defineConfig({
plugins: [
legacy(),
],
});
// Custom browser targets
export default defineConfig({
plugins: [
legacy({
targets: ['> 1%', 'last 2 versions', 'not dead'],
modernTargets: ['chrome >= 64', 'firefox >= 67', 'safari >= 12'],
}),
],
});
// Custom polyfills
export default defineConfig({
plugins: [
legacy({
targets: ['IE 11'],
polyfills: ['es.promise', 'es.array.includes'],
additionalLegacyPolyfills: ['custom-polyfill'],
}),
],
});Configure which browsers to support for legacy and modern builds.
interface TargetsOptions {
/**
* Browser targets for legacy builds using browserslist syntax
* @default 'last 2 versions and not dead, > 0.3%, Firefox ESR'
*/
targets?: string | string[] | Record<string, string>;
/**
* Browser targets for modern builds using browserslist syntax
* @default 'edge>=79, firefox>=67, chrome>=64, safari>=12, chromeAndroid>=64, iOS>=12'
*/
modernTargets?: string | string[];
}Examples:
// String format
legacy({
targets: 'last 2 versions and not dead',
modernTargets: 'supports es6-module',
});
// Array format
legacy({
targets: ['> 1%', 'last 2 versions', 'not IE 11'],
modernTargets: ['chrome >= 64', 'firefox >= 67'],
});
// Object format (for specific versions)
legacy({
targets: {
chrome: '58',
firefox: '57',
safari: '11',
edge: '16',
},
});Control which polyfills are included in legacy and modern builds.
interface PolyfillOptions {
/**
* Enable automatic polyfill detection or specify custom polyfills
* @default true
*/
polyfills?: boolean | string[];
/** Additional polyfills for legacy builds */
additionalLegacyPolyfills?: string[];
/** Additional polyfills for modern builds */
additionalModernPolyfills?: string[];
/**
* Modern polyfill configuration for ESM-capable browsers
* @default false
*/
modernPolyfills?: boolean | string[];
}Examples:
// Automatic polyfill detection (default)
legacy({
polyfills: true,
});
// Disable polyfills entirely
legacy({
polyfills: false,
});
// Custom polyfill list
legacy({
polyfills: ['es.promise.finally', 'es.array.flat'],
additionalLegacyPolyfills: ['intersection-observer'],
modernPolyfills: ['es.promise.finally'],
});Control which types of bundles are generated.
interface BuildOptions {
/**
* Generate legacy SystemJS chunks
* @default true
*/
renderLegacyChunks?: boolean;
/**
* Generate modern ESM chunks
* @default true
*/
renderModernChunks?: boolean;
/**
* Exclude SystemJS runtime from polyfill chunk
* @default false
*/
externalSystemJS?: boolean;
}Examples:
// Modern polyfills only (no legacy chunks)
legacy({
renderLegacyChunks: false,
modernPolyfills: ['es.promise.finally'],
});
// Legacy only (for file:// protocol compatibility)
legacy({
renderModernChunks: false,
targets: ['> 0.5%', 'last 2 versions'],
});
// External SystemJS (reduce bundle size)
legacy({
externalSystemJS: true,
});Advanced options for fine-tuning Babel transformation behavior.
interface AdvancedOptions {
/**
* Babel assumptions for code transformation optimization
* @see https://babeljs.io/docs/assumptions
* @default {}
*/
assumptions?: Record<string, boolean>;
}Examples:
// Babel assumptions for smaller output
legacy({
assumptions: {
setPublicClassFields: true,
privateFieldsAsProperties: true,
},
});interface Options {
targets?: string | string[] | Record<string, string>;
modernTargets?: string | string[];
polyfills?: boolean | string[];
additionalLegacyPolyfills?: string[];
additionalModernPolyfills?: string[];
modernPolyfills?: boolean | string[];
renderLegacyChunks?: boolean;
externalSystemJS?: boolean;
renderModernChunks?: boolean;
assumptions?: Record<string, boolean>;
}Install with Tessl CLI
npx tessl i tessl/npm-vitejs--plugin-legacy