Подключение JavaScript/ES* полифиллов для старых браузеров

Категория: JavaScript

Использование полифиллов для поддержки новых версий ECMAScript в старых браузерах (привет IE11).

Polyfill.io

Подключаем полифилл от polyfill.io через CDN для поддержки новых стандартов ECMAScript в старых браузерах.

Примеры подключения:

## Без подключения доп. фич
//cdn.polyfill.io/v3/polyfill.min.js?flags=gated  // IE11 15kb/55ms

## Не включает в себя некоторые методы, например `Object.values()`
//cdn.polyfill.io/v3/polyfill.min.js?features=es5,es6,es7&flags=gated  // IE11 70kb/130ms | EDGE20: 29kb

## Поддержка всех стандартов ECMAScript
//polyfill.io/v3/polyfill.min.js?version=3.52.1&features=default,es5,es6,es7,es2015,es2016,es2017,es2018,es2019  // IE11: 22kb/182ms | EDGE85: 0.2kb/71ms

Сформировать необходимый набор полифиллов можно в конструкторе: https://polyfill.io/v3/url-builder/

Внимание!

Полифиллы не могут обеспечить совместимость на уровне конструкций языка JavaScript без Babel-транспиляции.

Если вы подключаете полифилл непосредственно в браузер, в IE11 не будут работать такие конструкции языка:

`template`     шаблонные литералы
for..of loop   конструкция: for v of [] {}
...[]          Spread Object синтаксис
()=>           Стрелочные ф-ции
method(){}     Короткая запись методов объекта

При этом, IE11 даже не всегда отобразит ошибку в консоли, а просто перестанет работать функционал.

Другие полифиллы

HTML спойлер (details/summary)

better-details-polyfill

Github: https://github.com/chemerisuk/better-details-polyfill

Demo: http://chemerisuk.github.io/better-details-polyfill/

better-dom.js (20kb) + better-details-polyfill.js (1,5kb)

mathiasbynens/jquery-details

Github: https://github.com/mathiasbynens/jquery-details

Demo: https://mathiasbynens.be/demo/html5-details-jquery

npm install -S jquery-details

Реализация не плохая, но для wysywig редактора не годится - при сохранении остаются скрытыми некоторые элементы. Думаю эта штука вполне сгодится для клиентской части сайта.

if (!$.fn.details.support) {
    $('details').details();
}

manuelbieh/Details-Polyfill

Github: https://github.com/manuelbieh/Details-Polyfill

Весит details.polyfill.src.js 4kb, но скрипт нужно применять только после того, как элементы details/summary уже отрисованы на странице. При этом нет никакого способа инициализировать определенные/новые элементы details вручную.

termi/Element.details

Github: https://github.com/termi/Element.details

Реализация на чистом JS. Не тестировал.

#polyfill, #ecmascript, #es, #ie11

категория: JavaScript