Вставить/изменить ссылку. Es6 поддержка браузерами

Начните использовать ES6 и SASS в браузерах сегодня — /dev/dragon

Браузеры всегда были очень инертной средой для исполнения наших программ. Даже когда язык JavaScript ещё не развивался так быстро как сейчас, браузеры уже не успевали за ним. Годами на троне сидел какой-нибудь хтонический монстр вроде IE6 и заставлял с ним считаться каждого. Нам пришлось на долгое время забыть об использовании чистых языковых конструкций и научиться доверять очередной библиотеке, знающей разницу между браузерами и их версиями. Появились армии разработчиков, неплохо знающих jQuery, но как огня боящихся самого языка JavaScript. В то же время, дела со стилями в чем-то были еще хуже. Несмотря на появление множества новых свойств, сам формат не получил вообще никаких значимых улучшений и, в сыром виде, даже сейчас едва ли может быть удобен кому-либо.

Установка Node.Js и npm

Они понадобится для установки инструментов разработчика и запуска транспайлера, так что нужны будет только там, где будет происходить непосредственно сама сборка проекта. В простейшем случае, это может быть машина разработчика: тогда результаты работы транспайлера можно добавить в систему версий как обычные файлы. Итак, установим их:

А теперь создадим новый пакет:

Ответьте на все вопросы мастера. По результатам будет сгенерирован файл package.json подобного вида:

JavaScript: сборка модулей в один файл

Для сборки всех файлов и модулей в один файл, готовый к «отгрузке» клиентскому браузеру, мы используем browserify. Установим его:

Данная команда найдет подходящую версию для browserify, установит её и сохранить информацию об этой зависимости в секции «devDependencies» файла «package.json».

Теперь создадим скрипт для npm, который будет запускать сборку JavaScript. Для этого измените секцию «scripts» в файле «package.json» следующим образом:

Не беда, что browserify недоступен как исполняемый файл глобально. npm самостоятельно разберется с путями до ./node_modules/.bin, если запускать команду через npm run.

JavaScript: транспайлинг из ES6 в ES5

Нет сомнений, что сборка модулей в один файл это уже очень неплохо и большой шаг вперед, пока мы всё еще ждем HTTP2. Но пока мы не можем использовать никаких современных возможностей ES6, так как всё еще не настроили транспайлинг. Самое время сделать это. Для начала, установим сам транспайлер, плагины к нему, а также адаптер для интеграции с browserify:

После этого, модифицируйте скрипт «build-js» в файле «package.json» следующим образом:

Также потребуется указать, как именно мы хотим проводить транспайлинг. В нашем случае, мы установили babel-preset-es2015, который позволит использовать возможности ES6. При желании, аналогичным образом можно также поставить и другие вариант транспиляции, например для преобразования jsx или ES7 в ES5. Добавьте новую секцию «browserify» следующего содержания в «package.json» и укажите, какие именно преобразования необходимо произвести над исходным кодом:

JavaScript: добавление полифилла для ES5

На данном этапе, код, который мы получаем от транспайлера, может работать в любом браузере, поддерживающем ES5. К сожалению, есть небольшой процент браузеров, которые не в полной мере поддерживают ES5. Мы можем использовать так называемый shim, добавляющий часть возможностей ES5. К сожалению, не все методы могут быть реализованы таким образом. Но хоть что-то — уже не так плохо.

JavaScript: обфускация и минификация

Хотя на прошлом шаге мы уже добились исполнения JavaScript ES6 в браузере, он всё еще не оптимизирован по размеру. Для обфускации и уменьшения размера файла можно использовать, например, uglifyjs:

CSS: компиляция из SASS

Аналогичным образом, мы можем обработать и SASS, преобразовав его в CSS, понимаемый всеми браузерами, обфусцировав его. Для начала, установим компилятор из SASS в CSS:

Добавим новый скрипт для сборки стилей:

CSS: расстановка префиксов

Никому не нравится писать десять различных префиксов для разных браузеров, чтобы использовать какую-нибудь более-менее новую возможность CSS. К счастью, за нас это может делать и машина:

CSS: обфускация и минификация

Пример

Результат можно посмотреть в репозитарии: https://bitbucket.org/astartsky/modern-es6-sass-boilerplate

