Як ви вже знаєте, браузери починають наздоганяти ES6. Однак не все працює так гладко, як очікувалося, і це може бути трудомісткою та нудною проблемою для вирішення. Якщо щось піде не так, спроба визначити, чи проблема полягає в коді чи браузері, не є простим процесом.
Але не хвилюйтесь, я покажу вам, як ви можете швидко встановити та написати код ES6, а головне, зробити його сумісним для всіх браузерів, що підтримують ES5.
ES5 до ES6
Для того, щоб написати код ES6, нам потрібно встановити щось, що може скомпілювати його в ES5. Ми будемо використовувати, Rollup
. Він компілює невеликі фрагменти коду у щось більше і складніше, наприклад, у бібліотеку чи програму. Це дозволяє використовувати OOP (об'єктно-орієнтоване програмування), завдяки якому ваш код виглядає більш чистим, структурованим та модульним, поряд з іншими корисними функціоналами. Для уточнення, JS є об’єктно-орієнтованою, але не є об’єктно-орієнтованою мовою на основі класів, як Java, C ++, C # тощо, до випуску ES6.
В іншому випадку, найближчим до OOP щодо включення класів з ES5 є використання IIFE (Вираз функції відразу ж викликаного) або встановлення зовнішніх бібліотек. Але навіщо покладатися на зовнішні ресурси, коли у вас є основна мова, яка підтримує парадигму ООП? Багато найбільш широко використовуваних мов програмування вже підтримують його (наприклад, C ++, Java, C # та PHP).
Чому ES6?
Особисто я використовую його, оскільки це дозволяє впорядкувати свій код в окремі файли, що полегшує масштабування та підтримку коду.
Наприклад, у моєму HTML у мене є такий, script
який завантажується main.js
, а всередині main.js
я завантажую кілька JS
файлів за допомогою import
та export
операторів. Замість того, щоб мати кілька сценаріїв у своєму HTML-файлі, мені потрібен лише один (менше коду).
Передумови
- Linux або macOS (на базі Debian)
- Встановлено NPM (менеджер пакетів)
- Базові знання CLI
Крок перший: Встановіть зведений пакет
Для використання Rollup
ми повинні встановити його глобально. Не забувайте використовувати sudo
. Це дозволяє отримати доступ до Rollup
команд у будь-якому проекті, з яким ви працюєте.
Крок другий: Структура файлу
Після Rollup
глобальної інсталяції наступним кроком є налаштування структури папок та створення двох папок src
і dest
всередині вашого проекту. Крім того, створюйте index.html
.
src
→ Файли ES6 (де ви будете писати код)dest
→ Створює ES5 (компільовані версії ES6)

Майте на увазі, bundle.js
файл автоматично генерується при виконанні Rollup
команди. Про це ми поговоримо пізніше.
Крок третій: Створіть файл конфігурації
Створіть новий файл та назвіть його rollup.config.js
. Потім додайте цей код:

Переконайтеся, що шлях до input
та output
джерело правильний зі структурою вашої папки, і що цей файл розміщений у головній папці.
Крок четвертий: Завантажте файл сценарію в HTML
Ми майже готові, але спочатку нам потрібно зробити посилання на потрібний вихідний файл у нашому шаблоні HTML. Це завантажить файл ES5, який складено з ES6.

Крок п'ятий: Налаштування файлів JS
Для того, щоб перевірити, чи Rollup
працює команда, нам потрібно встановити просту структуру ООП. Ми створимо car.js
клас, і default export
це буде main.js
.
Майте на увазі, що цей файл експортує новий екземпляр car.js
класу, і це дозволяє отримувати безпосередній доступ до методів, а не писати const car = new Car()
в main.js
класі.
Оскільки я ледачий інженер програмного забезпечення, робота з кількома зайвими символами коду займає багато часу :)

Далі імпортуйте car.js
клас main.js
, щоб отримати доступ до методу type()
.

Крок шостий: Скомпілюйте ES6 до ES5
Щоб виконати створений нами файл конфігурації, запустіть цю команду $ rollup -c
або $ rollup --config
- обидва однакові.
Після запуску однієї з команд відкрийте index.html
браузер, потім відкрийте inspect ( ctrl + shift + I
) у браузері та перейдіть до console
. Якщо ви бачите текст "Tesla Model S"
, це означає, що все працювало успішно.
Майте на увазі, що кожного разу, коли ви вносите зміни до файлів ES6, ви повинні оновити його, запустивши команду.
Необов’язково
Оскільки ви встановили Rollup
глобально, ви можете скомпілювати ES6 без необхідності мати файл rollup.config.js
. Це робить точно те ж саме:
$ rollup src/main.js — o dest/bundle.js — f iife
Особисто я рекомендую запустити, $ rollup -c
як показано на кроці шостий, оскільки коду потрібно менше. Пам'ятайте, що rollup.config.js
при запуску цієї команди файл повинен бути включений.
Якщо ви знайшли цей короткий підхід до встановлення для ES6 корисним, будь ласка, коментуйте та плескайте. Це хороша карма.