Як ви вже знаєте, браузери починають наздоганяти 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 корисним, будь ласка, коментуйте та плескайте. Це хороша карма.