Cross-Browser Polyfill Builder

Build a compilation tool that automatically adds polyfills for modern JavaScript features based on target browser environments. The tool should analyze code and inject only the necessary polyfills to ensure compatibility with specified browsers.

Requirements

Your tool should:

1. Accept a configuration specifying target browsers (e.g., "IE 11", "Chrome >= 60", "last 2 versions")
2. Transform JavaScript code that uses modern features (e.g., Promise, Array.includes, async/await)
3. Automatically inject polyfills only for features that are missing in the target browsers
4. Support usage-based polyfilling to minimize bundle size by only including polyfills for features actually used in the code
5. Generate browser-compatible output code

Input Example

// Modern JavaScript code
async function fetchUsers() {
  const response = await fetch('/api/users');
  const users = await response.json();
  return users.filter(user => user.name.includes('John'));
}

const numbers = [1, 2, 3, 4, 5];
const hasThree = numbers.includes(3);

Expected Behavior

When targeting older browsers (e.g., IE 11), the tool should:

• Detect usage of modern features (async/await, fetch, Array.includes)
• Add necessary polyfills from core-js for those specific features
• Generate code that runs on the target browsers

When targeting modern browsers (e.g., Chrome 90+), the tool should:

• Recognize these features are supported natively
• Skip unnecessary polyfills to reduce bundle size

Test Cases

• It compiles modern JavaScript for IE 11 and includes Promise polyfills @test
• It compiles code with Array.includes for older browsers and includes the polyfill @test
• It compiles for modern browsers without adding unnecessary polyfills @test
• It handles async/await syntax for browsers that don't support it @test

Implementation

@generates

API

/**
 * Compiles JavaScript code with automatic polyfilling based on target browsers
 *
 * @param {string} code - The JavaScript source code to compile
 * @param {object} options - Compilation options
 * @param {string|string[]} options.targets - Target browsers (browserlist format)
 * @param {boolean} options.useBuiltIns - Enable usage-based polyfilling (default: 'usage')
 * @param {number} options.corejs - Core-js version to use (2 or 3)
 * @returns {Promise<{code: string}>} Compiled code with polyfills
 */
async function compile(code, options) {
  // IMPLEMENTATION HERE
}

module.exports = { compile };

Dependencies { .dependencies }

@swc/core { .dependency }

Provides fast JavaScript/TypeScript compilation with environment-based transformation and polyfill support.

core-js { .dependency }

Provides modular standard library polyfills for JavaScript.