Итоги

Итак, теперь ничто не мешает нам писать код на современном диалекте JavaScript, а стили на SASS. Что самое приятное в данном подходе — он применим практически в любом случае. Вам не требуется ни сервер сборки, ни современный код, ни определенная архитектура, ни разработка проекта с нуля. Вы можете применять этот подход в любом самом запущенном legacy-проекте, развернув небольшой параллельный стек технологий рядом с основным. Даже ваш бекенд не обязан об этом ничего знать и может быть любым.

ast.rocks

История ES6-модулей / Блог компании Нетология / Хабрахабр

История языка EcmaScript простирается от простого языка сценариев в браузере вплоть до современного языка общего назначения, работающего в различных хост-окружениях. Вместе с усложнением языка появилась и необходимость организации модульной структуры и переиспользования кода с помещением его в библиотеки. Первые библиотеки импортировались за счет загрузки соответствующего JS-файла с хоста поставщика или CDN, а взаимодействие производилось, как правило, посредством экспорта функций и классов с заранее известными именами в глобальное пространство — объект window. Такая схема применялась достаточно долго, и в простых случаях работает она вполне успешно.

Остаются некоторое фундаментальные проблемы, связанные с асинхронной загрузкой и взаимодействием с DOM-моделью. Некоторые библиотеки должны быть загружены раньше других, если вторые имеют зависимость от первых. В случае с динамическим импортом это требует правильной установки async-флага или манипуляции с событием readystatechanged, в зависимости от вендора и версии браузера.

Конечно, и для этого общего случая есть решение, описанное в статье. Однако, во-первых, оно требует тщательного слежения за зависимостями во всех загружаемых библиотеках, и во-вторых, если некоторые библиотеки представляют собой polyfills, которым требуется отслеживание DOM-состояния и событий. В случае defer fallfack это не заработает.

Для универсального решения вышеописанных задач было разработано несколько стандартов организации библиотечных модулей для JS, самые известные из них — AMD (Asyncronous module definition), UMD (Universal module definition) и CommonJS. За счет следования авторами модулей общего формата декларации и наличия общего загрузчика файлов, большинство проблем было решено.

Тем временем активно развивалась платформа Node.JS, где зависимости модулей были решены совершенно другим способом — посредством синхронного require-вызова, а модули имели соответствующий специфичный формат. Тогда технический комитет TC-39 начал разработку универсального средства импорта модулей, которое должно было решать все вышеобозначенные задачи и при этом работать одинаково на сервере и клиенте и обеспечивать синхронную и асинхронную семантику загрузки модуля. Таким средством стали ES6-модули.

Разработчики хотели создавать веб-приложения на актуальном диалекте Ecmascript 6, 7, 8-й и поздних версиях, а для этого требовалось удобство по выполнению transpile-инга и добавлению соответствующих polyfills для приложений автоматическим образом, чтобы разработанное приложение могло работать и в относительно старых браузеров без проблем.

Совокупным решением этих задач стали bundle builder, настраиваемые вместе с подключаемыми transpilers и polyfills. Идея состоит в том, что код приложения преобразуется в эталонный диалект, который считается поддерживаемыми всеми актуальными браузерами, например, ES3 или ES5 — в зависимости от задачи. После этого все файлы библиотечных модулей и кода приложения соединяются в один большой файл — так называемый bundle. Этот файл отправляется на клиент и уже не требует никаких синхронных или асинхронных импортов, поскольку весь необходимый код уже находится в bundle и доступен по кодовым номерам.

Известные решения, имплементирующие соответствующий подход: Browserify и Webpack, причем последний в настоящее время является фактически стандартом де-факто. Транспайлером де-факто является Babel. Предложенная схема имеет большое количество преимуществ.

Во-первых, благодаря наличию в схеме transpiler-а, исходный проект может быть фактически написан на любом языке. Как правило, это EcmaScript или TypeScript последней версии, но возможности по расширению синтаксиса практически безграничны. Одно из известных расширений для ES — JSX, используемый в библиотеке React и ее производных.

Во-вторых, за счет контроля преобразования кода в фазе transpile-инга, имеется возможность внедрения поддержки даже такой функциональности, как ES6 proxy или рефлексивной информации в коде.

