В чем разница между polyfill и транспилером?

Ответ 1

Оба подхода выполняют одну и ту же цель: вы можете написать код, который использует некоторые функции, которые еще не реализованы в вашей целевой среде. Они делают это, однако, используя разные методы.

A polyfill попытается подражать определенным API-интерфейсам, поэтому их можно использовать, как если бы они уже были реализованы.

A transpiler, с другой стороны, преобразует ваш код и заменяет соответствующий раздел кода другим кодом, который уже может быть выполнен.

Как правило, вы используете polyfill, если ваш целевой браузер еще не реализовал последнюю функцию устранения кровотечений (читайте API-интерфейсы браузера), которые вы хотите использовать. Transpiler, с другой стороны, позволит вам использовать языковые функции, целевая среда еще не поддерживается, например. некоторые функции ES6, такие как функции стрелки жира.

Ответ 2

Polyfill

Слово polyfill - это придуманный термин (Remy Sharp), используемый для обозначения определения более новой функции и создания части код, эквивалентный поведению, но способный работать в older JS environments.

Например:

ES1 определяет метод с именем isNaN(value), чтобы определить, является ли значение незаконным числом (Not-a-Number).

ES6 определяет метод с именем Number.isNaN(value), также определяет, имеет ли значение NaN (Not-a-Number).

Если вы заметили, Number.isNaN() не поддерживается в каждом браузере, поэтому для этого вы можете polyfill метод. Не все новые функции полностью полиполняемы. Иногда большая часть поведения может быть многонаполнена, но есть еще небольшие отклонения. Вы должны быть действительно очень осторожны при реализации polyfill, чтобы убедиться, что вы строго придерживаетесь спецификации. Или еще лучше, используйте уже проверенный набор полиполков, которым вы можете доверять, такие как предоставленные ES5-Shim и ES6-Shim.

// These method is a sample of making polyfill 
if (!Number.isNaN) {
    Number.isNaN = function isNaN(x) {
        return x !== x;
    };
}

Transpile

Невозможно добавить новый синтаксис polyfill, добавленный в этот язык. Новый синтаксис приведет к ошибке в старом JS-движке как непризнанный/недействительный. Поэтому лучшим вариантом является использование инструмента, который преобразует ваш новый код в более старые эквиваленты кода. Этот процесс обычно называют "пересылкой" термином для transforming + compiling.

Есть несколько важных причин, по которым вам следует заботиться transpiling:

• The new syntax added to the language is designed to make your code more readable and maintainable. Более старые эквиваленты часто гораздо более запутаны. Вы должны предпочесть писать новый и более чистый синтаксис не только для себя, но и для всех других членов команды разработчиков.
• If you transpile only for older browsers, but serve the new syntax to the newest browsers, вы можете воспользоваться преимуществами оптимизации производительности браузера с помощью нового синтаксиса. Это также позволяет разработчикам браузеров иметь более реальный код для тестирования своих реализаций и оптимизации.
• Using the new syntax earlier allows it to be tested more robustly in the real world, который предоставляет более раннюю обратную связь в комитет Javascript (TC39). Если проблемы обнаруживаются достаточно рано, их можно изменить/зафиксировать до того, как эти ошибки дизайна языка станут постоянными.

Для вас есть несколько отличных transpilers. Вот некоторые хорошие варианты на момент написания этой статьи:

• Вавилон (ранее 6to5): Transpiles ES6 and above into ES5
• Traceur: Transpiles ES6, ES7, and beyond into ES5