Версии JavaScript: обзор и руководство по переходам

Как обеспечить поддержку ES6 (ES2015) в Internet Explorer 11 без транспилятора?

Вариант: подключение полифиллов и отказ от синтаксического сахара.

Если проект не может использовать Babel (например, по причине слишком старой среды сборки), можно вручную подключить скрипты polyfill.io или core-js и писать код на ES5, добавляя новые возможности только через функции.

<!-- Polyfill для Promise, Map, Set и т.д. -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise,Map,Set"></script>
<script>
  // Использование Promise без синтаксиса ES6 (через функцию-конструктор)
  var p = new Promise(function(resolve) {
    resolve('OK');
  });
  p.then(function(msg) { console.log(msg); });
</script>
  

Цель – минимальная модификация кода при невозможности внедрения Babel. Подходит для небольших проектов, где нет сложного синтаксиса.

Как проверить поддержку Optional Chaining (?.) и Nullish Coalescing (??) в браузере без запуска полноценного кода?

Вариант: feature detection через eval или анализ объекта Function.

Можно использовать функцию, которая пытается создать функцию с помощью конструктора и проверяет синтаксис. Например:

function supportsOptionalChaining() {
  try {
    new Function('let a = {}; a?.b?.c');
    return true;
  } catch (e) {
    return false;
  }
}
if (supportsOptionalChaining()) {
  console.log('Optional Chaining поддерживается');
} else {
  console.log('Требуется полифилл или Babel');
}
  

Аналогично для Nullish Coalescing: new Function('let a = null ?? 42').

Цель – определить, нужно ли подключать полифилл или транспилятор именно для этих фич. Используется в библиотеках для автоматического выбора стратегии.

Как перейти с CommonJS на ES модули (ESM) в Node.js, начиная с версии 12?

Вариант: изменение package.json и расширений файлов.

Node.js поддерживает ESM нативно с v12 (экспериментально), а с v14 стабильно. Чтобы использовать import/export вместо require/module.exports, требуется:

1. Установить "type": "module" в package.json.
2. Переименовать файлы в .mjs или оставить .js при указании type module.
3. Заменить синтаксис:

   
   // Старый CommonJS
   const fs = require('fs');
   module.exports = { readFile: fs.readFileSync };
   
   // Новый ESM
   import fs from 'fs';
   export const readFile = fs.readFileSync;
         

Цель – получение преимуществ ESM (статическая структура, tree-shaking, асинхронная загрузка) в серверных проектах. Подходит для новых проектов или при постепенной миграции.

Какие нововведения ECMAScript 2020 (BigInt, globalThis, динамический import) могут быть использованы в проекте без транспиляции?

Вариант: проверка среды и фолбэк на полифиллы.

Некоторые фичи, такие как globalThis, можно полифиллить легко. BigInt не поддаётся полифиллу, так как требует поддержки на уровне движка. динамический import (функция import()) встроен в браузеры начиная с Chrome 63, Firefox 67 и Safari 11.1, но может не быть в старых.

Пример использования с проверкой:

// Polyfill для globalThis
if (typeof globalThis === 'undefined') {
  window.globalThis = window; // для браузеров
  // или global.globalThis = global для Node.js
}

// Использование BigInt только после обнаружения
if (typeof BigInt !== 'undefined') {
  const big = BigInt(12345678901234567890n);
  console.log(big.toString());
} else {
  // альтернативное решение без BigInt
  console.log('BigInt не поддерживается');
}

// Динамический импорт модуля
if (typeof import === 'function') {
  import('./module.js').then(m => m.default());
} else {
  // fallback через require для Node.js или загрузчик скриптов
  const script = document.createElement('script');
  script.src = './module.js';
  document.head.appendChild(script);
}
  

Цель – использовать новые возможности там, где среда их поддерживает, и не ломать код на остальных. Подходит для библиотек, которые должны работать везде, но могут использовать фичу при её наличии.