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