Polyfills и транспиляция

Polyfill — код, добавляющий недостающий API (Promise, fetch) в старые браузеры. Transpilation — преобразование нового синтаксиса (classes, arrow functions) в старый. Babel — транспилятор. core-js — коллекция polyfills. В modern development оба используются автоматически.

Polyfill — добавление API: // Старый браузер не имеет Promise // Polyfill добавляет: if (!window.Promise) { window.Promise = function(executor) { // ... реализация Promise }; }

// Теперь Promise доступен во всех браузерах

Transpilation — преобразование синтаксиса: // Современный код: class User { constructor(name) { this.name = name; } }

// После транспиляции (Babel): function User(name) { this.name = name; }

Babel:

• Транспилятор: новый JS → старый JS
• Плагины: для каждого нового фича
• Presets: наборы плагинов (es2015, es2017, env)

core-js:

• Коллекция polyfills
• Включает: Promise, Map, Set, Symbol, Array.from и др.

Современный подход:

• Vite, webpack, Next.js используют Babel/SWC автоматически
• browserslist определяет целевые браузеры
• Полифиллы подключаются автоматически

Когда НЕ нужно:

• Если целевые браузеры поддерживают нужные фичи
• Если используете modern bundler с правильной конфигурацией

Polyfill — как запчасть для старой машины. Новая деталь (Promise) не подходит к старому двигателю (браузеру). Polyfill — переходник, который делает новую деталь совместимой. Transpilation — как переводчик: новый синтаксис переводится на старый язык.

**Самый простой:**

// Polyfill: добавляем Array.from если нет
if (!Array.from) {
  Array.from = function(arrayLike) {
    return [].slice.call(arrayLike);
  };
}

// Теперь Array.from работает в старых браузерах
const arr = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

Простейший polyfill для Array.from.

**Простой:**

// Transpilation: class → function
// Вход (современный JS):
class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} makes a sound`;
  }
}

// Выход (старый JS, после Babel):
function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  return this.name + ' makes a sound';
};

Транспиляция (transpilation): синтаксис class превращается в обычные функции и прототипы.

**Реальный пример:**

// Современный подход: Vite + browserslist
// package.json
{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

// Vite автоматически:
// 1. Транспилирует новый синтаксис (Babel/SWC)
// 2. Добавляет polyfills при необходимости (core-js)
// 3. Оптимизирует для целевых браузеров

Автоматическая транспиляция и polyfills в modern bundlers.

**Неправильно:** Путать polyfill и transpilation

**Почему:** Polyfill = добавление API. Transpilation = преобразование синтаксиса.

**Правильно:** Polyfill закрывает пробелы в API. Transpilation переводит синтаксис.

**Неправильно:** Подключать polyfills вручную

**Почему:** Modern bundlers (Vite, webpack) делают это автоматически.

**Правильно:** Доверьтесь bundler'у. Настройте browserslist.

• Polyfill: добавление недостающего API
• Transpilation: преобразование нового синтаксиса в старый
• Babel/SWC — транспиляторы
• core-js — коллекция polyfills
• Modern bundlers делают это автоматически

Назад: Вы знаете модули (J25) и стиль кода (J26). Этот урок объясняет, как современный код работает в старых средах.

Вперёд: Финальный урок (JV26) — автоматическое тестирование — написание тестов для вашего кода.