ES-2015 сейчас
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/polyfills.
Стандарт ES-2015 был принят в июне 2015. Пока что большинство браузеров реализуют его частично, текущее состояние реализации различных возможностей можно посмотреть здесь: https://kangax.github.io/compat-table/es6/.
Когда стандарт будет более-менее поддерживаться во всех браузерах, то весь учебник будет обновлён в соответствии с ним. Пока же, как центральное место для «сбора» современных фич JavaScript, создан этот раздел.
Чтобы писать код на ES-2015 прямо сейчас, есть следующие варианты.
Конкретный движок JS
Самое простое – это когда нужен один конкретный движок JS, например V8 (Chrome).
Тогда можно использовать только то, что поддерживается именно в нём. Заметим, что в V8 большинство возможностей ES-2015 поддерживаются только при включённом use strict .
При разработке на Node.JS обычно так и делают. Если же нужна кросс-браузерная поддержка, то этот вариант не подойдёт.
Babel.JS
Babel.JS – это транспайлер, переписывающий код на ES-2015 в код на предыдущем стандарте ES5.
Он состоит из двух частей:
- Собственно транспайлер, который переписывает код.
- Полифил, который добавляет методы Array.from , String.prototype.repeat и другие.
На странице https://babeljs.io/repl/ можно поэкспериментировать с транспайлером: слева вводится код в ES-2015, а справа появляется результат его преобразования в ES5.
Обычно Babel.JS работает на сервере в составе системы сборки JS-кода (например webpack или brunch) и автоматически переписывает весь код в ES5.
Настройка такой конвертации тривиальна, единственно – нужно поднять саму систему сборки, а добавить к ней Babel легко, плагины есть к любой из них.
Если же хочется «поиграться», то можно использовать и браузерный вариант Babel.
Это выглядит так:
Сверху подключается браузерный скрипт browser.min.js из пакета Babel. Он включает в себя полифил и транспайлер. Далее он автоматически транслирует и выполняет скрипты с type=»text/babel» .
Размер browser.min.js превышает 1 мегабайт, поэтому такое использование в production строго не рекомендуется.
Примеры на этом сайте
Только при поддержке браузера
Запускаемые примеры с ES-2015 будут работать только если ваш браузер поддерживает соответствующую возможность стандарта.
Это означает, что при запуске примеров в браузере, который их не поддерживает, будет ошибка. Это не означает, что пример неправильный! Просто пока нет поддержки…
Рекомендуется Chrome Canary, большинство примеров в нём работает. Firefox Developer Edition тоже неплох в поддержке современного стандарта, но на момент написания этого текста переменные let работают только при указании version=1.7 в типе скрипта: . Надеюсь, скоро это требование ( version=1.7 ) отменят.
Впрочем, если пример в браузере не работает (обычно проявляется как ошибка синтаксиса) – почти все примеры вы можете запустить при помощи Babel, на странице Babel: try it out. Там же увидите и преобразованный код.
На практике для кросс-браузерности всё равно используют Babel.
Babel js что это
При создании приложения для React.js в прошлых темах для компиляции JSX в JavaScript использовался специальный инструмент — компилятор Babel. Для этого, во-первых, на веб-страницу подключался скрипт компилятора:
Это специальный скрипт, который позволяет при запуске веб-страницы в брузере на лету преобразовать весь содержащийся на ней код React в код javascript, понятный браузеру.
Во-вторых, элемент script, который содержал основной код приложения, имел атрибут type=»text/babel» :
Если мы уберем подключениие скрипта компилятора Babel или уберем атрибут type=»text/babel» наш код не будет работать. Более того в браузере мы увидим ошибки, поскольку по умолчанию мы не можем определять код html в javascript, как это делается с помощью JSX. Нам обязательно надо транслировать код JSX в обычный JavaScript, который понимается браузером.
Кроме того, использование Babel позволяет задействовать в приложении многие возможности новых стандартов JS, в частности, ES2015+, которые в полноценной мере на данный момент поддерживаются не всеми браузерами. Например, определим следующую веб-страницу:
Hello React
В данном случае элемент, который будет отображаться на веб-странице, вынесен в отдельный класс Hello, который наследуется от класса React.Component. То есть в данном случае уже применяются возможности ES6. Подобное определение компонента позволяет работать с ним и развивать его отдельно от другого кода. А чтобы его использовать, в функцию ReactDOM.render() в качестве первого параметра передается одноименный элемент . Но без компилятора Babel мы естественно это все не смогли бы использовать.
Полифилы
JavaScript – динамично развивающийся язык программирования. Регулярно появляются предложения о добавлении в JS новых возможностей, они анализируются, и, если предложения одобряются, то описания новых возможностей языка переносятся в черновик https://tc39.github.io/ecma262/, а затем публикуются в спецификации.
Разработчики JavaScript-движков сами решают, какие предложения реализовывать в первую очередь. Они могут заранее добавить в браузеры поддержку функций, которые всё ещё находятся в черновике, и отложить разработку функций, которые уже перенесены в спецификацию, потому что они менее интересны разработчикам или более сложные в реализации.
Таким образом, довольно часто реализуется только часть стандарта.
Можно проверить текущее состояние поддержки различных возможностей JavaScript на странице https://compat-table.github.io/compat-table/es6/ (нам ещё предстоит изучить многое из этого списка).
Babel
Когда мы используем современные возможности JavaScript, некоторые движки могут не поддерживать их. Как было сказано выше, не везде реализованы все функции.
И тут приходит на помощь Babel.
Babel – это транспилер. Он переписывает современный JavaScript-код в предыдущий стандарт.
На самом деле, есть две части Babel:
- Во-первых, транспилер, который переписывает код. Разработчик запускает Babel на своём компьютере. Он переписывает код в старый стандарт. И после этого код отправляется на сайт. Современные сборщики проектов, такие как webpack или brunch, предоставляют возможность запускать транспилер автоматически после каждого изменения кода, что позволяет экономить время.
- Во-вторых, полифил. Новые возможности языка могут включать встроенные функции и синтаксические конструкции. Транспилер переписывает код, преобразовывая новые синтаксические конструкции в старые. Но что касается новых встроенных функций, нам нужно их как-то реализовать. JavaScript является высокодинамичным языком, скрипты могут добавлять/изменять любые функции, чтобы они вели себя в соответствии с современным стандартом. Термин «полифил» означает, что скрипт «заполняет» пробелы и добавляет современные функции. Два интересных хранилища полифилов:
- core js поддерживает много функций, можно подключать только нужные.
- polyfill.io – сервис, который автоматически создаёт скрипт с полифилом в зависимости от необходимых функций и браузера пользователя.
Таким образом, чтобы современные функции поддерживались в старых движках, нам надо установить транспилер и добавить полифил.
Примеры в учебнике
Большинство примеров можно запустить «на месте», как этот:
alert('Нажмите кнопку "Play" в крайнем правом углу, чтобы запустить пример');Примеры, в которых используются современные возможности JS, будут работать, если ваш браузер их поддерживает.
Google Chrome обычно поддерживает современные функции, можно запускать новейшие примеры без каких-либо транспилеров, но и другие современные браузеры тоже хорошо работают.
Что такое Babel в JavaScript?
Babel — это инструмент транспиляции для JavaScript, который позволяет разработчикам использовать последние возможности языка JavaScript, даже если они не поддерживаются в текущей версии браузера или среды выполнения Node.js. Babel преобразует современный код JavaScript (ES6+ и далее) в совместимый с более старыми версиями JavaScript, которые могут быть успешно выполнены в различных окружениях.
Основные моменты:
- Установка Babel:
- Babel устанавливается через npm (пакетный менеджер Node.js) с использованием команды npm install —save-dev @babel/core @babel/cli .
- Настройка конфигурации:
- Конфигурация Babel определяется в файле .babelrc или через настройки в package.json . В конфигурации указываются плагины и пресеты для транспиляции.
- Использование плагинов и пресетов:
- Babel использует плагины для выполнения конкретных трансформаций кода. Пресеты представляют собой группы связанных плагинов, предназначенных для определенных целей (например, @babel/preset-env для трансформации современного кода).