Среди интересных следствий применения bundle-ирования кода — возможность написание клиентского кода на языке F# или Ocaml и многое другое.

Помимо очевидных преимуществ, решение с bundle-ированием имеет и ряд очевидных недостатков.

Во-первых, результирующий bundle, даже с учетом возможного сжатия, имеет довольно большой объем и может быть ощутим при мобильном трафике. Во-вторых, bundle включает в себя абсолютно все зависимости веб-приложения, которые будут загружены и интерпретированы в браузере пользователя, даже если тот не воспользуется элементами веб-приложения, в которых они нужны. В-третьих, пропадает возможность кэширования библиотечных зависимостей, поскольку bundle или полностью актуален, или требует полного обновления.

Негативные эффекты проявляются и при разработке и отладке приложения. Поскольку bundle-ирование почти всегда сопряжено с transpile, то процесс получения нового bundle, особенно для крупного проекта, может идти долго. Это означает, что в процессе разработки и отладки, после внесения очередного изменения, требуется пересборка bundle и загрузка его новой версии на клиент. Кроме того, за счет машинного преобразования исходного кода, он становится практически нечитаем, что ведет к сложностям в использовании отладчика в браузере.

Конечно, большая часть обозначенных выше проблем имеет свои решения. Для того чтобы в production-режиме не загружать в браузер весь код приложения целиком, в webpack используется технология code chunk splitting. Можно использовать и динамическую версию импорта, возвращающую Promise и обеспечивающую асинхронную загрузку целевого модуля.

Для отладочных целей тоже имеются решения. Просмотр оригинального исходного кода, и даже навигация по нему в отладчике браузера достигается посредством спецификации source maps, внедряемых в целевой bundle в режиме разработки. Частичное обновление без полной перезагрузки bundle решается при помощи Hot Module Reload, хотя действительно инкрементальное обновление корректно работает только в простых случаях.

Это требует пересмотра взгляда на сборку современных web-приложений, поскольку bundle были необходимостью из-за несовершенства и отсутствия требуемой функциональности в браузерах. После её появления, использование нативных конструкций обеспечивает гораздо лучший результат.

Во-первых, излишний transpile синтаксических конструкций и замены его на эмулирующий код приводит к замедлению и затруднению оптимизаций. Это касается async и generator-функций, заменяемых на regenerator runtime, и лексических переменных let/const, преобразуемых в неоптимальные var-декларации.

Конечно, это не имеет прямого отношения к ES6-модулям как таковым, но обычно определяется схемой сборки и доставки на клиент приложения. В этом смысле это взаимосвязанные вещи.

Во-вторых, модули эффективны с точки зрения производительности. ES6 модули загружаются и исполняются отложенным образом по умолчанию. Это значит, что невозможно по ошибке осуществить добавление блокирующих модулей к веб-приложению, и соответственно из коробки нет никакой SPOF проблемы.

Для сохранения работоспособности в старых браузерах, не имеющих поддержку ES6-модулей, можно иметь собранный bundle и отдавать его для старых агентов. При этом, благодаря особенностям конструкции импорта ES6-модулей, не требуется условной настройки webpack с сегрегацией поставляемого кода в зависимости от User-Agent строки браузера, или средств feature discovery.

Для разграничения достаточно следующего кода:

О вопросах эффективной настройки webpack-а для рассмотренной выше схемы, асинхронной и отложенной загрузки модулей, кэшировании зависимостей, inline-модулях и CORS-политиках для них можно прочесть более детально: «ES6 modules support lands in browsers: is it time to rethink bundling?» и «ECMAScript modules in browsers».

В итоге решения, позволяющие в прошлом обеспечивать эмуляцию поддержки новых возможностей в популярных версиях браузеров на сегодня применимы к устаревшим агентам, которые, в зависимости от задачи, имеет смысл поддерживать отдельно или вообще исключить.

Предварительное разрешение и связывание модулей и их последующее bundle-ирование, еще недавно бывшее основным способом поддержки ES6 modules в большинстве браузеров, сейчас оказывает на них негативное влияние и мешает оптимизациям и средствам кэширования.

Таким образом, настраивая сборку веб-приложения, целесообразно предоставлять современным агентам код на современном EcmaScript, включая синтаксические элементы и импорты/экспорты модулей.

