CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vitejs--plugin-legacy

Vite plugin to support legacy browsers that do not support native ESM

Pending
Overview
Eval results
Files

configuration.mddocs/

Plugin Configuration

Comprehensive configuration options for @vitejs/plugin-legacy to customize legacy browser support behavior.

Capabilities

Main Plugin Function

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'],
    }),
  ],
});

Browser Targets Configuration

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',
  },
});

Polyfill Configuration

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'],
});

Build Control Options

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 Configuration

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,
  },
});

Complete Options Interface

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

docs

configuration.md

csp.md

index.md

polyfills.md

tile.json