
Содержание статьи
Как вы, возможно, знаете, браузеры начинают догонять ES6. Однако не все работает так гладко, как ожидалось, и решение этой проблемы может занять много времени и утомить. Если что-то пойдет не так, попытаться определить, состоит ли проблема в коде или браузере, нелегко.
Но не беспокойтесь, я покажу вам, как можно быстро установить и написать код ES6, а главное, сделать его совместимым со всеми браузерами, поддерживающими ES5.
ES5 к ES6
Чтобы написать код ES6, нам нужно установить что-нибудь, что может скомпилировать его к ES5. Мы будем использовать, Rollup
. Он компилирует небольшие фрагменты кода в нечто большее и сложнее, например библиотеку или программу. Это позволяет использовать ООП (объектно-ориентированное программирование), что делает ваш код более чистым, структурированным и модульным вместе с другими полезными функциями. Чтобы уточнить, JS объектно-ориентирован, но не является классовый объектно-ориентированный язык, например Java, C++, C# и т.п., к выпуску ES6.
В противном случае это самое ближайшее, что касается ООП включают занятия с 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
команда работает, нам нужно настроить простую структуру ООП. Мы создадим a 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
через браузер, затем откройте обзор (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, прокомментируйте и хлопайте. Это хорошая карма.