От редакции

habrahabr.ru

Как использовать ECMAScript 6 сегодня? — CSS-LIVE

Присказка

Эта статья о новой волне JavaScript, о том, как будут писаться проекты в ближайшие год-полтора в ES5-окружениях.

Сказка. Что нас ждет?

ECMAScript 6 — грядущая версия стандарта, формальное утверждение которого намечено на июнь этого года. Данный стандарт несет в себе существенные изменения:

• новые глобальные объекты: Map, Set, Symbol и т.д.
• новые синтаксические конструкции: module, class, const и т.д.
• новые концепции, которые реализованы преимущественно посредством п.2: модули (импорт/экспорт), итераторы, генераторы и т.д.
• расширение существующих глобальных объектов и прототипов этих объектов: Array.from(), Array.prototype.find() и т.д.

Описание всех нововведений лежит за рамками данной статьи, но прежде чем перейти к основной ее части, я размещу пару ссылок пройдя по которым вы сможете ознакомится с ними более детально: Поддержка ECMAScript 6 в Mozilla, ECMAScript 6 Features.

О трёх китах. Ключевые моменты

Опираясь на вышеизложенную классификацию нетрудно догадаться, что для эмуляции всех особенностей ES6 в среде ES5 потребуются:

• Polyfills / Полифилы (для новых методов глобальных объектов и их экземпляров)
• Transpiler / Транслятор (для синтаксических преобразований)
• Generator runtime / Генератор кода во время его исполнения (для итераторов и генераторов)

Разумеется, вы можете ограничится чем-то одним, либо задействовать все инструменты, наслаждаясь мощью ES6.

Кит 1. Полифилы

Практически на каждый новый метод объекта/прототипа уже существует полифил. Иными словами, все что можно было эмулировать уже реализовали. Например, для стандарта обещаний (Promise), реализованного в рамках ES6, уже написано несколько полифилов. Я использовал полифил от Octane.

Если вас интересует набор полифилов для ES6, вы можете воспользоваться es6-shim или core-js. Последний входит в состав транслятора, о котором речь пойдет ниже, и даже включает некоторые фичи ES7.

Кит 2. Трансляторы

Их несколько. Со списком можно ознакомится здесь, графа Compilers/polyfills. Нас интересует транслятор babel, потому как он имеет самый большой процент поддержки фич (78% на момент написания статьи), положительно себя зарекомендовал и при этом активно развивается.

Кит 3. Уплыл

Море. Поддержка нововведений

Таблица совместимости располагается здесь В ней представлено, что и как поддерживает интересующий вас браузер/транслятор/полифил.

Лодка. Пишем на ES6

Для использования транслятора нам понадобится Node.js. Убедитесь, что он у вас установлен.

Клонируйте проект с образцом es6-приложения с помощью гита или скачайте его в архиве.

Подготовьте проект к работе. В Windows это делается следующим способом:

Файловая структура представлена на скриншоте

В папке src хранятся исходники (es6), которые комплируются в папку dist (es5), а оттуда подключаются на страницу.

Для того, чтобы собрать проект единожды, достаточно набрать в терминале

Если вы хотите, чтобы проект собирался автоматически после изменения исходников, используйте

Т.к. при сборке проекта генерируются source-maps, то в отладчиках браузеров поддерживающих этот стандарт, дебаг будет удобным:

Примечание. Firebug его не поддерживает в отличии от стандартного отладчика Firefox.

В демо-приложении я использовал такие особенности es6, как: модули, импорт/экспорт, классы, наследование, суперметоды, параметры по умолчанию, оставшиеся параметры, оператор распространения, стрелочные функции, строки-шаблоны, генераторы.

Вместо заключения. Online ES6-песочницы

P.S. Это тоже может быть интересно:

css-live.ru

Смотрите также

• 
  Тестирование браузеров андроид
• 
  Хартстоун в браузере
• 
  Вацап через браузер
• 
  Браузер для буксов
• 
  Тестирование андроид браузеров
• 
  Dota в браузере
• 
  Яндекс браузер преимущества
• 
  Андроид журнал браузера
• 
  Фаерфокс история браузера
• 
  Безопасный браузер тор
• 
  Узнать ip браузер