Skip to content

Latest commit

 

History

History
106 lines (68 loc) · 9.03 KB

article.md

File metadata and controls

106 lines (68 loc) · 9.03 KB

Поліфіли та транспілятори

Мова JavaScript постійно розвивається. До неї регулярно додаються нові пропозиції, далі вони аналізуються і, якщо вважаються гідними для розширення мови, додаються до списку https://tc39.github.io/ecma262/, а потім переходять до специфікації.

Команди, які розробляють рушії JavaScript, мають власні уявлення про те, що потрібно реалізувати спочатку. Вони можуть вирішити реалізувати пропозиції, що знаходяться у чернетці, і відкласти речі, які вже є у специфікації, оскільки вони менш цікаві або їх важче розробити.

Тому це цілком звичайна ситуація, коли лише частина стандарту реалізована у самому рушії.

<<<<<<< HEAD Хороша сторінка, щоб побачити поточний стан підтримки функцій мови, є тут https://compat-table.github.io/compat-table/es6/ (вона велика, нам доведеться ще багато вивчати).

A good page to see the current state of support for language features is https://compat-table.github.io/compat-table/es6/ (it's big, we have a lot to study yet).

540d753e90789205fc6e75c502f68382c87dea9b

Як програмісти, ми б хотіли використовувати найновіші можливості. Чим більше хороших речей — тим краще!

З іншого боку, як змусити працювати «сучасний» код на старих рушіях? Адже вони поки що не підтримують найновіших можливостей.

Для цього існують два інструменти:

  1. Транспілятори.
  2. Поліфіли.

В цьому розділі ми дізнаємося, як вони працюють та яке їхнє місце у веброзробці.

Транспілятори

Транспілятор -- це спеціальний інструмент, який "перекладає" вихідний код з однієї мови програмування в код іншою мовою програмування. Також обробка коду може виконуватися в межах однієї мови програмування. Транспілятор парсить ("читає та розуміє") сучасний код і переписує його, використовуючи старі синтаксичні конструкції, які працюють на старих рушіях.

Наприклад, JavaScript до 2020 року не мав "оператора об’єднання з null" ??. Якщо відвідувач використовує старий браузер, він не зможе виконати код, на кшталт height = height ?? 100.

Транспілятор проаналізує такий код і перепише height ?? 100 на (height !== undefined && height !== null) ? height : 100.

// перед запуском транспілятора
height = height ?? 100;

// після виконання транспілятора
height = (height !== undefined && height !== null) ? height : 100;

Тепер, переписаний код буде коректно виконуватися на старих рушіях JavaScript.

Зазвичай, розробник запускає на своєму комп’ютері транспілятор разом з компілятором, а вже після цього розгортає ("деплоє" від слова deploy) код на сервер.

Говорячи про імена, Babel -- один з найвідоміших транспіляторів.

Сучасні збирачі проєктів, такі як webpack, надають засоби для автоматичного запуску транспілятора при кожній зміні коду, тому його дуже легко інтегрувати в процес розробки.

Поліфіли

Серед нового функціоналу мови можуть бути не тільки синтаксичні конструкції та оператори, але й також вбудовані функції.

Наприклад, функція Math.trunc(n) "відрізає" десяткову частину числа, тобто Math.trunc(1.23) поверне 1.

В деяких (дуже старих) рушіях JavaScript, немає функції Math.trunc, тому такий код призведе до помилки.

Якщо ми говоримо про нові функції, а не синтаксичні вирази, то тут нічого не потрібно транспілювати ("перекладати"). Нам лише потрібно оголосити відсутні функції.

Скрипт, який оновлює/додає нові функції називається "поліфіл" (polyfill). Він "заповнює" прогалини й додає відсутній функціонал.

Для нашого випадку з функцією Math.trunc, поліфілом буде такий скрипт, який реалізує цю функцію, ось так:

if (!Math.trunc) { // якщо немає такої функції
  // реалізувати її:
  Math.trunc = function(number) {
    // функції Math.ceil та Math.floor існують навіть в древніх рушіях JavaScript
    // ми розглянемо їх пізніше
    return number < 0 ? Math.ceil(number) : Math.floor(number);
  };
}

JavaScript дуже динамічна мова -- скрипти можуть додавати чи оновлювати функції, навіть якщо вони вбудовані.

<<<<<<< HEAD Є два цікавих поліфіла:

  • core js, що підтримує багато функціонала, дозволяє включати лише необхідні функції.

======= One interesting polyfill library is core-js, which supports a wide range of features and allows you to include only the ones you need.

540d753e90789205fc6e75c502f68382c87dea9b

Підсумки

В цьому розділі ми намагалися вмотивувати вас вивчати сучасний та навіть "передовий" функціонал мови, навіть якщо цей функціонал поки що не підтримується сучасними рушіями JavaScript.

Просто не забувайте використовувати транспілятор (якщо будете використовувати сучасний синтаксис чи оператори) та поліфіли (щоб додавати функції, які можуть бути відсутні). Це дозволить впевнитися, що код працює на різних рушіях.

Наприклад, пізніше (коли достатньо вивчите JavaScript), ви зможете налаштувати систему збору проєкту на основі webpack із плагіном babel-loader.

<<<<<<< HEAD Ось хороші ресурси, де можна дізнатися поточний стан підтримки різного функціоналу:

P.S. Google Chrome is usually the most up-to-date with language features, try it if a tutorial demo fails. Most tutorial demos work with any modern browser though.

540d753e90789205fc6e75c502f68382c87dea9b

P.S. Зазвичай браузер Google Chrome підтримує більшість найновіших функцій мови, спробуйте його, якщо демонстрація не працює. Більшість демонстрацій працюють із сучасними браузерами.